Bootstrap 5 колонок – Bootstrap сетка реально ли 5 колонок? — Toster.ru

Сетка с 5 колонок в Twitter Bootstrap (Как сделать? Есть ответ)

Каждый верстальщик, который использует Twitter Bootstrap для адаптивной верстки, сталкивается с вопросом — как же сделать сетку с 5 колонок.  Мы знаем что Bootstrap использует 12-ти колоночную сетку. Она делится на 2,3,4 блока в одной строчке. Но как быть если нам нужно 5 блоков? Вот пример с верстки когда у меня возник такой вопрос. Смотрите скрин, нужно было разместить 5 блоков в одном ряду.

 

И на это есть ответ, нужно сделать всего два действия.

1. Добавляем стили

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-1-5 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 20%; float: left; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {   position: relative;   min-height: 1px;   padding-right: 10px;   padding-left: 10px; } .col-xs-1-5 {   width: 20%;   float: left; } @media (min-width: 768px) {   .col-sm-1-5 {     width: 20%;     float: left;   } } @media (min-width: 992px) {   .col-md-1-5 {     width: 20%;     float: left;   } } @media (min-width: 1200px) {   .col-lg-1-5 {     width: 20%;     float: left;   } }

2. Структуру 5 колоночной сетки Bootstrap делаем в таком виде:

<div> <div><img src=»путь_к_картинке» alt=»1″ /></div> <div><img src=»путь_к_картинке» alt=»2″ /></div> <div><img src=»путь_к_картинке» alt=»3″ /></div> <div><img src=»путь_к_картинке» alt=»4″ /></div> <div><img src=»путь_к_картинке» alt=»5″ /></div> </div>

<div>     <div><img src=»путь_к_картинке» alt=»1″ /></div>     <div><img src=»путь_к_картинке» alt=»2″ /></div>     <div><img src=»путь_к_картинке» alt=»3″ /></div>     <div><img src=»путь_к_картинке» alt=»4″ /></div>     <div><img src=»путь_к_картинке» alt=»5″ /></div> </div>

 

Сетка с 5 колонок в Twitter Bootstrap готова. Теперь вы можете делать 5 колонок в любом месте на сайте. Наслаждайтесь результатом. Если у вас есть вопросы, задавайте их в комментариях.

di-grand.com

Создание 5 колончатой сетки в Bootstrap 4

bootstrap

Автор Алексей На чтение 2 мин. Опубликовано 18.03.2018

Последнее изменение поста: 25 октября 2018 в 11:25

Сегодня мы расширим стандартную сетку Bootstrap 4 до 5 колонок и до верстаем блок из прошлого урока.

Расширяем bootstrap сетку до 5 колонок

По умолчанию в бутстрапе нет пяти колончатой сетки, но ее по сути не сложно сделать на основании к примеру 4 колончатой, просто берем все стили и переписываем под 5 колон, соответственно задав новый класс. Все css стили новой сетки можно забрать на githab: github.com/web-revenue/bootstrap4-5col/blob/master/.gitignore/5col.css

Ну а теперь можно до верстать наш блок до следующего вида:

для этого добавим следующую html разметку

<div>
    <div><p>20</p><p>СКЛАДОВ<br>ПО РОССИИ</p></div>
    <div><p>1300</p><p>ПОЗИЦИЙ<br>В КАТАЛОГЕ</p></div>
    <div><p>100%</p><p><span>ГАРАНТИЯ СОБЛЮДЕНИЯ СРОКОВ</span></p></div>
    <div><p>10</p><p>ЛЕТ ОПЫТ<br>РАБОТЫ</p></div>
    <div><p>0,1%</p><p>ОБРАЩЕНИЙ<br>ПО БРАКУ</p></div>  
</div>

Примечание: Добавляем после блока с классом well.

Ну и прописываем стили для элементов:

p.t-zag{
font-size:50px !important;/*размер шрифта*/
margin-bottom:1px;/*отступ для элементов от нижнего края*/
padding-top: 20px;/*отступ от верхнего края*/
}
.FEB238{color:#e65950;/*задаем цвет*/}

На сегодня все. Скачать материалы данного урока.

В следующем уроке мы продолжим верстать наш шаблон

web-revenue.ru

Пять равных столбцов в twitter bootstrap — twitter-bootstrap

Фантастическая полная ширина 5 колонок с помощью Twitter Bootstrap была создана здесь.

Это, безусловно, самое современное решение, так как оно легко работает с Bootstrap 3. Оно позволяет повторно использовать классы снова и снова, в паре с текущими классами Bootstrap для гибкого дизайна.

CSS:
Добавьте это в свою таблицу стилей или даже в нижнюю часть документа bootstrap.css.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}
 

