Bootstrap подвесная система
В этом разделе описывается система сетки Bootstrap (Grid System).
Bootstrap обеспечивает отзывчивое, мобильную предпочитаемые подвесную систему потока, с увеличением экрана или окна просмотра (окно просмотра) размера, система автоматически будет разделена на максимум 12 лет.
Что представляет собой сетку (Grid)?
Материал из Википедии:
В графическом дизайне, сетка представляет собой серию прямых линий используется для организации содержимого пересекающимися (вертикальные, горизонтальные) структуры, состоящей из (обычно двумерную). Он широко используется в конструкции печати макет дизайна и структуры контента. В веб-дизайне, он используется для быстрого создания последовательной и эффективной компоновки с использованием HTML и CSS подход.
Проще говоря, дизайн сетки для организации веб-контента так, чтобы сайт легко ориентироваться, а также уменьшить нагрузку клиента.
Что такое система сетки Bootstrap (подвесная система)?
Bootstrap официальную документацию по системе сетки Описание:
Bootstrap включает в себя адаптивный, приоритет на мобильное устройство, система не фиксированной сетки, с увеличением размера устройства или окна просмотра соответствующим образом продлен до 12 лет. Она включает в себя предопределенные классы для простых вариантов компоновки, также включает в себя мощный для генерации более семантических Раскладка смешанные классы.
Давайте поймем, как приведенное выше утверждение. Bootstrap 3 является одним из приоритетных для мобильных устройств, в этом смысле, Bootstrap код для небольших устройств экрана (например, мобильный, таблетки), а затем распространяется на большой экран устройств (таких как ноутбуки, настольные компьютеры) на компонентах и сетки.
Мобильная первая стратегия
- содержание
- Решите, что является наиболее важным.
- раскладка
- Приоритет предназначен меньшую ширину.
- CSS на основе мобильных устройств является одним из приоритетов, запросы средств массовой информации направлены на планшетные компьютеры, настольные компьютеры.
- Progressive Enhancement
- С увеличением размера экрана и добавлять элементы.
Отзывчивый подвесная система с увеличением экрана или окна просмотра (окно просмотра) размера, система автоматически будет разделена на максимум 12 лет.
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
Bootstrap система сетки (Grid System) работы
Система сетки через ряд строк и столбцов с содержанием, чтобы создать макет страницы. Ниже перечислены система сетки Bootstrap как это работает:
- Строка должна быть помещена в.container классе, чтобы получить правильное выравнивание (выравнивание) и заполнение (заполнение).
- Использование линий, чтобы создать горизонтальный набор столбцов.
- Контент должен быть помещен в колонку, а столбец может быть только строки прямым потомком.
- Предварительно определенные классы сетки, такие.row и .col-хз-4,могут быть использованы для быстрого создания макета сетки. МЕНЬШЕ смешанный класс можно использовать более семантические макетов.
- Колонка для создания зазора между содержимым колонки, пропиткой (кожухами). Обивка находится снаружи.rows через на (маржи) отрицания, а последняя строка, первый столбец обозначает смещение.
- Система сетки можно, указав двенадцать столбцов, которые вы хотите создать крест. Например, чтобы создать три равные колонки, используют три.col-XS-4.
Медиа-запросы
Медиа-запросы очень шикарный "условные правила CSS." Это относится только к некоторым на основе некоторых предопределенных критериев CSS. Если эти условия выполнены, а затем применить соответствующий стиль.
Bootstrap медиазапросы позволяют перемещаться на основе размера окна просмотра шоу и содержания скрыть. Следующие запросы средств массовой информации с использованием меньшего количества файлов, используемых для создания начальной загрузки системы сетки пороговой точки критической демаркации.
/ * Сверхмалых устройств (мобильные телефоны, менее 768px) * / / * По умолчанию Bootstrap нет медиа-запросов * / / * Маленькие устройства (таблетка, 768px и выше) * / @media (мин-ширина: @ экран-см-мин) {...} / * Средние устройства (настольные, 992px года) * / @media (мин-ширина: @ экран-й мкр-мин) {...} / * Большое оборудование (большой настольный компьютер, 1200px и выше) * / @media (мин-ширина: @ экран-Lg-мин) {...}
Мы иногда содержат неболее ширины медиа - запрос в коде, который будет влиять на CSS заключены в меньшем диапазоне размеров экрана.
@media (макс-ширина: @ Ширмы-хз-Max) {...} @media (мин-ширина: @ экрана см-мин) и (макс-ширина: @ экрана-SM-макс) {...} @media (мин-ширина: @ экран-й мкр-мин) и (макс-ширина: @ экрана MD-макс) {...} @media (мин-ширина: @ экран-Lg-мин) {...}
Медиа-запрос состоит из двух частей, первую спецификацию устройства, а затем правило размера. В приведенном выше случае, установите следующие правила:
Давайте посмотрим на эту строку кода:
@media (мин-ширина: @ экрана см-мин) и (макс-ширина: @ экрана-SM-макс) {...}
Для всех смин-ширина: @ экрана см-минустройств, если ширина экрана меньше , чем@ экран-SM-макс,он будет делать некоторую обработку.
параметры сетки
В следующей таблице приведены как подвесная система Bootstrap между несколькими устройствами работают:
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列?数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
Базовая структура сетки
Вот основная структура сетки Bootstrap:
<Div класс = "контейнер"> <Div класс = "строка"> <Div класс = "Col - * - *"> </ DIV> <Div класс = "Col - * - *"> </ DIV> </ Div> <Div класс = "строка"> ... </ DIV> </ Div> <Div класс = "контейнер"> ....
Пусть несколько простых примеров мы рассмотрим сетки:
- Пример: уровень стека
- Пример: среднего и крупного оборудования
- Примеры: мобильные телефоны, планшетные компьютеры, настольные компьютеры
Сброс Отзывчивый колонны
Следующий пример включает в себя четыре сетки, но мы не можем определить положение сетки отображается в просмотре небольшого устройства.
Чтобы решить эту проблему, вы можете использовать использовать.clearfix класс и отзывчивым утилита для решения, как показано в следующих примерах:
примеров
Попробуйте »
Браузер изменить размер окна, чтобы увидеть изменения, или для просмотра эффекта на телефоне.
смещение столбца
Смещение является полезной функцией для более профессионального макета. Они могут быть использованы, чтобы сделать больше места для столбца.Например, .col-XS = * класс не поддерживает смещениями, но они могут быть просто с помощью пустой ячейки для достижения эффекта.
Для того , чтобы использовать смещение на большом экране дисплея, используйте.col-MD-offset- * категория.Оставшись вне этих классов будет столбец из (маржа) увеличилась* столбец, где *диапазон составляет от1-11.
В следующем примере, мы имеем <DIV класс = "Col-мкр -6"> .. </ DIV>, мы будем использовать.col- й мкр-смещение-3 классадо центра этого DIV.
примеров
Попробуйте »
Результаты следующие:
Уплотненный Колонка
Значение по умолчанию для вложенных сеток в содержании, добавить новый.row, и в рамках существующего столбца .col-MD- *Добавить группу.col-MD- *столбцы. Вложенные строка должна содержать набор столбцов, которые устанавливают количество столбцов не может быть больше, чем 12 (на самом деле, не существует требование, что вы должны заполнить 12).
В следующем примере, макет имеет два столбца, второй столбец разделен на два ряда из четырех боксов.
примеров
Попробуйте »
Результаты следующие:
Колонка сортировки
Bootstrap система сетки к другой совершенной особенностью является то, что вы можете легко написать колонку в порядке, то порядок отображается в другом столбце.
Вы можете легко изменить порядок с.col- й мкр-кнопочныхпостроены колоннами сетки*и.col-MD-потягиванием *класса, где*диапазон составляет от1-11.
В следующем примере, у нас есть макет с двумя колонками, левая колонка очень узкая, как боковой панели. Мы будем использовать.col- й мкр-толкающего *и.col-ймкр-Pull- класс*поменять порядок двух столбцов.
примеров
Попробуйте »
Результаты следующие: