Блочная система (Grid System) Bootstrap позволяет вам горизонтально разделить страницу на 12 столбцов. Если использовать все 12 частей вам нет необходимости, такие блоки можно легко группировать, создавая более широкие столбцы. Они будут состоять из двух, трех и так далее частей страницы, разделённой на 12 частей. Это около 8.3% на столбец.
Разделить таким образом можно как страницу, так и любой блочный элемент, размеры блоков будут рассчитаны как часть родительского элемента.
Вот пример того, как можно разделить страницу при помощи Bootstrap.
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 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>
Таким образом вы легко сможете контролировать, как отображать ячейки из вашего шаблона, а вёрстка станет мобильной без дополнительных усилий.
В последнем примере не закрыты два div (из-за этого возникает некорректное отображение блоков).
Исправьте последний пример на:
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 скриншота, на них все наглядно – только не вижу, как их тут прикрепить.
Так, торможу :)
http://www.pictureshack.ru/view_37087_footer-w1200px.png – это в нормальном варианте, на разрешении 800х1200px
http://www.pictureshack.ru/view_88669_footer-resized.png – а вот при сужении экрана.
Буду благодарен за подсказку, “куда копать”.
Вероятно, у слоя, который накладывается, в стилях указан
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/footer-2.png’);
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 на всю ширину экрана.
Юля спасибо за hidden парился как убрать вобще колонку делал col-sm-12 и col-sm-0 не получалось
Огромное спасибо за Ваши уроки! Впервые отключила AdBlock по просьбе владельца сайта, который посещаю.
Потому что эти уроки того стоят! Пользовалась ими как настольной книжкой, работая над сайтом – все доступно, просто и по полочкам. Обязательно добавлю в закладки на будущее )))
PS Реклама оказалось очень даже интересной ;)
@Роза, спасибо, ждите следующих уроков.
Прочитал Ваш комментарий и сам отключил…Спасибо что напомнили))
Здравствуйте! Помогите пожалуйста! Суть моей проблемы такая:я переделываю шаблон bootstrap под себя,сайт отоброжается адаптивно, но вот я добавил иконки соц сетей и логотип, смартфон перестал видеть логотип, а иконки сдвинули слова заголовка, на ipad все хорошо отображает. Куда смотреть? Спасибо!
Спасибо за статью.
Как посоветуете реализовать на Bootstrap такой шаблон: нужно две колонки (левая и правая) фиксированной ширины и средняя плавающая.
@Анна, в этом вам Bootstrap не поможет, придется самой написать код:
А есть какая нибудь встроенная возможность сбрасывать сетку? например, что бы элементы в телефону занимали всю ширину,
, а в остальных случаях width: auto;Это можно сделать при помощи
@media
-запросов.@Назар Токарь, Большое спасибо за ответ, но про
запровсы я в курсе. Мне больше интересовало есть ли в бутстрап что-то готовое, вообщем дополнил сетку такими селекторами:@Виталька, вот теперь я завис :). Пожалуйста, объясните, зачем вы написали такой код…
@Виталька, что бы на некоторых экранах можно было отключать сетку, и ширина высчитивалась автоматически браузером. Иногда бывают моменту, когда на одном экране сетка нужна, а на другом мешает
@Виталька, это например, если вы хотите “табличную” верстку дивами показать построчно на мелком экране?
@Назар Токарь, Да наверное (если я Вас правильно понял). Если я например использую любой из классов 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;
, а в нем соответственно создавать блоки, у которых и будет фиксированная ширина в процентах от родительского блока.Я правильно понял ваш вопрос?
@Назар Токарь, Возможно Вы правильно поняли вопрос. Но давайте попробуем, с примером. У нас есть код:
<div class="row"> <div class="{bootstrap-class}" style="width: 150px">col one</div> <div class="{bootstrap-class}" style="width: 135px">col two</div> </div>
Какой класс BS мне нужно указать вместо {bootstrap-class}, чтобы колонка не меняла своей ширины при растяжении/сужении экрана.
Интересно получается, задал Вам вопрос, пару раз перечитал, залез в код bootstrap.css. И пришел к выводу , что мне никто не мешает самостоятельно сделать блок типа “YUI3-u”, взяв код из “col-xs-1”, т.е. выйдет:
.yui3-u { position: relative; min-height: 1px; float: left; }
осталось только проверить.
Код обрезается, включайте его лучше в pre.
@Назар Токарь, т.е. не выровнялся?
Первый код:
Второй код:
@Pavel, лично я бы делал фиксированную ширину контейнера, а дальше развлекался внутренними блоками :)
@Назар Токарь, понятно, спасибо за совет.
Прежде всего спасибо за оперативность ответа. Честно – не ожидал. Респект. У меня есть опасение/подозрение, что IE не знает, что такое Бутсрап. Может такое быть? К примеру вышеперечисленные браузеры видят class “glyphicon”. У IE – на их месте – просто квадратики. Может IE и col-md- col-xs и т.д. не понимает, вот и разбрасывает мое изображение по своей какой-то схеме?
@Юрий, Назар, большое сори. Ввел в заблуждение маненько. Запущенный IE в Ubuntu действительно не видит класс glyphicon, а из-под Винды там все нормально. Хотя в обоих вариантах запуска IE расброс компонентов по екрану ужасный. Буду искать причину в самом коде. Вот уж не думал, что IE такой капризный.
@Юрий, у бутстрапа, как и у любых других фреймворков, особенные отношения c IE, о поддержке этого браузера вы можете почитать в этом разделе мануала.
Позвольте и мне задать вопрос. Создал свой сайт (первый). В Chrome, FF, на моем телефоне отображается все нормально, но стоит перейти в IE сбрасывает изображение страницы не пойми как. (Сайт написан на RoR). К примеру, мое меню прописывает не в одну строку, а каждый пункт меню в отдельной строке. Может подскажите напрвление, куда копать? Зараннее спасибо
@Юрий, как это связано с бутстрапом и как я могу понять, о чем речь?
Назар, а почему блок с классом “row” всегда добавляет горизонтальную полосу прокрутки в браузере? Сделал пару примеров из урока, в браузере постоянно полоска внизу. Что это за класс, какие там параметры? Заранее спасибо за ответ
@Виталий, в этом блоке есть внутренние отступы слева и справа по 15 пикселей, это сделано для того, чтобы первый и соответственно последний блоки внутри не выходили за видимые границы. Используйте .container, чтобы избегать появления горизонтальной прокрутки, или же исправьте отступы для .row вручную.
Верстка на этой странице отличается от предыдущих. Серфил с планшета.
@Nesutulsa, ?
“Ниже приведено несколько примеров вёрстки самых популярных макетов при помощи блочной верстки Bootstrap.” – что-то примеров я как раз и не нахожу, а их-то на странице и не хватает.
@Сергей, Я имел ввиду визуальные примеры блоками.
@Сергей, почему вы не можете найти примеры?
@Назар Токарь, Код примеров я нахожу. Было бы классно визуально видеть эти блоки как в начале статьи с разделением страницы.
Назар, спасибо за урок!
В завершающем уроке было бы круто опубликовать мастер-класс по верстке несложного шаблона на бутстрап. Так сказать для закрепления :)
@Олег, да, можно и так сделать, хорошая идея, спасибо :)
Добрый день!
Взялся сверстать сайт на joomla при помощи bootstrap для ее адаптивности. С этим фреймворком раньше ни когда не работал, по сему возникли вопросы:
– Если я хочу использовать слайдер, выпадающее меню и еще ряд компонентов именно joomla – так как они по своей функциональности удовлетворяют потребностям сайта – нужно ли мне в стили этих компонентов вписывать классы bootstrap для их адаптивности к разным устройствам?
– Может я могу в глобальной разметке использовать эти классы, а все остальные стили прописать в своем template.css ??
За ранее спасибо за ответ!
@Mellofon,
1. да, конечно, именно по классам добавляются стили и обработчики событий в Bootstrap.
2. не играет роли, в каком файле указывать стили.
Хочу вам выразить благодарность за ваш труд!
Пожелания на будущие уроки, хотелось бы пройти уроки по созданию сайта с самого начала, с применением знаний полученных ранее.
Спасибо, рад что это полезно. Создание сайта с нуля это довольно обширная тема и серия уроков как раз описывает, как работать над его частями. В сумме это и получается энциклопедия по созданию простого сайта.
А как сделать, чтобы макет всегда отображался одинаково
На всех устройствах
Используйте стиль xs для мобильных телефонов.
Cпасибо большое!