Объясните функцию класса md-grid в Bootstrap.
Система сетки Bootstrap: система сетки начальной загрузки полезна при разработке адаптивного приложения или веб-сайта, в котором столбцы будут переставляться в зависимости от размера экрана. Это позволяет до 12 столбцов на странице. Вы можете использовать каждый из них по отдельности или объединить их вместе для более широких столбцов. Можно использовать все комбинации значений, в сумме доходящие до 12. Это дает лучший опыт для всех устройств. С помощью системы сетки начальной загрузки мы можем проектировать и настраивать ширину экрана для ширины экрана малого размера, ширины экрана среднего размера и ширины экрана большого размера. Некоторыми из классов, предоставляемых системой сетки Bootstrap, являются класс сетки xs для очень малого размера, класс сетки sm для малого размера, класс сетки md для среднего размера и класс сетки lg для большого размера.
Классы сетки: система сетки Bootstrap содержит 5 классов, которые перечислены ниже:
- .col: используется для устройств с очень маленьким экраном (ширина экрана менее 576 пикселей).
- .col-sm: используется для устройств с маленьким экраном (ширина экрана больше или равна 576 пикселей).
- .col-md: используется для устройств со средним размером экрана (ширина экрана больше или равна 768 пикселей).
- .col-lg: используется для устройств с большим размером экрана (ширина экрана больше или равна 992 пикселям).
- .col-xl: используется для устройств с большим размером экрана (ширина экрана равна или превышает 1200 пикселей).
Компоненты грид-системы:
- Контейнеры: Bootstrap требует, чтобы содержащий элемент помещал содержимое сайта в сетку. Слово контейнер используется для содержания элементов строки и элементов строки, содержащих элементы столбца.
- Ряды: Ряды должны быть размещены внутри контейнера или контейнера-жидкости для правильного выравнивания и заполнения. Строки используются для создания горизонтальных групп столбцов.
- Столбцы: Столбцы сетки создаются путем указания числа из двенадцати доступных столбцов, которые вы хотите охватить. Например, три одинаковых столбца будут использовать три столбца col-lg-4.
Класс .md-grid: это класс, предоставляемый сеткой Bootstrap, который поможет разработать интерфейс веб-сайтов или приложений для экрана устройства небольшого размера, ширина экрана которого равна 992 пикселям или близка к 992 пикселям.
Синтаксис:
<div class="col-md-x">Content</div>
- col : используется для разделения строки на столбцы.
- md : этот класс применим только для устройств со средней шириной экрана.
- x : всего 12 столбцов сетки, а контейнер класса 'col-md-x' будет иметь x столбцов сетки.
Характеристики:
- Чтобы использовать этот класс, нам нужно добавить « .col-md- » в качестве префикса в классе.
- Этот класс используется для разработки адаптивного внешнего интерфейса для экрана небольшого устройства, ширина которого равна 992 пикселям или превышает 992 пикселя.
- На странице может быть максимум 12 столбцов сетки, но мы можем настроить экран, объединив эти столбцы.
- Ширина контейнера для этого класса может составлять примерно 970 пикселей.
Пример 1. В этом примере 'col-mid-6' обозначает 50 % всей ширины страницы для устройства с экраном среднего размера, потому что оно получит 6 столбцов сетки из 12 столбцов сетки.
Выход:
Пример 2: В этом примере «col-mid-3» обозначает 25% всей ширины страницы, потому что он получит 3 столбца сетки из 12 столбцов сетки. а «col-mid-9» означает 75% всей ширины страницы, потому что для устройств с экраном среднего размера он получит 9 столбцов сетки из 12 столбцов сетки.
Выход: