К этому моменту вы уже знакомы с использованием системы сеток и служебных классов. Поэтому наш следующий урок должен показаться простым: мы представим адаптивные классы, которые вы можете использовать в своих сетках.
Классы Bootstrap Col-XS применяются в случаях устройств с крошечными экранами — не более 576 пикселей в ширину. В большинстве случаев это довольно простой телефон.
Содержимое
1. Bootstrap Col-XS: основные советы
2. XS Grid
3. Auto Layout
4. Bootstrap Col-XS: сводка
Bootstrap Col-XS: основные советы
Сеточная система Bootstrap 4 предлагает набор из адаптивных классов для указания на каких экранах та или иная раскладка работает.
Класс Bootstrap Col-XS ( extra small ) применяет класс столбца сетки к элементу, когда экран уже, чем 576px .
Он создается с помощью Bootstrap col-xs-* в вашем коде.
XS Grid
Классы сверхмалых столбцов Bootstrap ( col-xs ) применяются, когда экран уже 576 пикселей.
Столбцы, подобные приведенным ниже, создаются с использованием префикса класса .col-xs-* :
col-xs-4
col-xs-8
Теперь у нас есть пример HTML, который создает простую компоновку, которая применима к любому размеру экрана и выглядит так, как показано выше:
Пример
<дел>
<дел>
<дел>
...
<дел>
...
Попробуйте вживую Учитесь на Udacity
Профи
Простота в использовании благодаря принципу обучения на практике
Предлагает качественный контент
Геймифицированный опыт кодирования в браузере 900 10
Цена соответствует качество
Подходит для учащихся от начинающих до продвинутых
Основные характеристики
Бесплатные сертификаты об окончании
Ориентированы на навыки работы с данными
Гибкий график обучения
ЭКСКЛЮЗИВ: 50% СКИДКА 9000 3 Pros
Упрощенный дизайн (без лишней информации)
Качественные курсы (даже бесплатные)
Разнообразие функций
Основные функции
Программы Nanodegree
Подходит для предприятий
Платные Сертификаты об окончании
СКИДКА 15%
Профи
Удобная навигация
Нет технических проблем 900 10
Кажется, заботится о своих пользователях
Основные характеристики
Большое разнообразие курсов
30-дневная политика возврата средств
Бесплатные сертификаты об окончании
ОТ 14,99$
Auto Layout
Используя сетку Bootstrap 4, вы также можете создать автоматических макета . Они создаются без указания того, сколько столбцов должен охватывать столбец сетки (пропуская число для всех контейнеров столбцов внутри контейнера строки).
Когда вы делаете это, Bootstrap 4 автоматически определяет, сколько столбцов должен охватывать каждый элемент столбца, чтобы все они были равны и занимали всю доступную ширину вместе:
Пример
<дел>1
<дел>2
<дел>3
<дел>4
<дел>5
Попробуйте вживую. Учитесь на Udacity
Bootstrap Col-XS: сводка
Адаптивные классы используются в системе сетки для указания размера экрана, на котором работает определенный макет.
Bootstrap extra small или класс Col-XS применяет класс столбца сетки к элементу, когда пользователь не использует экран, ширина которого превышает 576 пикселей.
{{ title }}
Базовые макеты сетки, чтобы вы могли ознакомиться со сборкой в системе сетки Bootstrap.
Три одинаковых столбца
Получить три столбца одинаковой ширины , начиная с рабочих столов и
масштабирование до больших рабочих столов . На мобильных устройствах, планшетах и более ранних версиях столбцы будут автоматически складываться.
.col-md-4
.col-md-4
.col-md-4
Три неравных столбца
Получите три столбца , начиная с настольных компьютеров и масштабируя до больших
рабочие столы различной ширины. Помните, что столбцов сетки должно быть до двенадцати для одного горизонтального блока. Более того, столбцы начинают складываться независимо от области просмотра.
.col-md-3
.col-md-6
.col-md-3
Два столбца
Получите два столбца , начиная с настольных компьютеров и масштабируя их до больших размеров.
рабочие столы .
.col-MD-8
.col-md-4
Полная ширина, один столбец
Для элементов полной ширины классы сетки не требуются.
Два столбца с двумя вложенными столбцами
Согласно документации, вложение выполняется легко — просто поместите ряд столбцов в существующий столбец. Это дает вам два столбца , начиная
на рабочих столах и масштабирование до больших рабочих столов , с еще двумя (равной ширины) в большом столбце.
При размерах мобильных устройств, планшетов и ниже эти столбцы и их вложенные столбцы будут складываться.
.col-MD-8
.col-md-6
.col-md-6
.col-md-4
Смешанный: мобильный и настольный компьютер
Система сетки Bootstrap 3 имеет четыре уровня классов: xs (телефоны), sm (планшеты), md (настольные компьютеры) и lg (большие настольные компьютеры). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется, то есть, если вы планируете установить одинаковую ширину для xs и sm, вам нужно указать только xs.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Смешанный: мобильный, планшетный и настольный
.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Очистка колонны
Очистить
плавает в определенных точках останова, чтобы предотвратить неудобную обертку с неравномерным содержимым.
Они создаются без указания того, сколько столбцов должен охватывать столбец сетки (пропуская число для всех контейнеров столбцов внутри контейнера строки).
Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.