Знакомство с Bootstrap 4 сеткой

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

Bootstrap сетка имеет возможность разделить строку (row) на 12 колонок (col-). Ширина каждой колонки изменяется в зависимости от размера экрана.

Bootstrap позволяет пользователям создавать неограниченное количество строк в зависимости от конструкции сайта. В Bootstrap 4, вместо пикселей, используются единицы измерения rem и em. Некоторые классы остались не именными с прошлых версий, а также появился новый уровень -sm для мобильных устройств.

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

Что нам понадобится:

  • min.css (добавим из CDN)
  • Базовые знания HTML и CSS
  • Время и терпение

Создание базовой сетки

Для начала создадим основной макет сетки, используя Bootstrap 4 систему сеток. Во-первых, создаем новый файл index.html со следующим содержанием:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Basic Grid System</title>
 <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <!-- Разметка страницы здесь -->
 </body>
</html> 

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

  • container - Фиксированный контейнер, имеет строго определённую ширину для определённого типа устройств. Т.е. для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины.
  • container-fluid - Жидкий "текучий" контейнер, имеет ширину, равную ширине рабочей области окна браузера. Т.е. ширина жидкого "текучего" контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области окна браузера.

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

<div class="container">
</div>

Далее, создаем строку (row) внутри контейнера, после этого мы сможем добавлять в неё колонки. Вы можете создать несколько строк внутри одного контейнера.

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

<div class="container">
<div class="row">
     </div>
</div>

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

  • col-xl - очень большой экран (extra large desktop)
  • col-lg - большой экран (extra large display)
  • col-md - средний экран (medium display)
  • col-sm - маленький экран (smaller display)
  • col-xs - очень маленький экран (extra small display)

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

К примеру, мы хотим добавить одну колонку во всю ширину строки, для этого установим второй префикс класса - 12, так как сумма всех колонок должна быть 12. Если бы мы хотели добавить две колонки, соответственно для каждого класса добавили префикс 6, для трех колонок - префикс 4 и т.д.

Таким образом, для очень маленьких экранов мы можем установить класс col-xs-12.

Давайте создадим три равных по ширине колонки, для этого используем класс col-xs-4:

Я также добавил свои классы col-1, col-2, col-3 для стилизации колонок.

<div class="container">
<div class="row">
<div class="col-sm-4 col-1">
<h4>Column 1</h4>
     </div>
<div class="col-sm-4 col-2">
<h4>Column 2</h4>
    </div>
<div class="col-sm-4 col-3">
<h4>Column 3</h4>
    </div>
 </div>
</div>

Для того чтобы визуально разделить колонки, установим различный цвет фона:

<style>
.col-1{
 background: #3498db;
}
 
.col-2{
 background: #2ecc71;
}
 
.col-3{
 background: #e74c3c;
}
</style>

Результат:

В коде выше мы установили класс col-sm-4, это означает что на маленьких экранах, на одной линии будут находиться 3 колонки.

Теперь определим работу сразу на нескольких экранах.

Bootstrap автоматически подгоняет колонки под указанные размеры экрана.

<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-12 col-1">
<h4>Column 1</h4>
     </div>
<div class="col-sm-4 col-lg-12 col-2">
<h4>Column 2</h4>
    </div>
<div class="col-sm-4 col-lg-12 col-3">
<h4>Column 3</h4>
    </div>
 </div>
</div>

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

Настройка сетки для разных экранов

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

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

Компьютер, 4 колонки

Планшет, 2 колонки

Смартфон, 1 колонка

Начнем с создания нового HTML файла с именем gridview.html и следующей разметкой:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Setting up grids for different screens</title>
 <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
 <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 
<style>
/*Your styles goes here*/
</style>
 
 </head>
 <body>
 <!-- Content goes here -->
 </body>
</html>

Не беспокойтесь, это почти такая же разметка что и в первом примере.

Настройка Bootstrap 4 Сетки для компьютеров

Экраны компьютеров обычно больше 1080px, поэтому для колонок мы будем использовать класс с префиксом col-md-*.

Также можно использовать префиксы col-lg-* и col-xl-*.

Давайте создадим два div с классами container и row. В строке создадим восемь колонок с классами col-md-3 класса. Внутри каждой колонки, мы добавим заголовок h3, текст и ссылки. Для основного заголовка зададим класс col-md-12, чтобы он был во всю ширину экрана.

<div class="container">
<div class="row">
<header class="col-md-12 text-center">
<h1>Bootstrap's 4 Grid System</h1>
<h2>How flexible it is?</h2>
        </header>
<div class="col-md-3">
<h3>Cool Title 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 3</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 4</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 5</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 6</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 7</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3">
<h3>Cool Title 8</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
    </div>
</div>

И немного стилизуем наши элементы:

