Бутстрап 3 уроки

Особенности работы с сеткой

Для понимания того, как работать с адаптивной сеткой, необходимо представить ее в виде html-таблицы с рядами и ячейками. Существует два варианта сетки:

  • полностью резиновая;
  • с определенной максимальной шириной.

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

В сетке Бутстрап также используется container-fluid. Наличие этого класса свидетельствует о том, что сетка является резиновой и не имеет каких-либо ограничений по размеру. Следовательно, пользователи смогут увидеть сайт во всю ширину, вне зависимости от размера монитора.

В container принято размещать ряды сетки. Это означает, что в «контейнер» помещаются все блоки, стоящие в одной строке. Для примера работы «контейнера» можно взять стандартный шаблон сайта:

  • шапка;
  • основа;
  • колонка слева;
  • футер.

В этом случае есть 3 колонки – шапка, основной контент и левая колонка, а также футер. Следовательно, для создания подобного сайта будет использоваться такая разметка:

XHTML

1 2 3 4 5 <div class = «container»> <div class = «row»>Шапка</div> <div class = «row»>Контент… и боковая колонка</div> <div class = «row»>Футер</div> </div>

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

Особенности работы 12-колоночной системы

По мнению опытных разработчиков, самым главным вопросом, относящимся к Бутстрапу, являются нюансы работы 12-колоночной системы. Знание этих нюансов открывает разработчикам путь к оперативной адаптивной верстке.

Верстка на Bootstrap предусматривает использование 4 классов, предназначенных для изменения параметров блоков:

  • lg – для дисплеев большого размера шириной более 1199 пикселей (ПК);
  • md – для дисплеев среднего размера шириной до 1199 пикселей (ноутбуки, нетбуки);
  • sm – для небольших дисплеев шириной до 991 пикселя (планшетные устройства);
  • xs – для самых маленьких дисплеев шириной до 768 пикселей (смартфоны).

Стоит добавить, что в этой системе с целью изменения размеров принято указывать числа от 1 до 12.

Изучив особенности этой системы, выше указанный код может быть исправлен и написан подобающим образом:

XHTML

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

Изучая вышеуказанный код, у вас должен возникнуть вопрос: для чего необходим класс col-md-12? Этот класс необходим для передачи браузера следующего сообщения: на устройствах, относящихся к классу md (ноутбуки и нетбуки) ширина сетки должна составлять 12 из 12 колонок. Другими словами, здесь должно использоваться 100% от ширины ряда.

Что происходит с шириной сетки на других устройствах, учитывая отсутствие каких-либо явных указаний в коде? На устройствах, относящихся к классу lg ширина также будет 100%. Это обусловлено тем, что значения для больших дисплеев определяются по принципу наследования. Для меньших дисплеев это правило не действует. Поэтому, если разработчик указал col-xs-6, ширина колонок на любых устройствах будет равна 50%. Если же разработчик указал col-lg-6, то эта ширина будет актуальна исключительно для больших экранов. Об этой особенности должен знать любой веб-разработчик, который использует адаптивную верстку Bootstrap 4.

И все-таки, что происходит с экранами меньшего размера, если ширина блока явно не задана? В данном случае ширина по умолчанию будет равна 100%.

Следующий пример на порядок сложнее. Теперь разработчику необходимо расположить в одном ряду контент-блоки и боковой блок. Данная задача решается следующим образом:

XHTML

1 2 <div class = «col-sm-8»>Контент</div> <div class = «col-sm-4»>Боковая колонка</div>

Этот код отправляет браузеру следующее сообщение: ширина контент-блока будет равна 66% на всех экранах кроме экстра-маленьких. А вот на самых маленьких дисплеях по умолчанию сохраняется 100% ширина. Такой вариант кода – это не просто пример. На практике именно эта разметка используется чаще всего.

Что касается боковой колонки, то ее ширина буде равна 33% на маленьких, средних и больших дисплеях. Следовательно, на экране экстра-маленького размера ширина по дефолту будет равна 100%. Все очень просто.

Вложенная сетка Bootstrap

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

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

В приведенном ниже примере внутри блока создается вложенная сетка:

XHTML

1 2 3 4 5 6 7 8 9 10 11 <div class = «col-sm-8»>Контент</div> И пишем в него: <div class = «col-sm-8»>Каталог товаров: <div class = «row»> <div class = «col-sm-4»> <h2>Название товара</h2> <img src = «bike.png»> <p>Описание товара</p> </div> </div> </div>

В указанном примере внутри контента создается вложенная сетка. Внутри вложен ряд, а в нем три блока с различными товарами (в данном случае велосипедами). Если скопировать класс col-sm-4 и дополнительно вставить его два раза, то получится следующее:

Здесь стоит отметить один важнейший нюанс – для адаптации изображений под блоки, в которых они расположены, необходимо задать класс img-responsive. Альтернативный вариант предусматривает написание такого кода в style.css:

CSS

1 2 3 4 5 img{ max-width: 100%; height: auto; display: block; }

После этого остается только сохранить код и подключить файл css к созданному проекту. Изображения по дефолту будут адаптивными. Без бустрапа процесс адаптации картинок получился бы намного дольше и сложнее.

Отдельно стоит сказать о том, что в процессе создания вложенной сетки не нужно указывать дополнительный блок с классом container. Это обусловлено тем, что «контейнером» является именно тот блок, в котором размещается вложенная сетка.

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

Responsive-утилиты

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

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

XHTML

1 <div class = «col-md-12 hidden-xs»>Футер</div>

В этом примере класс hidden-xs необходим для скрытия футера на маленьких дисплеях. На устройствах с большим размером экрана футер будет всегда виден.

Обратный пример. Если на маленьких дисплеях необходимо показать какой-либо блок, веб-разработчик должен указать класс visible-xs-block. Этот код означает, что пользователи будут видеть блок исключительно на дисплеях смартфонов.

Классы Responsive-утилит прописываются следующим образом:

  • в соответствии с задачей программиста указывается visible (видимый) или hidden (скрытый);
  • для указания параметров дисплея применяются сокращения классов – xs, sm, md и lg;
  • при указании visible необходимо добавить какое-либо значение: inline, inline-block или block.

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

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