Положите его на использование!
Например, если вы хотите создать элемент div, который ведет себя как макет пяти столбцов на средних экранах и как два столбца на более мелких, вы просто нужно использовать что-то вроде этого:

<div>
    <div>
       ...
    </div>
</div>

РАБОЧИЙ ДЕМО — Разверните рамку, чтобы увидеть, как столбцы становятся отзывчивыми.

ДРУГОЙ ДЕМО — включение новых классов col-*-5ths с другими, такими как col-*-3 и

col-*-2, Измените размер кадра, чтобы увидеть, как все они меняются на col-xs-6 в ответном виде.

---

Bootstrap 4 теперь использует flexbox по умолчанию, поэтому вы получаете доступ к своим магическим силам прямо из коробки. Ознакомьтесь с автомастерами, которые динамически изменяют ширину в зависимости от того, сколько столбцов вложен.

Вот пример:

<div>
   <div>
      1 of 5
   </div>
   <div>
      2 of 5
   </div>
   <div>
      3 of 5
   </div>
   <div>
      4 of 5
   </div>
   <div>
      5 of 5
   </div>
</div>

РАБОЧИЙ ДЕМО

qaru.site

Как устроена сетка Bootstrap

Вы здесь: Главная — CSS — CSS Основы — Как устроена сетка Bootstrap

Сетка Bootstrap состоит из 12 колонок, так как число 12 делится на большое количество чисел без остатка. Деление на числа 2, 3, 4, 6, 12, позволяет получить много вариантов равных частей. Для верстки любого макета, 12 колонок вполне достаточно. Основу сетки Bootstrap составляют 3 обязательных класса, по аналогии с табличными тегами.

.container --> <table>    // контейнер
.row --> <tr>    // ряд
.col-x-x --> <td>    // колонка, где x будет с разными значениями

Классический пример сетки с двумя колонками.

<div>
    <div>
        <div>
            Первая колонка
        </div>
        <div>
            Вторая колонка
    </div>
</div>

Контейнеры в Bootstrap 4

Сетка должна быть обернута в класс .container или .fluid-container

. В чем разница? Класс .container задает фиксированную ширину. Это значит, что при увеличении размеров экрана, блоки не будут растягиваться на всю ширину страницы.

Класс .fluid-container будет тянуть блоки на всю ширину страницы, как резина.

Ряды в Bootstrap 4

Внутри одного контейнера можно создавать сколько угодно рядов.

<div>
<div>
    <div>
        Шапка
    </div>
<div>
    <div>
        Контент
    </div>
<div>
        Колонка справа
    </div>
<div>
    <div>

        Подвал
    </div>
</div>

Колонки в Bootstrap 4

Название колонки всегда начинается с col, комбинация символов после дефиса – это сокращенное название ширины экрана у девайсов.

.col-          // extra small (<576px) для мобильных
.col-sm       // small
.col-md      // medium
.col-lg     // large
.col-xl    // extra large (>1200px) для больших десктопов

После размера ширины экрана, указывается количество колонок. Сколько колонок будут занимать блоки на страницах.

.col-sm-6     // на маленьких экранах блок займет 6 колонок
.col-lg-3     // на большом экране тот же блок займет 3 колонки


В HTML разметке мы прописываем блоку, сколько ему колонок занимать на маленьком и большом экране.

<div></div> </code>

Ширина колонок

Пример ниже демонстрирует, как зависит ширина колонки от размеров экрана. Сколько конкретно пикселей приходится на одну колонку от самых маленьких до самых больших экранов, высчитывается браузером автоматически. Поскольку в CSS правилах фреймворка, ширина колонок указана в %. Иначе говоря, такой показатель, как ширина колонок, нас вообще не должен беспокоить.

Как получить 5 колонок одинаковой ширины?

Для этого есть специальный класс .col.

<div>
     <div>
        <div>Column 1</div>
        <div>Column 2</div>
        <div>Column 3</div>
        <div>Column 4</div>
        <div>Column 5</div>
    </div>