body{
    font-family: 'Lato', sans-serif;
    background: #f7f7f4;
}
 
.text-center{
    text-align: center;
    margin: 1.25rem 0;
    border-bottom: 1px solid #dadada;
    padding: 1.25rem 0;
}
 
.col-md-3{
    margin: 1.25rem 0;
}
 
@media screen and (max-width: 34em) {
  .col-sm-6{
    margin-left: 1.25rem;
}
 
}

Настройка Bootstrap 4 Сетки для планшетов

Продолжаем работать с кодом выше. В альбомном виде, планшеты будут использовать класс col-md-*, но для портретного отображения, мы добавим класс col-sm-*.

Для портретного отображения, разместим по 2 колонки при помощи класса col-sm-6:

<div class="container">
<div class="row">
<div class="row">
<header class="col-md-12 text-center">
<h1>Bootstrap's 4 Grid System</h1>
<h2>How flexible it is?</h2>
        </header>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 3</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 4</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 5</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 6</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 7</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6">
<h3>Cool Title 8</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
    </div>
</div>

Настройка Bootstrap 4 Сетки для смартфонов

То же самое и для мобильных устройств, будем отображать по одной колонке, используя класс col-xc-12

<div class="container">
<div class="row">
<div class="row">
<header class="col-md-12 text-center">
<h1>Bootstrap's 4 Grid System</h1>
<h2>How flexible it is?</h2>
        </header>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 3</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 4</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 5</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 6</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 7</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
<div class="col-md-3 col-sm-6 col-xs-12">
<h3>Cool Title 8</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium..
             <a class="btn btn-primary-outline" href="#" role="button">Read More →</a>
        </div>
    </div>
</div>

Отключение колонок

Отключить колонку сохраняя за ней место можно с помощью класса .offset*. Каждый такой класс увеличивает левый margin от колонки имитируя отключение или отсутствие колонки.

Доступные классы для отключения:

  • col-xs-offset-*
  • col-sm-offset-*
  • col-md-offset-*
  • col-lg-offset-*

Для примера создадим 3 колонки, между второй и третей сделаем пропуск размером col-sm-offset-4:

<div class="container">
<div class="row">
<div class="col-sm-2 col-1">
<h4>Column 1</h4>
     </div>
<div class="col-sm-2 col-2">
<h4>Column 2</h4>
    </div>
<div class="col-sm-2 col-sm-offset-4 col-3">
<h4>Column 3</h4>
    </div>
 </div>
</div>

Результат:

Вложенные колонки

Со статическими колонками (не плавающими) в Bootstrap легко можно создать вложенные колонки. Для вложения одной группы колон в другую колонку просто добавьте новую .row (строку) и включите в неё необходимое количество колонок.

<div class="container">
<div class="row">
<div class="col-lg-6 col-1">
<h3>Column 1</h3>
<div class="row">
<div class="col-sm-4 col-3">
<h3>Column 4</h3>
             </div>
<div class="col-sm-4 col-4">
<h3>Column 5</h3>
            </div>
<div class="col-sm-4 col-5">
<h3>Column 6</h3>
            </div>
         </div>
         </div>
<div class="col-lg-6 col-2">
<h3>Column 2</h3>
         </div>
     </div>
</div>

Внутри первой колонки, мы создали еще одну строку, в которой разместили 3 колонки.

Изменение порядка колонок

С Bootstrap можно изменить порядок колонок, благодаря префиксам -pull-* и -push-* (передвинуть колонку влево или вправо). Это позволяет изменить расположение элементов, на различных экранах.

Доступные классы:

  • col-xs-pull-* и col-xs-push-* для очень маленьких экранов
  • col-sm-pull-* и col-sm-push-* для маленьких экранов
  • col-md-pull-* и col-md-push-* для средних экранов
  • col-lg-pull-* и col-lg-push-* для больших экранов

Для примера создадим двухколоночную сетку:

<div class="container">
<div class="row">
<div class="col-md-4 col-1">
<h3>COLUMN-1</h3>
    </div>
<div class="col-md-8 col-2">
<h3>COLUMN-2</h3>
    </div>
</div>
</div>

И поменяем колонки местами, используя вышеуказанные классы:

<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 col-1">
<h3>COLUMN-1</h3>
        </div>
<div class="col-md-8 col-md-pull-4 col-2">
<h3>COLUMN-2</h3>
        </div>
    </div>
</div>

Заключение

Стандартная система сеток в Bootstrap 4 использует 12 колонок, которые помогут вам в создании макета сайта в зависимости от дизайна. Современные веб-сайты используют Bootstrap для создания красивого, адаптивного дизайна.

В следующей статье по Bootstrap 4, мы рассмотрим инструменты пользовательского интерфейса.

Перевод статьи Understanding the Bootstrap 4 Grid System

Тэги: Frameworkbootstrapgrid

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.