ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Как он портит все, что украдет! (Ф. Вольтер).

Bootstrap – Системная сетка

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Системная сетка
В этой главе мы рассмотрим систему Bootstrap Grid.

Что такое Grid?

Как указанно в википедии
В области графического дизайна, сетка представляет собой структуру (обычно двумерную), составленную из ряда пересекающихся прямых (вертикальная, горизонтальная) линия, используемая для структурирования контента. Она широко используется для разработки макета и структуры контента в дизайне печати. В веб-дизайне, это очень эффективный метод, чтобы создать последовательную схему быстро и эффективно с помощью HTML и CSS.

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

Что такое система сетки в Bootstrap?

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

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

Первая стратегия для мобильных

  • Content
    • Определить, что является наиболее важным.
  • Layout
    • Конструкция меньшей ширины.
    • Базовый CSS-адрес мобильного устройства в первую очередь; медиа-запросы обращаются к планшетам, настольным компьютерам.
  • Progressive Enhancement
    • Добавление элементов с увеличением размера экрана.

Работа системы сеток в Bootstrap

Система сеток используется для создания макетов страниц с помощью ряда строк и столбцов, каркас вашего контента. Вот как работает система сеток Bootstrap:

  • Ряды должны быть размещены в пределах класса .container для правильного выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Контент должен быть размещен внутри столбцов, и только столбцы могут быть непосредственными потомками строк.
  • Предварительно определенные классы сетки, как .row и .col-xs-4 доступны для быстрого создания макетов сетки. Смесь LESS может быть также использованы дополнительные семантические макеты.
  • Колонки создают желоба (пробелы между содержанием столбца) через дополнение. Это заполнение смещения в строках для первого и последней колонки через отрицательный край на .rows .
  • Сетка колонн создается путем указания числа двенадцати доступных столбцов. Например, три равные колонки будут использовать три .col-xs-4.

Медиа-запросы

Медиа-запрос, этот  термин подразумевает «условное правило CSS». Это просто применяет некоторые CSS, основываясь на определенных условиях. Если эти условия соблюдены, стиль применяется.

Медиа-запросы в Bootstrap позволяют перемещать, показать и скрывать содержимое на основе размера окна просмотра. Эти медиа-запросы используются в LESS файлах для создания ключевых точек останова в системе сетки Bootstrap.

 

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

 

Медиа-запросы имеют две части, спецификация устройства, а затем правило размера. В приведенном выше случае, следующее правило устанавливается:

Рассмотрим эту строку:

 

Для всех устройств независимо от того, какой вид мин-ширина: min-width: @screen-sm-min if, если ширина экрана становится меньше, чем @screen-sm-max, то сделать что – то .

Параметры сетки

В следующей таблице приведены аспекты, как системная сетка Bootstrap работает на нескольких устройствах:

Дополнительные маленькие устройства телефоны (<768px)Небольшие устройства планшеты (≥768px)Средние устройства десктопов (≥992px)Большие устройства десктопов (≥1200px)
поведение сеткиГоризонтальные для всехСвернутые, начать, горизонтальные выше точки остановаСвернутые, начать, горизонтальные выше точки остановаСвернутые, начать, горизонтальные выше точки останова
Максимальная ширина контейнераNone (авто)750px970px1170px
префикс класса.col-xs-.col-sm-.col-md-.col-lg-
# столбца12121212
Максимальная ширина столбцаАвто60px78px95px
ширина переплета30px

(15px на каждой стороне колонны)

30px

(15px на каждой стороне колонны)

30px

(15px на каждой стороне колонны)

30px

(15px на каждой стороне колонны)

Вкладываемыедададада
Смещениядададада
Упорядочение колонкидададада

Базовая структура сетки

Ниже приводится основная структура сетки Bootstrap:

 

Давайте посмотрим некоторые простые примеры сетки:

сброс отзывчивых колонок

С четырьмя уровнями доступных сетей, вы обязательно столкнетесь с проблемами, где не ясно совершенно, как один столбец выше другого. Чтобы исправить это, используйте комбинацию класса .clearfix и отзывчивые полезные классы, как показано в следующем примере:

 

Это даст следующий результат:

Изменение размера окна просмотра или проверка его на свой телефон для желаемого результата этого примера.

Смещение столбцов

Смещения, полезная функция для более специализированных макетов. Они могут быть использованы, чтобы подтолкнуть столбцы на большее расстояния (к примеру). В класс .col-xs = * не поддерживает смещения, но они легко тиражироваться с помощью пустой ячейки.

Для использования коррекций на больших дисплеях, используйте классы .col-md-offset- *. Эти классы увеличивают левое поле столбца с * столбцами, где * в диапазоне от 1 до 11.

В следующем примере мы имеем <div class = “col-md-6”>..</div>, мы центрируем это с помощью класса  .col-md-offset-3.

 

Это даст следующий результат:

Вложенные столбцы

Чтобы вложить ваше содержание с сеткой по умолчанию, добавьте новый .row и набор .col-md- * столбцов в пределах существующей колонки .col-md- *. Вложенные строки должны включать в себя набор столбцов, которые добавляют до 12.

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

 

Это даст следующий результат:

Колонка для заказа

Еще одна приятная особенность системы сетки Bootstrap является то, что вы можете легко написать столбцы в порядке, и показать их в другом. Вы можете легко изменить порядок встроенных в сетке колонн с модифицирующими классами  .col-md-push-* и .col-md-pull-*, где * в диапазоне от 1 до 11.

В следующем примере мы имеем две колонки, макет с левой колонке является самым узким и выступает в качестве боковой панели. Мы будем менять порядок этих столбцов с помощью классов .col-md-push-* и .col-md-pull-*.

 

Это даст следующий результат:

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

Войти с помощью: 

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

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close