</div>

Высота колонок

А как насчет высоты, вертикального выравнивания? И здесь так же можно не волноваться. В сетке Bootstrap 4 все колонки имеют одинаковую высоту, независимо от количества контента.

Отступы у колонок

У Bootstrap есть классы для добавления отступов колонок, которые начинаются со слова offset, затем указывается величина экрана и количество колонок. Сдвинуть элемент вправо на 3 колонки.

<div>
    <div></div>
</div>

Вложенные колонки

В колонку можно вкладывать новую сетку, где также доступны все 12 колонок. Класс .container во вложенной сетке прописывать уже не нужно, сразу создаем ряд.

<div>
    <div>
        <div>
             Вложенный блок 1
        </div>
        <div>
            Вложенный блок 2
        </div>
    </div>

Горизонтальное выравнивание колонок

Для горизонтального выравнивание относительно главной оси, в Bootstrap есть классы:

justify-content-center //     по центру
justify-content-start //     в начале главной оси
justify-content-end //     в конце главной оси

Заключение

Умение верстать по сетке Bootstrap, часто встречается в обязательных требованиях при трудоустройстве в профессиональные веб-студии. Дабы сберечь ваше время и нервы, настоятельно рекомендую приобрести видео-курс по Bootstrap, именно этого автора. Говорить просто о сложных вещах – это редкое, но очень ценное качество для преподавателя.

• Создано 02.09.2019 10:41:51
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

Bootstrap 3 — Сетка | ИТ Шеф

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

«Строительные» элементы сетки Bootstrap 3

Сетка Bootstrap состоит из «строительных» элементов. Основные — это обёрточные контейнеры, ряды, адаптивные блоки и отзывчивые служебные классы.

По существу сетка — это просто список предопределённых классов, с помощью которых можно задать необходимое поведение блокам (HTML элементам) и построить с их помощью определённый адаптивный макет сайта.

Обёрточные контейнеры

Обёрточный контейнер — это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:

Ширина viewport	Ширина контейнера (container)
<768px	Ширина контейнера равна ширине viewport
>= 768px и <992px	750px
>= 992px и <1200px	970px
<=1200px	1170px

Кроме установки ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto и margin-right:auto. Ещё адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

<!-- HTML-код адаптивно-фиксированного контейнера -->
<div>
  ...
</div>

Адаптивно-резиновый контейнер отличается от адаптивно-фиксированного тем, что он занимает всю ширину (100%) окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх для содержимого, которое в него помещено.

<!-- HTML-код адаптивно-резинового контейнера -->
<div>
  ...
</div>

При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие.

Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.

Следующий строительный элемент – это ряд (блок div с классом row). Ряд — это специальный блок, который применяется только для оборачивания других строительных элементов (адаптивных блоков). Его основное назначение — это нейтрализация положительного внутреннего отступа (15px слева и справа) обёрточного контейнера или адаптивного блока.

Bootstrap — ряд, расположенный внутри адаптивно-фиксированного контейнера

Пример формирования внутренних отступов:

container (+15px) -> row (-15px) -> col (+15px) -> контент
container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент
*col - это адаптивный блок

Пример показывает, что независимо от того в каком адаптивном блоке находится контент, он всегда будет иметь правильный отступ от края (т.е. 15px слева и справа).

Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div с классом col-?-?).

Адаптивный блок Bootstrap

Адаптивные блоки — это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-?. Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру.

Ширина адаптивному блоку задаётся в связке с типом устройства. Это означает, что адаптивный блок на разных устройствах может иметь разную ширину. Именно из-за этого данный блок и называется адаптивным.

Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака ? в классе col-?-?.

Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.

Например, число 1 — устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 — ширину, равную 100% (12/12) от ширины родительского блока.

Как задаётся ширина адаптивного блока в Bootstrap

Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs (ширина viewport >0) , sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px).

Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm — 50% (6/12), на md — 33,3% (4/12), на lg — 25% (3/12).

Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class адаптивного блока указали xs, но не указали sm, то его действие распространится и на область действия этого диапазона.

Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs, sm и md ширину 50% (6/12), на lg — 25% (3/12).

Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.

В правильном макете, построенном на основе сетки Bootstrap, адаптивный блок должен всегда иметь в качестве своего родителя ряд.

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:

<div>
  <div>...</div>
  <div>...</div> 
  <div>...</div> 
</div>

Если необходимо рассчитать ширину колонок в пикселях, то это правильно делать на границах контрольных точек (т.е. когда одно действие класса сменяется другим).

Например, расчитаем, доступную ширину под контент для первого и второго блока:

<div>  
  <div>
    <div>1 блок...</div>
    <div>2 блок...</div> 
  </div>
</div>

Контрольные точки	Доступная ширина 1 блока	Доступная ширина 2 блока
320px — 749.98px	от 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px))	от 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px))
750px — 969.98px	720px (750px — padding (30px))	720px (750px — padding (30px))
970px — 1169.98px	616,7px (970px*8/12 — padding (30px))	293,3px (70px*4/12 — padding (30px))
1170px и больше	750px (1170px*8/12 — padding (30px))	360px (1170px*4/12 — padding (30px))

Расположение адаптивных блоков в родительском элементе

Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д.

Как располагаются адаптивные блоки?

В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы.

Перед блоком, который должен начинаться с новой строки обязательно необходимо расположить пустой div элемент с классом clearfix. Ещё его необходимо скрыть для устройств, на которых это действие выполнять не нужно. Осуществляется скрытие блока с помощью соответствующих классов, приведённых ниже.

Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а «прилипнет» к правой стороне 1 блока.

Особенности float блоков

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg):

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>3 блок...</div>
</div>

Основной принцип создания макета

Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина — это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок — это всегда 50% (6/12*100%) от ширины родительского элемента.

Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>3 блок...</div>
  <div>4 блок...</div>
</div>

Создадим макет 3 блока (3 x 2):

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>
    <div>
      <div>3-1 блок...</div>
      <div>3-2 блок...</div>
      <div></div>
      <div>3-3 блок...</div>
      <div>3-4 блок...</div>  
      <div></div>
      <div>3-5 блок...</div>
      <div>3-6 блок...</div>
    </div>
  </div>
  <div>4 блок...</div>
</div>

Нетрудно заметить, что разметка вложенного адаптивного блока выполняется также как и основного. Это означает, что не имеет разницы, какой уровень вложенности имеет блок, создание его макета выполняется по тем же правилам.

Классы для адаптивного смещения блоков

В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ? необходимо заменить на тип устройства (xs, sm, md или lg). Второй ? на количество колонок.

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):

<div>
  <div>1 блок...</div>
</div>

Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Кроме указания устройства (xs, sm, md, lg), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline, block и inline-block.

Класс	Описание
visible-xs-?	Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport <768px). На других устройствах эти элементы не отображаются.
visible-sm-?	Делает элемент видимым только на устройствах, имеющих экран sm (ширина viewport >=768px и <992px). На других устройствах эти элементы не отображаются.
visible-md-?	Делает элемент видимым лишь на устройствах, имеющих экран md (ширина viewport >=992px и <1200px). На других устройствах эти элементы не отображаются.
visible-lg-?	Делает элемент видимым только на устройствах, имеющих экран lg (ширина viewport >=1200px). На других устройствах эти элементы не отображаются.

Вместо знака ? необходимо указать block, inline или inline-block. Т.е. указать, как данный элемент должен отображаться.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline и visible-md-inline, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;).

Кроме этих Bootstrap 3 имеет ещё классы с противоположным действием. С их помощью можно скрыть элементы на определенных устройствах.

Класс	Описание
hidden-xs	Скрывает элемент на устройствах xs (ширина viewport <768px).
hidden-sm	Скрывает элемент на устройствах sm (ширина viewport >=768px и <992px).
hidden-md	Скрывает элемент на устройствах md (ширина viewport >=992px и <1200px).
hidden-lg	Скрывает элемент на устройствах lg (ширина viewport >=1200px).

Эти классы тоже можно использовать совместно, чтобы сделать элемент не видимым на нескольких устройствах.

Например, элемент с классами hidden-xs и hidden-sm будет не виден сразу на 2 устройствах (xs и sm).

Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.

Класс	Описание
visible-print-block	Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение block.
visible-print-inline	Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline.
visible-print-inline-block	Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline-block.
hidden-print	Элемент, имеющий указанный класс не будет отображаться при печати. На странице (в браузере) данный элемент будет виден.

Пример создания макета с помощью сетки Bootstrap 3

В этом разделе статьи рассмотрим процесс создания адаптивного макета для блока с использованием сетки Bootstrap 3.

Макет состоит из трёх блоков. Эти блоки должны располагаться на устройствах так, как это показано на изображении.

Разрабатывать макет обычно начинают с крохотных устройств (xs). На данном устройстве блоки имеют одинаковую ширину, равную 12 колонкам Bootstrap.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На sm блоки располагаются следующим образом:

• 1 — занимает всю ширину родительского блока;
• 2 и 3 (каждый из них) — ширину, равную 6 колонкам Bootstrap.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На md блоки 1 и 2 расположены на первой строке, а 3 блок — на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8), 2 блок — 4 колонки (col-md-4).

3 блок должен всегда располагаться на 2 строке. Чтобы это гарантировать, перед этим блоком необходимо поместить дополнительный пустой блок с классом clearfix. Данный блок не позволит 3 блоку обтекать предыдущие блоки. Кроме этого необходимо иметь в виду, что блок с классом clearfix необходимо отображать только на md, т.к. данное действие на других устройствах не нужно.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>  
  <div>Контент блока 3...</div>
</div>

На lg адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6), 2 блок — одну четвертую ширины (col-lg-3), и 3 блок — тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3).

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>  
  <div>Контент блока 3...</div>
</div>

Ещё интересные темы:

itchief.ru

Шаблон | Bootstrap по-русски

Требуется HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства, которые требуют HTML5 doctype. Включите его во все свои проекты.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Оформление и ссылки

Основные компоненты Bootstrap включают в себя элементы отображения, оформления и стили ссылок. В частности, мы:

• Удалили отступ margin элемента body
• Установили белый цвет фона background-color: white; для body
• Используем атрибуты @baseFontFamily, @baseFontSize и @baseLineHeight как основные
• Настроили основной цвет ссылки с помощью @linkColor и применяем подчеркивание только для селектора :hover

Эти стили вы можете найти в scaffolding.less.

Сброс настроек посредством Normalize

В Bootstrap 2 мы применили старый сброс браузерных дефолтов с помощью Normalize.css, проект от Николаса Галлагера который также включает в себя HTML5 Boilerplate. Так как мы часто используем Normalize в нашем reset.less, мы удалили некоторые элементы специально для Bootstrap.

Демонстрация

Основная сетка макета состоит из 12 колонок, обеспечивая ширину контейнеров в 940px без активных динамических особенностей. При добавлении динамического файла CSS сетка может растягиваться в ширину от 724px до 1170px, в зависимости от вашего монитора. На дисплеях, ширина которых менее 767px, колонки становятся плавающими и выстраиваются вертикально.

Основная сетка HTML

Для простого макета в две колонки создайте класс .row и добавьте соответствующее число колонок .span*. Так как это сетка в 12 колонок, каждый диапазон из двух .span* насчитывает 12 колонок и всякий раз будет добавлять 12 колонок в каждую строку (или то количество колонок, которое задано в родительском элементе).

<div>
  <div>...</div>
  <div>...</div>
</div>

В данном примере у нас имеются .span4 и .span8, созданные и 12 колонок и одной сплошной строки.

Перемещение колонок

Подвиньте колонки вправо, используя классы .offset*. Каждый класс увеличивает левый отступ колонки на размер ее самой. Например, .offset4 перемещает .span4 на четыре колонки.

<div>
  <div>...</div>
  <div>...</div>
</div>

Верстка колонок

Чтобы сверстать контент, используя сетку по умолчанию, добавьте новый класс .row и установите расстояние .span* для колонок внутри существующей .span* колонки. Сверстанные строки должны состоять из набора колонок, который добавлен к количеству родительских колонок.

Колонка уровня 1

Уровень 2

Уровень 2

<div>
  <div>
    Level 1 column
    <div>
      <div>Level 2</div>
      <div>Level 2</div>
    </div>
  </div>
</div>

Демонстрация

В плавающей сетке для обозначения ширины колонок вместо пикселов используются проценты. Плавающая сетка имеет те же динамические возможности, что и фиксированная, обеспечивая нужные пропорции для разрешений экранов разных устройств.

Основная плавающая сетка HTML

Делает любую строку плавающей с помощью изменения .row на .row-fluid. Колонки останутся прежними, что позволяет с легкостью переключаться между фиксированным и плавающим шаблоном дизайна.

<div>
  <div>...</div>
  <div>...</div>
</div>

Плавающее перемещение

Устанавливается таким же образом, как и в фиксированной сетке: добавьте класс .offset* в любую колонку, чтобы при этом переместить несколько колонок.

<div>
  <div>...</div>
  <div>...</div>
</div>

Плавающая верстка

Верстка плавающей сетки немного отличается: количество верстаемых колонок не должно соответствовать количеству родительских колонок. Вместо этого каждый уровень сверстанных колонок «сбрасывается», потому что каждая строка принимает 100% свойств родительской колонки.

<div>
  <div>
    Level 1 of column
    <div>
      <div>Level 2</div>
      <div>Level 2</div>
    </div>
  </div>
</div>

Фиксированная разметка

Основной фиксированный по ширине макет (опционально динамический) с единственным требованием — <div>.

<body>
  <div>
    ...
  </div>
</body>

Плавающая разметка

Создайте плавающую страницу с двумя колонками с помощью <div>. Идеально подходит для приложений и документации.

<div>
  <div>
    <div>
      <!--Sidebar content-->
    </div>
    <div>
      <!--Body content-->
    </div>
  </div>
</div>

Включение адаптивных возможностей

Включите в вашем проекте адаптивный CSS, добавляя соответствующие мета теги и дополнительные таблицы стилей в <head> вашего документа. Если у вас компилированный Bootstrap, загруженный с нашей страницы, то вам всего лишь нужно добавить мета тег.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Внимание! По умолчанию в Bootstrap не включены адаптивные возможности, поскольку это не везде требуется. Вместо того, чтобы разработчики каждый раз отключали этот функционал, логичнее будет дать им возможность включать его при необходимости.

Об адаптивных особенностях Bootstrap

Медиа запросы изменяют обычный CSS, основанный на большом количестве условий и соотношений, размеров, типов дисплея и пр., но чаще всего — на фокусе в пределах min-width и max-width.

• Изменяет ширину колонок в сетке
• Там, где это необходимо, выравнивает элементы вертикально вместо использования обтекания.
• Изменяет размер заголовков и текста для лучшего отображения в различных устройствах.

Используйте адаптивные возможности Медиа-запросов только для создания мобильной версии сайта. Для крупных проектов мы рекомендуем создавать отдельную версию дизайна и сайта.

Поддерживаемые устройства

Bootstrap поддерживает несколько медиа-запросов в одном файле, что позволяет работать Вашему проекту на различных устройствах и с разными разрешениями экранов. Сюда относятся следующие устройства:

Категория	Ширина макета	Ширина колонок	Отступ между колонками
Большой дисплей	1200px и более	70px	30px
По умолчанию	980px и более	60px	20px
Портретные планшеты	768px и более	42px	20px
Планшеты	767px и менее	Плавающие колонки, без фиксированной ширины
Смартфоны	480px и менее	Плавающие колонки, без фиксированной ширины

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Дополнительные адаптивные классы

Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы вы можете найти в responsive.less.

Класс	Телефоны 767px и менее	Планшеты 979px to 768px	Ноутбуки и десктопы По умолчанию
.visible-phone	Виден	Скрыт	Скрыт
.visible-tablet	Скрыт	Виден	Скрыт
.visible-desktop	Скрыт	Скрыт	Виден
.hidden-phone	Скрыт	Виден	Виден
.hidden-tablet	Виден	Скрыт	Виден
.hidden-desktop	Виден	Виден	Скрыт

Когда использовать?

Используйте ограниченный функционал и избегайте создания совершенно различных версий на одном сайте. Вместо этого используйте данные возможности для создания разных презентаций на разных устройствах.

Тестирование адаптивных классов

Измените размер окна в вашем браузере или запустите сайт на других устройствах для тестирования адаптивные классов.

Виден на…

Зеленые отметки обозначают, что класс виден на данном дисплее.

• Телефон? Телефон
• Планшет? Планшет
• Десктоп? Десктоп

Скрыт на…

В этом случае зеленые отметки обозначают, что класс не отображается на данном дисплее.

• Телефон? Телефон
• Планшет? Планшет
• Десктоп? Десктоп

mybootstrap.ru