Что такое сетка бутстрап? Блочная система · Bootstrap на русском Google AdWords - создание групп

Данный туториал предоставляет информацию о «грид» системе фреймворка Bootstrap 3.

Сеточная система Twitter Bootstrap предлагает быстрый и простой способ создавать разметку веб-страниц. Twitter Bootstrap 3 идет в комплекте с адаптивной мобильной плавающей системой сеток, которая структурируется вплоть до 12 колонок в зависимости от увеличения размера устройства или экрана. Давайте посмотрим, как она работает.

Чтобы правильно выравнять и задать внутренний отступ сетки, блоки с классом.row нужно располагать внутри блоков с классом.container (фиксированная ширина) или.container-fluid (по ширине странице).

Блоки с классом.row необходимо использовать для создания горизонтальных групп колонок.

Предопределенные классы сеток, например.row и.col-xs-4, позволяют быстро создавать разметку сеток. Также можно использовать миксины языка стилей less для увеличения количества типов семантической разметки.

Колонки создают промежутки (gutters) (разрывы между содержанием колонок) через внутренний отступ (padding). Этот внутренний отступ (padding) смещается для первой и последней колонок из-за отрицательного значения внешнего отступа (margin) блоков с классом.row.

Колонки сеток создаются путем указания требуемого числа из двенадцати доступных колонок. Например, для трех одинаковых колонок нужно использовать три контейнера с классом.col-xs-4.

Классы сеток применяются к устройствам, в которых ширина больше или равна контрольным размерам, и переопределяют классы сеток, предназначенных для меньших устройств. Таким образом, применение любого класса.col-md- к элементу задаст стиль не только для средних, но и для больших устройств в том случае, если не используется класс.col-lg- .

Twitter Bootstrap 3 включает предопределенные классы сеток, чтобы быстро верстать сеточную разметку для различных типов устройств, например мобильные телефоны, планшеты, компьютеры и т.п. Например, можно использовать класс.col-xs- , чтобы создавать сеточные колонки для очень маленьких устройств, как, например, мобильный телефон; таким же образом класс.col-sm- употребляется для маленьких устройств ~ планшетов, класс.col-md- для средних устройств ~ компьютеров и.col-lg- для больших экранов компьютеров. Ниже приводятся виды разметки системы сеток Bootstrap .

Очень маленькие устройства ~ телефоны ( .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6

Mobile, tablet, desktops (Мобильный, планшет, компьютеры). Постройте еще более динамичную разметку для планшета при помощи класса.col-sm-* , используя предыдущий пример.

Пример кода:

.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4

Column wrapping (Перенос колонок) . Если в одном блоке с классом.row находится больше 12 колонок, каждая группа дополнительных колонок будет переходить на новою строку как единое целое.

Пример кода:

.col-xs-9 .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-xs-6
Subsequent columns continue along the new line.

Responsive column resets (Исправление адаптивных колонок) . При использовании четырех доступных сеток, вы столкнетесь с проблемой, когда в определенных точках колонки выглядят неправильно из-за разницы высоты. Чтобы это исправить, используйте комбинацию блока с классом.clearfix и адаптивных служебных классов.

Пример кода:

.col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3

Offsetting columns (Смещение колонок) . Двигайте колонки вправо при помощи классов.col-md-offset-* . Эти классы увеличивают отступ слева от блока на * количество колонок. Например, класс.col-md-offset-4 подвинет блок с классом.col-md-4 на четыре колонки.

Пример кода:

.col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3

Nesting columns (Вложенные колонки) . Чтобы вложить содержание в основную сетку, добавьте новый блок с классом.row и набор колонок.col-sm-* внутри существующей колонки.col-sm-*. Вложенные блоки с классом row должны включать набор из 12 или менее колонок (не рекомендуется использовать все 12 доступных колонок).

Пример кода:

Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6

Column ordering (Порядок отображения колонок) . Порядок отображения встроенных сеточных колонок можно изменить при помощи модифицированных классов.col-md-push-* and .col-md-pull-*.

Пример кода:

.col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9

Используйте следующие адаптивные классы, чтобы управлять видимостью элементов на устройствах, чьи размеры экранов подпадают под определенный тип. В версии v3.2.0, классы.visible-*-* для каждого контрольного размера представляются в трех вариантах, по одному на каждое значение свойства CSS display: inline, block и inline-block.

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

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

Здравствуйте, уважаемые читатели блога сайт. В первой части статьи по мы познакомились с возможностями этого фреймворка, узнали о том, что такое отзывчивый дизайн и почему он так важен в нашу эпоху повального роста популярности различных мобильных гаджетов. Там мы также во всех подробностях рассмотрели вопросы подключения Бутстрапа к Html странице (подключение файлов стилей, скриптов и библиотеки jQuery).

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

Bootstrap 3 идет в комплекте с двенадцатиколоночной сеточной системой , которая рассчитана в основном на мобильные устройства. Т.е. она разработана с прицелом в первую очередь именно на маленькие дисплеи, в уже во вторую — на широкие экраны. В новой версии этого фреймворка есть четыре размера сетки. Всю эту информацию можно подробно изучить на официальном сайте GetBootstrap.com , перейдя на вкладку «CSS» из верхнего меню и выбрав пункт «Grid system» в правом.

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

Ну, а сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута class со значением, например, .col-xs-цифра (в этом случае используется только сверхмалая сетка).

Для примера, если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap 3) на 3 (требуемое число колонок). Значит для каждого Html элемента внутри ряда (это опять же могут быть контейнеры Div) нужно будет прописать одинаковые классы — . Если нужны колонки не равной ширины, то нужно будет просто соблюсти условие, при котором цифры после col-xs- во всех трех классах в сумме должны составлять 12 (например, 2-4-6). Но прежде давайте рассмотрим, что такое «xs» в этой записи и что это значит?

