Bootstrap сетка. Верстаем сайты адаптивно.

Bootstrap сетка. Верстаем сайты адаптивно.

Bootstrap - это многокомпонентный css фреймворк, позволяющий создавать адаптивные веб-сайты. Основная составляющая фреймворка - bootstrap сетка, и именно ее в чистом виде мы и будем использовать далее.

Вы можете скачать bootstrap в полной комплектации перейдя по ссылке.

В нашем же случае нам понадобиться только часть и основа фреймворка, а именно bootstrap grid.

Для этого необходимо перейти по этой ссылке в раздел customize.

РАЗДЕЛ CUSTOMIZE and DOWNLOAD
Именно здесь вы можете собрать/кастомизировать фреймворк

Снимаем со всех чекбоксов галочки, кроме Grid System.

Bootstrap сетка. Верстаем сайты адаптивно.

Grid System - это и есть bootstrap сетка т.е модуль который включен в bootstrap.css и ничего лишнего!

Переходим в самый низ страницы на раздел Download, собираем и скачиваем bootstrap.css для дальнейшего его подключения. В скаченном архиве вы найдете два основных css файла: bootstrap.css - в основном используется при разработке, чтобы в дальнейшем вы могли изменить оригинальный css под ваши нужды.

bootstrap.min.css - минифицированная версия. Предназначена для ускоренной подгрузке css на стадии production.

Поскольку изменять bootstrap grid по большому счету нам не требуется, то я буду использовать минифицированную версию bootstrap.min.css.

Подключаем css в основную разметку страницы:

<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
...
</body>
</html>

Отлично! Мы успешно подключили bootstrap grid к нашему сайту. Осталось разобраться как она работает.

Ни для кого не секрет, что css файл состоит в основном из классов и прочих селекторов в которых
описано поведение для элементов, которые ссылаются на конкретный класс.

Давайте добавим в нашу разметку следующую конструкцию:

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

Как вы видите я создал два блочных тэга

которым присвоил bootstrap классы container и row.

Класс container является родителем для дочерних элементов и имеет максимальную ширину равную 970px, а класс row используется для корректного распределения дочерних блоков.

Bootstrap содержит два класса для контентной области. Container - класс с максимальной шириной в 970px. Container-fluid - класс с неограниченной шириной.

Добавим в разметку еще пару блоков с классами col-xs.. col-sm.. col-md.. col-lg.. в разные контейнеры и зададим им стили.

<div class="container">
    <div class="row">
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>1</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>2</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>3</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>4</h1></div>
    </div>
</div>

<br>

<div class="container-fluid">
    <div class="row">
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>1</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>2</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>3</h1></div>
        <div style="border: 1px #333 dashed" class="col-xs-12 col-sm-6 col-md-3 col-lg-12"><h1>4</h1></div>
    </div>
</div>

Отлично! Теперь все содержимое страницы будет корректно отображаться на различных устройствах.

Для простоты объяснения представьте, что цифры в классах col-... обозначают ширину блока на конкретном пиксельном диапазоне.

Класс col-xs-12 - обозначает, что данный блок на разрешении менее 768px превратиться в 100% ширину. Данный класс отвечает за очень маленькие устройства.

Класс col-sm-6 - обозначает, что данный блок в диапазоне от 768px до 992px будет разделен на половину области контейнера. Следовательно следующий блок col-sm-6 в сумме с первым дадут результат 12. Если любой следующий блок превышает в сумме 12 колонок вместе с предыдущими блоками, то он автоматически располагается в следующем ряду. Данный класс отвечает за маленькие устройства.

Класс col-md-3 - обозначает, что данный блок в диапазоне от 992px до 1200px будет разделен на три колонки. Следовательно если с суммировать все впереди идущие колонки то в результате мы получим 12. Это означает, что на диапазоне от 992px до 1200px мы увидим 4 колонки в 1 ряд. Данный класс отвечает за средние устройства.

Класс col-lg-12 - обозначает, что данный блок превышающий размер в 1200px превратиться в 100% ширину. Данный класс отвечает за большие устройства.

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

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *