Блочная система (Grid System) Bootstrap позволяет вам горизонтально разделить страницу на 12 столбцов. Если использовать все 12 частей вам нет необходимости, такие блоки можно легко группировать, создавая более широкие столбцы. Они будут состоять из двух, трех и так далее частей страницы, разделённой на 12 частей. Это около 8.3% на столбец.

Разделить таким образом можно как страницу, так и любой блочный элемент, размеры блоков будут рассчитаны как часть родительского элемента.

Вот пример того, как можно разделить страницу при помощи Bootstrap.

span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Блочная структура в Bootstrap рассчитана также на мобильные устройства и планшеты. Блоки будут автоматически перестраиваться в зависимости от размера экрана.

Классы для ячеек

В блочной верстке Bootstrap есть четыре основных класса:

  • xs (extra small) — для мобильных телефонов, до 767 пикс. включительно
  • sm (small) — для планшетов, размер экрана 768—991 пикс.
  • md (middle) — для десктопов, 992—1199 пикс.
  • lg (large) — для больших экранов, от 1200 пикс.

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

Базовая структура макета

Это пример верстки макета при помощи блочной системы Bootstrap:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Для начала создайте строку с ячейками: <div class="row"> и далее добавьте в нее нужное количество столбцов с соответствующими классами .col-*-*.

Обратите внимание, что сумма ячеек для каждого типа (sm, xs, md, lg) в ячейке .col-*-* не должна превышать 12 частей для каждой строки.

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

Вы можете указывать, какой отступ будет у колонки, если вы хотите “отодвинуть” ее вправо. Для этого используйте класс .col-md-offset-*. Такой класс увеличит отступ слева на количество колонок, указанное в *

<div class="row"> 
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> 
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> 
</div>

Смена порядка отображения ячеек

Можно указывать, в каком порядке будут отображаться ячейки, при помощи классов .col-md-push-* и .col-md-pull-*.

<div class="row"> 
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div> 
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div> 
</div>

Ниже приведено несколько примеров вёрстки самых популярных макетов при помощи блочной верстки Bootstrap.

Пример: три одинаковые колонки

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

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-4">.col-sm-4</div> 
</div>

Пример: две колонки разной ширины

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

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-8">.col-sm-8</div> 
</div>

Пример: две колонки с двумя вложенными колонками

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

<div class="row">
  <div class="col-sm-8"> 
   .col-sm-8 
   <div class="row"> 
    <div class="col-sm-6">.col-sm-6</div> 
    <div class="col-sm-6">.col-sm-6</div> 
   </div> 
 </div> 
 <div class="col-sm-4">.col-sm-4</div> 
</div>

Отзывчивая мобильная верстка

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

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

<div class="row">
  <div class="col-sm-12 col-md-8 col-lg-6">
  <div class="col-sm-12 col-md-4 col-lg-6">
</div>

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

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

57 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

Исправьте последний пример на:

col-sm-12 col-md-8 col-lg-6

col-sm-12 col-md-4 col-lg-6

Автор
Назар Токар

Трохи переписав опис, бо там була інша ідея. Дякую за нагадування.

Делаю первый раз верстку под bootstrap - решил осваивать фреймворк и все такое. Проблема - "плывет" при сужении экрана. В принципе, не только футер, но с ним наиболее показательно. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не "размножается" по вертикали. Далее, под футером стоит еще одна строка, 80px, более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается "прилеплена" к нему снизу, таким образом частично закрывая столбцы футера.

P.S. Есть 2 скриншота, на них все наглядно - только не вижу, как их тут прикрепить.

Так, торможу :)

- это в нормальном варианте, на разрешении 800х1200px

- а вот при сужении экрана.

Буду благодарен за подсказку, "куда копать".

Автор
Назар Токар

Вероятно, у слоя, который накладывается, в стилях указан position: absolute;.

Нет, Назар. В варианте position: absolute; bottom: 0; он просто залипал внизу страницы, "наезжая" на другие блоки, идущие до самого низа. Это уже пробовал.. и absolute, и fixed.

Вот HTML (bootstrap настроен на 24 колонки, не на дефолтовые 12):

Рассылка

Контакты

Форма обратной связи

Вот CSS:

.bottomfooter {

height: 80px;

padding: 10px 0;

background-color: rgb(80,80,80);

color: @text-color;

font-size: @font-size-base;

a {

color: @text-color;

}

}

footer {

background-image: url('../images/');

background-repeat: no-repeat;

color: #dbdbdb;

font-size: @font-size-base;

.container {

height: 400px;

padding: 10px 0;

background: @panel-footer-bg;

Поделись мнением... Как играет на оптимизацию и продвижение дублирование контента, которое появляется из-за использования hidden-* и visible-*?
Может есть какие-то статьи по этому вопросу...

Автор

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

Не будет ли восприниматься отображение разного контента для ботов поисковиков и для посетителей клоакингом с последующими санкциями? Кстати, с каким разрешением воспринимает поисковых ботов бутстрап?

Добрый день!

Есть вопрос по гридам на бутстрапе -стандартный размер - 60Х20, то есть всего 960 получается, а для больших мониторов как размер сетки увеличить? Чтобы 1248 ширина была, например, но количество колонок не менялось и вёрстка не плыла?

Автор
Назар Токар

@Татьяна, размер ячейки рассчитывается в процентах от родительского блока, который делится на 12 частей. Получается 8.333..% на каждую ячейку.

Подскажите, плиз. есть 3 столбца с одинаковым классом

col-lg-4 col-md-4 col-sm-12 col-xs-12. На телефоне они уже располагаются один за другим.

Как сделать, чтобы на т-не 2 столбец шел первым?

Спасибо

Автор
Назар Токар

@Юлия, только при помощи position: absolute

@Назар Токарь, Спасибо за быстрый ответ. Я нашла еще одно решение.

Перед строчкой с 3-мя столбцами добавила еще одну строчку только со вторым столбцом шириной на все 12 и чтобы не показывались не на телефонах. hidden-lg hidden-md col-sm-12 col-xs-12

А сам второй столбец скрыть col-lg-4 col-md-4 hidden-xs hidden-sm

Вроде работает. На экране компа - 3 столбца. На т-не сначала второй, потом 1,3 на всю ширину экрана.

Огромное спасибо за Ваши уроки! Впервые отключила AdBlock по просьбе владельца сайта, который посещаю.

Потому что эти уроки того стоят! Пользовалась ими как настольной книжкой, работая над сайтом - все доступно, просто и по полочкам. Обязательно добавлю в закладки на будущее )))

PS Реклама оказалось очень даже интересной ;)

Прочитал Ваш комментарий и сам отключил...Спасибо что напомнили))

Автор
Назар Токар

@Роза, спасибо, ждите следующих уроков.

Здравствуйте! Помогите пожалуйста! Суть моей проблемы такая:я переделываю шаблон bootstrap под себя,сайт отоброжается адаптивно, но вот я добавил иконки соц сетей и логотип, смартфон перестал видеть логотип, а иконки сдвинули слова заголовка, на ipad все хорошо отображает. Куда смотреть? Спасибо!

Спасибо за статью.

Как посоветуете реализовать на Bootstrap такой шаблон: нужно две колонки (левая и правая) фиксированной ширины и средняя плавающая.

Автор
Назар Токар

@Анна, в этом вам Bootstrap не поможет, придется самой написать код:

.left-side {

width: 100px;

float: left;

}

.right-side {

width: 200px;

float: right;

}

.content {

margin: 0 200px 0 100px;

}

А есть какая нибудь встроенная возможность сбрасывать сетку? например, что бы элементы в телефону занимали всю ширину,

<span class="col-xs-12">

, а в остальных случаях width: auto;

Автор
Назар Токар

Это можно сделать при помощи @media-запросов.

@Назар Токарь, Большое спасибо за ответ, но про

@media

запровсы я в курсе. Мне больше интересовало есть ли в бутстрап что-то готовое, вообщем дополнил сетку такими селекторами:



.col-xs-0,

.col-sm-0,

.col-md-0,

.col-lg-0{

float: left;

}

.col-xs-0 {

width: auto;

}



@media (min-width: 768px) {

.col-sm-0 {

width: auto;

}

}



@media (min-width: 992px) {

.col-md-0 {

width: auto;

}

}



@media (min-width: 1200px) {

.col-lg-0 {

width: auto;

}

}

@Назар Токарь, Да наверное (если я Вас правильно понял). Если я например использую любой из классов col-xs-*, то на более больших экранах я не могу использовать реальную ширину элемента, поэтому в таких случаях я использую col-*-0, правда после этого я не могу предугадать общую ширину всей группы элементов col-*-0, поэтому я их помещаю внутрь элемента c классом col-*-(1-12)

Автор
Назар Токар

@Виталька, я привык делать блоки либо фиксированными, либо "отзывчивыми". То есть если блок тянется на 50% на десктопе, то, к примеру, будет тянуться на 100% на мобильном, но тогда никаких пикселей в размерах :)

@Виталька, что бы на некоторых экранах можно было отключать сетку, и ширина высчитивалась автоматически браузером. Иногда бывают моменту, когда на одном экране сетка нужна, а на другом мешает

Автор
Назар Токар

@Виталька, это например, если вы хотите "табличную" верстку дивами показать построчно на мелком экране?

Автор
Назар Токар

@Виталька, вот теперь я завис :). Пожалуйста, объясните, зачем вы написали такой код...

Здравствуйте, Назар!

Спасибо за Ваши труды и потраченное время.

И если можно, ответьте пожалуйста на следующий вопрос. Как можно реализовать блоки фиксированной ширины (при резиновом или фиксированном container).

До BS я работал с YUI3, там все это реализуется элементарно:

YUI3-u - ему можно задать ширину вручную (px/% не важно)

YUI3-u-1-2 - а это 50% от ширины

YUI3-u-2-3 - а это 66.6% от ширины

Меня интересует именно пример с YUI3-u, есть ли в BS нечто подобное?

Автор
Назар Токар

@Pavel, вы можете внутри контейнера создать другой контейнер с фиксированной шириной и margin: 0 auto;, а в нем соответственно создавать блоки, у которых и будет фиксированная ширина в процентах от родительского блока.

Я правильно понял ваш вопрос?

@Назар Токарь, Возможно Вы правильно поняли вопрос. Но давайте попробуем, с примером. У нас есть код:

col one

col two


Какой класс BS мне нужно указать вместо {bootstrap-class}, чтобы колонка не меняла своей ширины при растяжении/сужении экрана.

Интересно получается, задал Вам вопрос, пару раз перечитал, залез в код bootstrap.css. И пришел к выводу , что мне никто не мешает самостоятельно сделать блок типа "YUI3-u", взяв код из "col-xs-1", т.е. выйдет:

.yui3-u {
position: relative;
min-height: 1px;
float: left;
}

осталось только проверить.

@Назар Токарь, понятно, спасибо за совет.

@Назар Токарь, т.е. не выровнялся?

Первый код:





col one


col two




Второй код:



.yui3-u {

position: relative;

min-height: 1px;

float: left;

}

Автор
Назар Токар

@Pavel, лично я бы делал фиксированную ширину контейнера, а дальше развлекался внутренними блоками :)

Автор
Назар Токар

Код обрезается, включайте его лучше в pre.

Прежде всего спасибо за оперативность ответа. Честно - не ожидал. Респект. У меня есть опасение/подозрение, что IE не знает, что такое Бутсрап. Может такое быть? К примеру вышеперечисленные браузеры видят class "glyphicon". У IE - на их месте - просто квадратики. Может IE и col-md- col-xs и т.д. не понимает, вот и разбрасывает мое изображение по своей какой-то схеме?

@Юрий, Назар, большое сори. Ввел в заблуждение маненько. Запущенный IE в Ubuntu действительно не видит класс glyphicon, а из-под Винды там все нормально. Хотя в обоих вариантах запуска IE расброс компонентов по екрану ужасный. Буду искать причину в самом коде. Вот уж не думал, что IE такой капризный.

Автор
Назар Токар

@Юрий, у бутстрапа, как и у любых других фреймворков, особенные отношения c IE, о поддержке этого браузера вы можете почитать в http://getbootstrap.com/getting-started/#support" rel="nofollow">этом разделе мануала.

Позвольте и мне задать вопрос. Создал свой сайт (первый). В Chrome, FF, на моем телефоне отображается все нормально, но стоит перейти в IE сбрасывает изображение страницы не пойми как. (Сайт написан на RoR). К примеру, мое меню прописывает не в одну строку, а каждый пункт меню в отдельной строке. Может подскажите напрвление, куда копать? Зараннее спасибо

Автор
Назар Токар

@Юрий, как это связано с бутстрапом и как я могу понять, о чем речь?

Назар, а почему блок с классом "row" всегда добавляет горизонтальную полосу прокрутки в браузере? Сделал пару примеров из урока, в браузере постоянно полоска внизу. Что это за класс, какие там параметры? Заранее спасибо за ответ

Автор
Назар Токар

@Виталий, в этом блоке есть внутренние отступы слева и справа по 15 пикселей, это сделано для того, чтобы первый и соответственно последний блоки внутри не выходили за видимые границы. Используйте .container, чтобы избегать появления горизонтальной прокрутки, или же исправьте отступы для .row вручную.

Верстка на этой странице отличается от предыдущих. Серфил с планшета.

Автор
Назар Токар

@Nesutulsa, ?

"Ниже приведено несколько примеров вёрстки самых популярных макетов при помощи блочной верстки Bootstrap." - что-то примеров я как раз и не нахожу, а их-то на странице и не хватает.

Автор
Назар Токар

@Сергей, почему вы не можете найти примеры?

@Назар Токарь, Код примеров я нахожу. Было бы классно визуально видеть эти блоки как в начале статьи с разделением страницы.

@Сергей, Я имел ввиду визуальные примеры блоками.

Назар, спасибо за урок!

В завершающем уроке было бы круто опубликовать мастер-класс по верстке несложного шаблона на бутстрап. Так сказать для закрепления :)

Автор
Назар Токар

@Олег, да, можно и так сделать, хорошая идея, спасибо :)

Добрый день!

Взялся сверстать сайт на joomla при помощи bootstrap для ее адаптивности. С этим фреймворком раньше ни когда не работал, по сему возникли вопросы:

- Если я хочу использовать слайдер, выпадающее меню и еще ряд компонентов именно joomla - так как они по своей функциональности удовлетворяют потребностям сайта - нужно ли мне в стили этих компонентов вписывать классы bootstrap для их адаптивности к разным устройствам?

- Может я могу в глобальной разметке использовать эти классы, а все остальные стили прописать в своем template.css ??

За ранее спасибо за ответ!

Автор
Назар Токар

@Mellofon,
1. да, конечно, именно по классам добавляются стили и обработчики событий в Bootstrap.
2. не играет роли, в каком файле указывать стили.

Хочу вам выразить благодарность за ваш труд!

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

Автор
Назар Токар

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

А как сделать, чтобы макет всегда отображался одинаково

На всех устройствах

Автор
Назар Токар

Используйте стиль xs для мобильных телефонов.

Cпасибо большое!