Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Работа с сеткой бутстрап поможет ускорить верстку сайта. Виды сеток и работа с ними


Доброго времени суток всем желающим изучить создание разметки веб-страниц при помощи Bootstrap Grid System. В сегодняшней публикации я поведаю вам, что подразумевает под собой сетка Бутстрап и для чего она была придумана, расскажу про виды модульных сеток и определенные опции, которые возникают в зависимости от размера экрана девайсов.

В добавок к этому я приведу дизайн нескольких простых разметок страниц. Пришло время перейти к разбору полетов!

Bootstrap Grid System – вот это название!

На самом деле это обычная сетка, максимальное количество колонок которой может быть 12. На этом числе и строится дальнейшая разметка. Сейчас объясню подробно.

Bootstrap grid

При построении данной сетки используются блоки – div-ы. И вот когда вы выделяете некий блок для конкретной ячейки, то прописываете в атрибуте class имя spanX или col-*-X, где X – это число, которое отвечает за ширину колонки. Например,

class="span6”

X может быть назначен в диапазоне [1; 12]. Однако существует одно обязательное условие: сумма ширины всех колонок не должна превышать 12.

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

Что нужно знать о классах

Для создания более динамической и гибкой разметки веб-страниц, разработчикам необходимо знать про четыре базовых класса grid-систем. Они были разработаны специально для указания устройства, для которого разрабатывается внешний вид сайта.

Для удобства я структурировал информацию в таблицу.

  Экстра-маленькие девайсы (Смартфоны) Маленькие девайсы (Планшеты) Средние девайсы (Персональные компьютеры) Большие девайсы (Персональные компьютеры)
Размер <768px >=768px >=992px >=1200px
Ширина контейнера None (auto) 750px 970px 1170px
Префиксный класс .col-xs- .col-sm- .col-md- .col-lg-
Ширина колонки auto ~62px ~81px ~97px

Все эти классы можно использовать как по отдельности, так и комбинировать. К тому же есть возможность изменять параметры. Так, через $container-max-width можно переопределить размер ограничения любого класса. Это выглядит следующим образом:

9cef1eaf9bc827a182551393557761c8000

Теперь вы знаете, что изменять размер сеток при помощи встроенных префиксных классов легко. Вы можете установить даже, к примеру, 1170px для PSD — сеток.


Что же предоставляют такие классы? Они выполняют роль медиазапросов (@media) при адаптивной верстке. А точнее они и есть медиазапросы. Как вы помните из прошлых публикаций, Bootstrap 3 – это фреймворк, который реализует концепцию mobile-first и отзывчивую верстку.

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

Внимание! Правила!

Для того чтобы grid-ы работали корректно, нужно придерживаться нескольких основных правил:

  • Все создаваемые строки обязательно должны быть прописаны в блоке с классом .container или .container- fluid (чуть позже я объясню, в чем разница);
  • Обязательно используйте класс .row для создания ячеек;
  • Весь контент должен быть помещен в колонки и при этом только колонки могут наследоваться непосредственно от строк;
  • Вне зависимости от количества создаваемых колонок, общая их сумма должна равняться 12. Поэтому при создании трех одинаковых ячеек будет указываться span4 или .col- sm-4 (12/3=4);
  • Если количество и ширина созданных колонок не соответствует необходимой установленной сумме, то можно ее заполнить параметром, отвечающим за отступы – col-*offset- X, где X – это число.

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

Поговорим о главном

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

«Почему же существует два класса?» — спросите вы. А все потому что первый отвечает за фиксированную ширину сетки (которая при этом не перестает быть отзывчивой), а второй растягивает контейнер на всю ширину экрана.

Хочу отметить важную деталь! Названые классы можно использовать только по отдельности и один раз в одном grid-е, поэтому вложенных контейнеров быть не может.

Практическая часть

Теперь вы знаете базовые инструменты для создания своего собственного шаблона при помощи Bootstrap Grid. Я создам простую разметку веб-страницы, в которой будет выделено поле для основного контента, навигационной панели и «подвала».

1
2
3
4
5
6
$container-max-widths: (
 xs: 563px, 
 sm: 630px,
  md: 774px,
  lg: 960px,
);

Чтобы растянуть содержимое страницы на весь экран, добавьте –fluid к наименованию класс container и row.

На этом у меня все. Думаю, вы почерпнули из нее что-то для себя новое и освежили уже имеющиеся знания. А если вы согласны с предыдущим предложением, то подписывайтесь на обновления моего блога и не забывайте рассказывать о нем своим друзьям. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 169 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Александра

    Роман, спасибо за подробную статью, и особенно за правила! О них мало пишут. Подскажите, пожалуйста.

    Есть кусок кода, где .container включает .row, а в нем .col-md-2 (5 штук), а по краям по одному .col-md-1.

    И при отображении на смартфоне колонки отображаются друг под другом (как и нужно), но почему-то каждая последующая сдвигается на ~10px вправо, и получается «лесенка».

    Я пробовала и добавить классы .col-xs-12, и закомментировать пробелы между div'ами, и даже поставить .clearfix, но ничего не изменилось.

    Понимаю, что без примера сложно сказать (как можно вставить сюда кусок кода?), но, возможно, решение очевидно?

    Жду вашего ответа :)

    09.03.2017 в 19:38
    • Роман

      Александр, здравствуйте!

      Пришлите мне все исходники на почту, я посмотрю, чтобы нам не гадать.

      romanchueshov@gmail.com

      09.03.2017 в 22:06