Чуть ниже в области «Grid options» вы найдет объяснение упомянутых выше четырех размеров сетки современного Бутстрапа.

Последние три сетки будут горизонтальными лишь при размерах экрана по ширине больше точки, при которой наступает «коллапс» (слом). Например, для большой сетки на экранах размером меньше 1200 пикселей она перестанет быть горизонтальной и превратится в вертикальную. На странице официального сайта GetBootstrap.com , которую мы сейчас рассматриваем, приведены примеры и пояснения по этому поводу. Однако, на мой взгляд, там все несколько путано и сложно.

Попробую пояснить все это на готовом примере. Вам нужно будет лишь скопировать файлик setka.html (для этого и выберите из контекстного меню пункт «Сохранить по ссылке как...»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

Скачанный файлик setka.html поместите в папку Bootstrap, о которой мы говорили в . Он должен находиться на том же уровне, что и созданный нами ранее файл index.html.

Теперь откройте этот файлик setka.html в любом удобном для вас браузере и произведите ряд экспериментов с размером окна вашего обозревателя, чтобы увидеть работу Bootstrap 3 в действии и понять работу сеточной системы. Каких именно? Сейчас объясню.

У меня разрешение экрана монитора по ширине составляет 1280 пикселей, что больше точки слома в 1200 пикселей, заданной для большой сетки. Что мы видим в результате? Примерно такую картину:

Здесь приведены пять примеров макета сайта, построенных на разных типах сеток:

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

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

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

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

Давайте еще раз уменьшим размер окна браузера по ширине так, чтобы оно стало. Произойдет очередной слом:

Теперь (исходя из размера экрана) мы работаем с маленькой сеткой. Соответственно, уже не только крупная, но и средняя сетка тоже сложилась вертикально. Ну, а в первом ряду, где используется комбинация сеток, сейчас все контролируется малой сеточной системой Бутстрапа. При этом, в файле setka.html меняется еще и распределение колонок в этом первом ряду, что вовсе не обязательно, но так вполне можно делать для удовлетворения каких-то своих нужд в плане верстки (причем на «раз-два», вообще без проблем).

Продолжаем уменьшать ширину окна браузера до значений. Происходит очередной слом:

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

Этот пример (файлик setka.html) сделан именно. Про то, как там все устроены, мы еще будем подробно говорить. Но пока я хочу обратить ваше внимание лишь на некоторые нюансы, которые вы сможете заметить в исходном коде файла setka.html.

Вверху с помощью добавлены стили для визуального оформления макетов (отступы, цвета сеток и т.п.), которые особой смысловой нагрузки не несут. Если прокрутите исходный код вниз, то заметите такой вот блок:

lg Используется крупная сетка для экранов по ширине больше 1200px. md Используется средняя сетка для экранов меньше 1200, но больше 992px. sm Используется малая сетка для экранов меньше 992, но больше 768px. xs Используется сверхмалая сетка для размеров экрана меньше 768px, которая всегда остается горизонтальной.

Здесь четыре контейнера, для которых назначены разные классы (читайте про ). Они позволяют отображать конкретный контент в зависимости от медиазапросов, соответствующих различным размерам сетки. Как это работает? Все четыре заголовка загружаются в браузер (если посмотреть исходный код), но только один заголовок отображается в зависимости от текущего разрешения экрана или размера окна браузера.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col-lg-4 .col-md-6 .col-sm-6 .col-xs-1

Это мастер-сетка , где скомбинированы все четыре сеточные системы (вы это можете видеть по атрибутам ячеек подобным class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , в которых перечислены префиксы классов всех четырех сеток). Сам ряд, как уже упоминалось выше, задается с помощью помещения всех составляющих его элементов в контейнер с классом class="row" (в нашем примере это контейнер на основе div).

Обратите внимание, что мастер-сетка у нас состоит из трех ячеек (колонок) и если вы сложите все цифры, которые приписаны для каждой из колонок, например, для префиксов сверхмалой сетки Бутстрапа (col-xs), то получите в сумме 12. То же самое будет справедливо и для цифр, стоящих после префиксов всех остальных систем. Оно и понятно, ибо этот фреймворк, как уже говорилось выше, имеет 12 колоночную структуру, т.е. по горизонтали все доступное для макета пространство разделено на двенадцать равных по ширине колонок (невидимых на сайте — они подобны клеточкам в школьных тетрадях).

Ну и с помощью цифр после префиксов классов вы просто задаете пропорции для каждой из ячеек (реальных колонок) своего макета. Т.е. пропорции могут быть например, такими:

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

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

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущим примером скачать файлик sait.html (для этого и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html (и setka.html, с которым мы работали чуть выше).

Если вы посмотрите исходный код файла sait.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации внешнего вида среднестатистической вебстраницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img.zip . Просто распакуйте архив и поместите папку img (проверьте, чтобы внутри нее лежали файлы изображений, а не еще одна папка img) в папку Bootstrap на один уровень с файлом sait.html. Структура получится такая:

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

В исходном Html коде файла sait.html я использовал , чтобы показать границы предполагаемых мною рядов (строк), для которых мы будем настраивать отображение колонок с использование каких-то сеточных систем Бутстрапа. Рядов всего четыре (они пронумерованы на приведенном скриншоте) — хедер (шапка с названием сайта и логотипом), заголовок и описание страницы, содержательная часть (основной контент, состоящий из анонсов четырех статей) и футер.

Теперь нам нужно будет добавить в файл sait.html разметку Бутстрапа, которая. Для создания рядов, как вы помните, достаточно будет заключить все его содержимое в контейнер (чаще всего это теги Div, хотя могут быть и другие) и прописать в нем класс class="row" . Для первого ряда это будет выглядеть так:

сайт

То же самое нужно проделать и для всех остальных рядов (строк) — поставить открывающий тег в начале будущего ряда и тег — в его конце. Показывать весь код файла sait.html с внесенными изменения не буду, ибо он слишком объемный.

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

Итак, в Bootstrap 3 имеет место быть 12-ти колоночная сетка, о которой мы говорили выше. Раз мы задумали сделать четыре колонки с анонсами, то было бы логичным сделать их равными по ширине, а значит каждая из колонок будет шириной в три клетки (ячейки) нашей невидимой сеточной системы (вне зависимости от того, какую по размеру сетку мы выберем — сверхмалую, малую, среднюю или большую).

Какую сетку выбрать для работы? Давайте возьмем для начала среднюю, как компромиссный вариант. В этом случае в контейнеры всех четырех ячеек нужно будет добавить класс «col-md-3» — . Покажу на примере кода одной ячейки, чтобы не загромождать статью:

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

Правда, при уменьшении окна браузера до ширины меньшей точки слома (в случае используемой нами средней сетки это будет 992 пикселя), все анонсы опять выстроятся в столбик, что не есть хорошо, ибо юзабилити в этом случае снижается (разрешение в почти 1000 пикселей позволяет более плотно располагать информацию). Для исправления этой ситуации можно добавить еще одну сетку из арсенала Бутстрапа для тех же самых ячеек с анонсами. Как это сделать? Давайте посмотрим.

Давайте с помощью префиксов «col-xs-6» к названию класса в каждую ячейку с анонсом (в результате получится составной класс class="col-md-3 col-sm-6"). Выглядеть это будет так (на примере одной ячейки):

Текст анонса.

Как видите, мы здесь нарушили недавно озвученное правило, что числа после префиксов одной сетки во всех ячейках в сумме должны давать 12. У нас же получилось 24 (четыре раза по шесть). Но сделали мы это специально, чтобы добиться желаемого результата — получить вместо четырех две колонки при проходе точки срыва для средней сеточной системы Bootstrap (это 992 пиксела). Т.е. ячейки расположатся в двух строках по две штуки в каждой:

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

Если же вы хотите, чтобы четыре колонки при уменьшении ширины экрана превращались в две, а потом уже в одну колонку, то следует использовать вместо «col-xs-6» малую сеточную систему с помощью «col-sm-6» :

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

Давайте еще поэкспериментируем и попробуем, в котором имеется по сути две потенциальные ячейки — название сайта с описанием, а также логотип. Собственно, их и будем позиционировать. Давайте используем на этот раз большую сетку с помощью «col-lg-6» , чтобы получились две равные колонки.

сайт

Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Правда при использовании большой сетки слом происходит на довольно-таки больших разрешениях экрана (окна браузера, в нашем случае, ибо мы там имитируем устройства с различной шириной экрана). После чего ячейки складывают по вертикали. Чтобы этого избежать, мы добавим еще одну сетку Bootstrap 3 для первого ряда . Думаю, что подойдет малая сеточная система (префикс класса col-sm). Тогда код будет выглядеть примерно так:

сайт

Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Однако, я не стал делать для малой сетки ячейки с названием сайта и логотипом одинаковыми, ибо логотип существенно Уже (в смысле, узкий) названия с описанием. При меньшей ширине экрана выделять им равные ячейки было бы не логично. Поэтому я и сделал первую колонку с названием и описанием сайта при активации малой сеточной системы Бутстрапа в два раза больше колонки с логотипом.

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

Наверное, вы заметили, что текст страницы врезается в левый край экрана, что вызывает . Можно добавить для исправления данной ситуации в тег body, что позволит. А можно все решить стандартными средствами Bootstrap 3.

Для этого нужно будет все содержимое вебстраницы (все, что заключено в тегах Body) обернуть в контейнер Div с одноименным классом — . Т.е. ставите этот тег сразу после открывающего тега Body, а закрываете его перед вызовом скриптов, которые расположены непосредственно перед закрывающим тегом Body. После этого текст уже не будет упираться в окно браузера.

Также вы можете видеть, что картинки анонсов наезжают друг на друга при уменьшении ширины экрана. Дело в том, что они пока еще «неотзывчивые», но мы их сделаем таковыми в следующих статьях этой рубрики. А также мы продолжим разбирать работу с сеточной системой Bootstrap 3, научимся оформлять кнопки, таблицы, Html формы, создавать выпадающие меню, навигацию и многое другое. Поэтому не переключайтесь и следите за новыми публикациями.

Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)

А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного).

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

Бутрстрап 3 включает предопределенные классы сетки для быстрого создания макета для различных типов устройств — сотовых телефонов, планшетов, настольных ПК и так далее. Например, вы можете использовать.col-xs- класс для создания сетки колонок для дополнительных небольших устройств, таких как сотовые телефоны. Класс.col-sm- для небольших экранов устройств, таких как карманные компьютеры. Класс.col-MD- для средних устройств, таких как десктопные компьютеры и.col-lg- для больших экранов настольных ПК. В следующей таблице приведены некоторые из ключевых особенностей новой системы сетки.

В приведенной выше таблице показана одна важная вещь — применяя любой.col-sm-класс, на стиль элемента он будет влиять не только на небольших устройствах, таких как таблетки, но и на средних и крупных устройствах, имеющих размер экрана больше или равным 768px, если.col-md- и.col-lg- класса нет. Аналогично.col-md-класс будет влиять не только на стиль элементов на средних устройствах, но и на больших устройствах, если.col-lg- класс не указан.

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

В приведенной выше иллюстрации есть всего 12 колонок контента во всех устройствах, но их размещение меняется в зависимости от размера экрана устройства. В мобильном устройстве макет отображается в виде сетки, которая имеет 1 столбец и 12 строк размещены друг над другом, в то время в таблетке оно отображается как сетка, которая имеет 2 колонки и 6 рядов. Аналогично в устройствах со средним размером экрана, таких как ноутбук и рабочий стол ПК — она предоставляется в виде макета, который имеет 3 столбца и 4 строки. Наконец, в устройствах с большими экранами, макет представляет из себя сетку, которая имеет 4 колонки и 3 ряда.

Теперь возникает вопрос, как мы можем создавать такие адаптивные макеты, используя Twitter Bootstrap. Давайте начнем с средне-размерных устройств — ноутбук или обычный настольный ПК. Наш макет имеет 3 столбца и 4 строки (т.е. 3×4 макет сетки). Вводим следующую разметку:

Если мы посмотрим приведенный выше пример в ноутбуке или настольном ПК, имеющего экран или окно просмотра шириной больше или равной 992px и менее 1200px, мы увидим 4 строки, где каждая строка имеет 3 равные колонки.

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

Поскольку по умолчанию сетка имеет 12 столбцов и в нашем макете сумма каждых трёх столбцов (т.е. col-md-*) равна 12, мы очищаем столбцы после каждого третьего появления. В любом другом случае, где колонки col-md-*различны, мы должны использовать.clearfix после столбца, который делает полную сетку из 12 колонок. Адаптивный служебный класс.visible-md-block делает.clearfix класс действующим только на устройствах среднего размера и она скрытым на других устройствах.

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

Теперь пришло время, чтобы настроить наш макет для других устройств. Настроим его для планшета. Поскольку на таблет-пк наша разметка отображается как 2×6 сетка (т.е. 2 колонки и 6 строк), нам нужно добавить класс.col-sm-6 на каждый столбец.

Теперь, так как сумма каждых двух столбцов, т.е. col-sm-* равна 12, после каждого второго столбца, следующие другие располагаются ниже.

После очистки для небольших устройств наш окончательный код будет выглядеть так:

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

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

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

В версии фреймворка v3.2.0, класс.visible-*-* для каждой точки идёт в трех вариациях, по одному для каждого CSS отображения: inline, block и inline-block.

Совет: Вы можете также смешать эти классы, чтобы сделать элементы видимыми на нескольких устройствах. Например, вы можете применить классы.visible-xs-* и.visible-md-* на любом элементе, чтобы сделать его видимым на дополнительных малых и средних устройствах.

Этот пункт отображается только на дополнительных небольших устройствах.

Этот пункт отображается только на небольших устройствах.

Этот пункт отображается только на средних устройствах.

Этот пункт отображается только на больших устройствах.

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

Совет: Вы можете также смешать эти классы, чтобы сделать элементы, скрытые на нескольких устройствах. Например, вы можете применить классы.hidden-xs и.hidden-md на любом элементе, чтобы сделать его скрытым на дополнительных малых и средних устройствах.

Этот пункт скрыт только на дополнительных небольших устройствах.

Этот пункт скрыт только на небольших устройствах.

Этот пункт скрыт только на средних устройствах.

Этот пункт скрыт только на больших устройствах.

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

01.06.2016

Всем привет!
Продолжаем изучать основы «bootstrap 3» . Пришло время познакомиться в «bootstrap 3» с таким понятием как сетка.
С помощью сетки вы сможете создать свой первый адаптивный каркас сайта (веб-страницы).
Итак, сетка Bootstrap состоит из строк и колонок.

Прежде чем создать колонки, нужно прописать строку. Для этого достаточно прописать тег div с классом «row ».

... здесь будут колонки...

Итак, вначале пишется строка, а в строке уже строятся колонки.

1. Создаем строку:

... здесь будут колонки... ... здесь будут колонки...

2. Создаем колонки (сетку):

Сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
При необходимости колонки можно объединить и разместить в нужной позиции.

Чтобы создать колонки, нужно прописать внутри «row » класс
«col-(*1 )-(*2 ) ».
Там, где (*1 ) указываем, для каких групп устройств нужно выполнить (см. таблицу 1 ).
Там, где (*2 ) указываем число (количество колонок)
(см. таблицу 2 ).

(табл. 1 ) Таблица разметки Bootstrap для различных групп устройств

Давайте рассмотрим до этого момента на примере.
Смотря на таблицу, мы можем создать колонки (построить сетку) для различных групп устройств (мобильных телефонов, планшетов, ПК и т.д.).

Например:

блог сайт

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

Теперь разберемся, что такое (*2 ). Так как я уже говорил об этом выше, это число, обозначающее количество колонок
(см. таблицу 2 ).

(табл. 2 ) Схема сетка Bootstrap3

На таблице можно увидеть, что сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
Чтобы указать 12 одинаковых колонок для всех устройств, нужно вместо (*2 ) указать цифру, которая подходит. Но помните, что общая сумма должна получиться 12.

Смотрим пример:

блог сайт Таблица разметки Bootstrap

Чтобы вы поняли мной сказанные слова о том, что общая сумма должна быть равна 12, сделаем арифметический подсчет.
Смотрим на строки №2 и №3.

○ col-lg-12 и col-lg-12 . (размер экрана ≥1200px ).

Результат:

○ col-md-8 и col-md-4 . (размер экрана ≥992px ).
На экране будет две колонки, так как 8 + 4 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 8 колонок, а правая 4.

Результат:

○ col-sm-6 и col-sm-6 (размер экрана ≥768px ).
На экране будет две колонки, так как 6 + 6 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 6 колонок и правая 6.

Результат:

○ col-xs-12 и col-xs-12 (размер экрана .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, .col-xs-12 { border:1px solid #ccc; height:60px; } Блок 1 Блок 2 Блок 3 Блок 4 Меню Контент

Можете посмотреть результат, а заодно проверить с телефона, планшета или ПК, как будет открываться созданный макет.

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

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

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

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

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

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

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

= 768px и = 992px и ... При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие . Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера. Следующий строительный элемент – это ряд (блок div с классом row). Ряд - это специальный блок, который применяется только для оборачивания других строительных элементов (адаптивных блоков). Его основное назначение - это нейтрализация положительного внутреннего отступа (15px слева и справа) обёрточного контейнера или адаптивного блока . Пример формирования внутренних отступов: Container (+15px) -> row (-15px) -> col (+15px) -> контент container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент *col - это адаптивный блок Пример показывает, что независимо от того в каком адаптивном блоке находится контент , он всегда будет иметь правильный отступ от края (т.е. 15px слева и справа). Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div с классом col-?-?). Адаптивные блоки - это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-? . Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Ширина адаптивному блоку задаётся в связке с типом устройства . Это означает, что адаптивный блок на разных устройствах может иметь разную ширину. Именно из-за этого данный блок и называется адаптивным . Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака? в классе col-?-? . Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок. Например, число 1 - устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 - ширину, равную 100% (12/12) от ширины родительского блока. Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 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 и выше горизонтально: ... ... ... Например, расчитаем, доступную ширину под контент для первого и второго блока: 1 блок... 2 блок... Контрольные точки Доступная ширина 1 блока Доступная ширина 2 блока 320px - 749.98px от 290px (320px - padding (30px)) до 719.98px (749.98px - padding (30px)) 750px - 969.98px 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 блока. Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg): 1 блок... 2 блок... 3 блок... Основной принцип создания макета Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина - это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок - это всегда 50% (6/12*100%) от ширины родительского элемента. Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный: 1 блок... 2 блок... 3 блок... 4 блок... Создадим макет 3 блока (3 x 2): 1 блок... 2 блок... 3-1 блок... 3-2 блок... 3-3 блок... 3-4 блок... 3-5 блок... 3-6 блок... 4 блок... Нетрудно заметить, что разметка вложенного адаптивного блока выполняется также как и основного. Это означает, что не имеет разницы, какой уровень вложенности имеет блок, создание его макета выполняется по тем же правилам. Классы для адаптивного смещения блоков В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый? необходимо заменить на тип устройства (xs , sm , md или lg). Второй? на количество колонок. Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо): 1 блок... Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки. Отзывчивые служебные классы Bootstrap 3 Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства. Кроме указания устройства (xs , sm , md , lg), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline , block и inline-block . Класс Описание visible-xs-? Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport =768px и =992px и =1200px). На других устройствах эти элементы не отображаются. Вместо знака? необходимо указать block , inline или inline-block . Т.е. указать, как данный элемент должен отображаться. Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и Главная Windows 7 Что такое сетка бутстрап? Блочная система · Bootstrap на русском Google AdWords - создание групп Похожие публикации Почему письма попадают в спам — советы специалиста по email-маркетингу «Фотостраны Адреса участвующие в обнаружении спам рассылок Тарифный план «Интуиция» от Билайн или очередной провал проекта операторского телефона Samsung интуитивный замысел Тариф "Все просто" ("Мегафон"): отзывы и описание Как подключить тариф «Все просто» от Мегафон Как сделать брошюру в Ворде в книжном формате, буклет?