Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

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)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列?数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

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

Вот основная структура сетки Bootstrap:

<Div класс = "контейнер">
   <Div класс = "строка">
      <Div класс = "Col - * - *"> </ DIV>
      <Div класс = "Col - * - *"> </ DIV>      
   </ Div>
   <Div класс = "строка"> ... </ DIV>
</ Div>
<Div класс = "контейнер"> ....

Пусть несколько простых примеров мы рассмотрим сетки:

Сброс Отзывчивый колонны

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

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

примеров

<Div класс = "контейнер"> <Div класс = "строка" > <Div класс = "Col-хз-6 Col-СМ-3" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит. </ P> </ Div> <Div класс = "Col-хз-6 Col-СМ-3" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ut enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat. </ P> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит, СЭД сделать eiusmod Tempor incididunt ут. </ P> </ Div> <Div класс = "clearfix видимого хз" > </ div> <Div класс = "Col-хз-6 Col-СМ-3" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Ut enim объявления миним veniam , Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat. </ P> </ Div> <Div класс = "Col-хз-6 Col-СМ-3" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ut enim объявление миним </ p> </ Div> </ Div> </ Div>

Попробуйте »

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

смещение столбца

Смещение является полезной функцией для более профессионального макета. Они могут быть использованы, чтобы сделать больше места для столбца.Например, .col-XS = * класс не поддерживает смещениями, но они могут быть просто с помощью пустой ячейки для достижения эффекта.

Для того , чтобы использовать смещение на большом экране дисплея, используйте.col-MD-offset- * категория.Оставшись вне этих классов будет столбец из (маржа) увеличилась* столбец, где *диапазон составляет от1-11.

В следующем примере, мы имеем <DIV класс = "Col-мкр -6"> .. </ DIV>, мы будем использовать.col- й мкр-смещение-3 классадо центра этого DIV.

примеров

<Div класс = "контейнер"> <H1> Привет, мир! < / H1> <Div класс = "строка" > <Div класс = "Col-хз-6 Col- й мкр-офсет-3" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит. </ P> </ Div> </ Div> </ Div>

Попробуйте »

Результаты следующие:

Смещение системы сетки колонки

Уплотненный Колонка

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

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

примеров

<Div класс = "контейнер"> <H1> Привет, мир! < / H1> <Div класс = "строка"> <Div класс = "Col- й мкр-3 " стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <H4> Первая колонка </ h4> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит. </ P> </ Div> <Div класс = "Col- й мкр-9 " стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <H4> Вторая колонка - делится на четыре коробки </ h4> <Div класс = "строка"> <Div класс = "Col- й мкр-6 " стиль = "цвет фона: # B18904, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Consectetur искусство партии Tonx кульпа семиотики. Assumenda миним Pinterest органические Quis. </ P> </ Div> <Div класс = "Col- й мкр-6 " стиль = "цвет фона: # B18904, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ut enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat. </ P> </ Div> </ Div> <Div класс = "строка"> <Div класс = "Col- й мкр-6 " стиль = "цвет фона: # B18904, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat. </ P> </ Div> <Div класс = "Col- й мкр-6 " стиль = "цвет фона: # B18904, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> <P> Lorem Ipsum Dolor сидеть Амет , consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ut enim объявления миним. </ P> </ Div> </ Div> </ Div> </ Div> </ Div>

Попробуйте »

Результаты следующие:

подвесная система вложенности колонка

Колонка сортировки

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

Вы можете легко изменить порядок с.col- й мкр-кнопочныхпостроены колоннами сетки*и.col-MD-потягиванием *класса, где*диапазон составляет от1-11.

В следующем примере, у нас есть макет с двумя колонками, левая колонка очень узкая, как боковой панели. Мы будем использовать.col- й мкр-толкающего *и.col-ймкр-Pull- класс*поменять порядок двух столбцов.

примеров

<Div класс = "контейнер"> <H1> Привет, мир! < / H1> <Div класс = "строка"> <P> до сортировки </ p> <Div класс = "Col- й мкр-4 " стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> Я оставил </ DIV> <Div класс = "Col- й мкр-8 " стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> Я на праве </ DIV> </ Div> <Br> <Div класс = "строка"> <P> сортируется </ p> <Div класс = "Col- й мкр-4 Col- й мкр-Push-8" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> Я оставил </ DIV> <Div класс = "Col- й мкр-8 Col- й мкр-вытяжная-4" стиль = "цвет фона: # dedef8, коробка-тень: 1px врезке -1px 1px # 444, вставка -1px 1px 1px # 444;"> Я на праве </ DIV> </ Div> </ Div>

Попробуйте »

Результаты следующие:

Сортировать система колонки сетки