В этой статье мы обсудим систему Bootstrap Grid.

Что такое сетка?

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

Проще говоря, сетки в веб-дизайне организуют и структурируют контент, упрощают сканирование веб-сайтов и уменьшают когнитивную нагрузку на пользователей.

Что такое система загрузочной сетки?

Как указано официальной документацией Bootstrap для сетчатой системы -

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

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

Мобильная стратегия

  • Содержание
    • Определите, что является самым важным.
  • Макет
    • Сначала создайте меньшую ширину.
    • Сначала базовое мобильное устройство с адресом CSS; медиа-запросы для планшетов, настольных компьютеров.
  • Прогрессивное улучшение
    • Добавьте элементы по мере увеличения размера экрана.

Работа системы сетки Bootstrap

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

  • Строки должны быть помещены в класс .container для правильного выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Для быстрого создания раскладки сетки доступны предопределенные классы сетки, такие как .row и .col-xs-4. LESS mixins также могут использоваться для более семантических раскладок.
  • Столбцы создают водосточные желоба (промежутки между содержимым столбца) через прокладку. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на .rows.
  • Столбцы сетки создаются с указанием количества двенадцати доступных столбцов вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4.

Запросы мультимедиа

Медиа-запрос - действительно причудливый термин для «условного правила CSS». Он просто применяет некоторые CSS, основанные на определенных условиях. Если эти условия выполнены, применяется стиль.

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
 
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
 
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
 
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Иногда они расширяются до максимальной ширины для ограничения CSS для более узкого набора устройств.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Запросы для СМИ имеют две части: спецификацию устройства, а затем правило размера. В приведенном выше случае устанавливается следующее правило:

Рассмотрим эту линию -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Для всех устройств, независимо от типа с минимальной шириной: @screen-sm-min, если ширина экрана становится меньше, чем @screen-sm-max, тогда сделайте что-нибудь.

Параметры сетки

В следующей таблице приведены аспекты того, как grid-система Bootstrap работает на нескольких устройствах -

Экстренные мелкие устройства Телефоны (меньше 768px) Маленькие устройства Планшеты (больше или равно 768px) Средние устройства Настольные компьютеры (больше или равно 992px) Крупные устройства Настольные компьютеры (больше или равно 1200px)
Поведение сеткиГоризонтально во все временаСвернуто, чтобы начать, горизонтально выше точек остановаСвернуто, чтобы начать, горизонтально выше точек остановаСвернуто, чтобы начать, горизонтально выше точек останова
Максимальная ширина контейнераНет (авто)750px970px1170px
Префикс класса.col-xs-.col-sm-.col-md-.col-lg-
Количество столбцов12121212
Максимальная ширина столбцаАвто60px78px95px
Ширина желоба30px (15 пикселей на каждой стороне столбца)30px (15 пикселей на каждой стороне столбца)30px (15 пикселей на каждой стороне столбца)30px (15 пикселей на каждой стороне столбца)
Вкладываемыедададада
Смещениядададада
Колонка заказадададада

Основная структура сетки

Ниже приведена базовая структура сетки Bootstrap -

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

Рассмотрим некоторые простые примеры сетки -

  • Пример - Сложенные в горизонтальные
  • Пример - Среднее и крупное устройство
  • Пример: мобильные, планшеты, настольные компьютеры

Отзывчивый столбец сбрасывается

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

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>
 
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

Это приведет к следующему результату - Посмотреть

Измените размер окна просмотра или проверьте его на телефоне для получения желаемого результата в этом примере.

Офсетные столбцы

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

Чтобы использовать смещения на больших дисплеях, используйте классы .col-md-offset-*. Эти классы увеличивают левое поле столбца на * столбцы, где * варьируются от 1 до 11 .

В следующем примере мы имеем div class = "col-md-6". Мы центрируем это, используя класс .col-md-offset-3.

<div class = "container">
 
   <h1>Hello, world!</h1>
 
   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
 
   </div>
            
</div>

Это приведет к следующему результату - Посмотреть

Вложенные столбцы

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

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

<div class = "container">
   <h1>Hello, world!</h1>
 
   <div class = "row">
 
      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
 
      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
                                                 
         </div>
 
         <div class = "row">
                                     
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
                                                 
         </div>
 
      </div>
 
   </div>
            
</div>

Это приведет к следующему результату - Посмотреть

Заказ столбцов

Еще одна приятная особенность системы сетки Bootstrap заключается в том, что вы можете легко писать столбцы в порядке и показывать их в другом. Вы можете легко изменить порядок встроенных столбцов сетки с классами .col-md-push-* и .col-md-pull-* , где * варьируется от 1 до 11 .

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

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
            
   

   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
                        
   </div>
</div>

Это приведет к следующему результату - Посмотреть




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok