Примеры и руководство по Bootstrap Grid SystemСетка начальной загрузки находится является основой структуры любого сайта. Она лежит в основе всего. Это сердце и душа шаблона и главная причина, по которой мы начинаем работать с ней в первую очередь. Одним словом, именно с нее все начинается. Если вы хотите использовать всю мощь Bootstrap, вы должны знать это работает изнутри, так и снаружи. Что касается сетки Bootstrap, то здесь нет ничего сложного. Как и все остальное, он работает общим правилами и построен в соответствии с принципами, которые работают последовательно.

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

Значение чисел в основных классах Bootstrap Grid

В то время как принципы сетки Bootstrap очевидны, то классы могут быть немного запутанными, чтобы понять их смысл, давайте разберем код на примере .col-sm-3. и .col-см-3:

  • col — означает столбец;
  • sm — означает тип размера экрана; Есть четыре разных типа;
    • sm — маленькие экраны: большинство телефонов среднего размера с размером монитора находится между 576 и 767 пикселей;
    • md — средние экраны: настольные компьютеры с размером монитора от 768 до 991 пикселей;
    • lg — большие экраны: стандартные мониторы размером от 992 до 1199 пикселей.
    • xl — очень большой: экраны размером более 1200 пикселей;
  • 3 — означает количество столбцов сетки Bootstrap, которые нужно объединить и сформировать одну область; Вы можете поставить любое число от 1 до 12;

Обратите внимание, что в Bootstrap 4 — точка, которая охватывает мобильные телефоны с мониторами менее 768 пикселей, была удалена. Вместо этого вы должны использовать .col-. Это применимо для макетов с шириной менее 576 пикселей.

Хотя число в конце класса говорит само за себя, аббревиатура «см» может запутать некоторых. Так зачем нам это? Эта классификация мониторов, или, другими словами, диапазон точек который позволяет разработчикам контролировать макет и изменять его поведение, чтобы веб-сайт выглядел так, как они хотят. Этот механизм поддерживает гибкость реакции Bootstrap. Например:

Этот код означает, что столбец под номером 1 будет занимать 1/2 ширины на мобильных телефонах, но 1/3 ширины на планшетах, больших настольных мониторах и даже на сотовых телефонах с мониторами более 576 пикселей.

Также важно отметить, что вы не обязаны перечислять все классы сетки, поскольку классы, определяющие поведение на меньших экранах, устанавливают поведение на больших экранах до тех пор, пока они не будут переопределены. В нашем конкретном случае вам не нужно указывать .col-md-4, .col-lg-4 и col-xl-4, поскольку класс col-sm-4 уже сделал это.

Выравнивание по вертикали в Bootstrap Grid v3 и v4

Если вы боретесь с Bootstrap 3, вертикальное выравнивание все еще может быть кошмаром. Если вам нужно центрировать столбец, есть два метода.

Во-первых, вы можете воспользоваться смещением классов. Разметка может выглядеть так:

Второй метод подразумевает использование проверенной временем методики: авто выравнивание. Пример разметки:
Что касается других счастливчиков, которые предпочитают более свежую, более обновленную и продвинутую версию шаблона (Bootstrap 4), то все делается с помощью нескольких строк кода благодаря Flexbox. Используйте функцию align-self-center:
Вы также можете использовать встроенные утилиты отображения, такие как display: table, display: table-cell, display: inline, чтобы центрировать элементы. Разметка может выглядеть так:

Как создать 5 одинаковых столбцов в сетке начальной загрузки

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

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

После этого вы можете свободно использовать его в документе:

Полезные ресурсы для сетки Bootstrap

Хотя сетка Bootstrap не несет ответственности за декоративную часть веб-сайта, поскольку ее работа заключается в «под капотом» сайта но она играет важную роль в поддержке всего интерфейса, тем не менее, есть некоторые полезные инструменты, которые помогают эффективно с ней работать.

Bootstrap Grid Generators

Bootstrap Grid Generators

Shoelace — это популярный инструмент для создания сеток Bootstrap . Управляйте строками и столбцами, а также переключайтесь между предварительным просмотром телефона, планшета, рабочего стола и большого рабочего стола, чтобы редактировать каждую из этих версий макета.

Layoutit

2-Layoutit Bootstrap

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

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

Bootstrap Builders

Mobirise

4-Mobirise Bootstrap

Mobirise —  конструктор Bootstrap, работающий на вашем локальном ПК. Он доступен для пользователей Windows и Mac. Он не требует навыков программирования. Есть удобный интерфейс, где все может быть создано путем перетаскивания.

Bootstrap Studio

5-Bootstrap-Studio

Bootstrap Studio — это настольное приложение, ориентированное на создание веб-сайтов с использованием сетки Bootstrap. Как и при запуске, визуальный редактор постоянно обновляется, так что вы можете воспользоваться последними усовершенствованиями в фреймворке. Он поставляется с многочисленными компонентами, которые порадуют вас своим индивидуальным дизайном. 

Заключение

Хорошее знание сетки Bootstrap — важный навык. Это основа, которая может быть не видна невооруженным глазом, но она необходима, так как она поддерживает все элементы. Если что-то пойдет не так, потребуется много времени, усилий и денег, чтобы решить проблему. Кто этого хочет? Прежде чем приступить к дизайну и декорированию, вам нужно сначала изучить сетку Bootstrap.

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

Спасибо за интересные идеи и материал сайту designmodo.com.