Bootstrap - Grid System - CoderLessons.com

В этой главе мы обсудим систему сетки Bootstrap.

Что такое Сетка?

Как сказано в википедии —

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

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

Что такое Bootstrap Grid System?

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

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

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

Мобильная Первая Стратегия

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

содержание

раскладка

Прогрессивное улучшение

Работа Bootstrap Grid System

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

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

Строки должны быть помещены в класс .container для правильного выравнивания и заполнения.

Используйте строки для создания горизонтальных групп столбцов.

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

Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. Меньшие миксины также можно использовать для более семантических макетов.

Столбцы создают желоба (промежутки между содержимым столбцов) посредством заполнения. Этот отступ смещается в строках для первого и последнего столбца через отрицательное поле на .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) { ... }

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

Варианты сетки

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

	Очень маленькие устройства Телефоны (<768 пикселей)	Планшеты для небольших устройств (≥768px)	Средние устройства Рабочие столы (≥992px)	Большие устройства для настольных ПК (≥1200px)
Поведение сетки	Горизонтально во все времена	Свернуто, чтобы начать, горизонтально над контрольными точками	Свернуто, чтобы начать, горизонтально над контрольными точками	Свернуто, чтобы начать, горизонтально над контрольными точками
Максимальная ширина контейнера	Нет (авто)	750px	970px	1170px
Префикс класса	.col-xs-	.col-SM-	.col-MD-	.col-LG-
Количество столбцов	12	12	12	12
Максимальная ширина столбца	Авто	60px	78px	95px
Ширина желоба	30px (15 пикселей на каждой стороне столбца)	30px (15 пикселей на каждой стороне столбца)	30px (15 пикселей на каждой стороне столбца)	30px (15 пикселей на каждой стороне столбца)
Вкладываемые	да	да	да	да
Смещения	да	да	да	да
Колонка заказа	да	да	да	да

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-xs = * не поддерживают смещения, но они легко реплицируются с помощью пустой ячейки.

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

В следующем примере у нас есть <div class = «col-md-6»> .. </ div>. Мы отцентрируем это, используя класс .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>
	
   <br>
   
   <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>

Это даст следующий результат —

Bootstrap — Grid System

Что такое Сетка?

Что такое Bootstrap Grid System?

Мобильная Первая Стратегия

Работа Bootstrap Grid System

Медиа-запросы

Варианты сетки

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

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

Смещенные столбцы

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

Заказ колонки

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности