Как это работает
Система сеток Bootstrap использует серию контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.
Новичок или незнакомец с flexbox? для фона, терминология, рекомендации и фрагменты кода.
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
В приведенном выше примере создаются три столбца одинаковой ширины на малых, средних, больших и очень больших устройствах с использованием наших предопределенных классов сетки. Эти столбцы центрируются на странице с родительским .
Вот как это работает:
- Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого Вашего сайта. Используйте для адаптивной ширины в пикселях или для параметра для всех размеров области просмотра и устройства.
- Строки — это обертки для столбцов. У каждого столбца есть горизонтальный (называемый полем) для управления пространством между ними. Затем этому противодействуют строки с отрицательными полями. Таким образом, все содержимое Ваших столбцов визуально выравнивается по левому краю
- В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
- Благодаря flexbox, столбцы сетки без указанной ширины будут автоматически компоноваться как столбцы одинаковой ширины. Например, каждый из четырех экземпляров автоматически будет иметь ширину 25% от небольшой контрольной точки и выше. См. дополнительные примеры в разделе .
- Классы столбцов указывают количество столбцов, которое Вы хотите использовать из возможных 12 в строке. Итак, если Вам нужны три столбца одинаковой ширины, Вы можете использовать .
- Ширина столбцов задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
- Столбцы имеют горизонтальный для создания промежутков между отдельными столбцами, однако Вы можете удалить из строк и из столбцов с помощью в строке .
- Чтобы сетка реагировала, есть пять контрольных точек сетки, по одной для каждой : все контрольные точки (очень маленькие), маленькие, средние, большие и очень большие.
- Контрольные точки сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной контрольной точке и всем тем, что выше нее (например, применяется к маленьким, средним, большим и очень большим устройствам , но не первая контрольная точка ).
- Вы можете использовать предопределенные классы сетки (например ) или для большей семантической разметки.
Помните об ограничениях и ошибках вокруг flexbox, таких как .
Отображение и скрытие контента
Чтобы заставить элемент отобразиться или скрыться вы можете использовать классы () и (). Эти классы так же как классы и имеют правило , которое повышает приоритет стилей данных классов перед стилями других классов или селекторов, которые могут эти стили вытеснить. Данные классы можно применять только к блочным элементам HTML.
Кроме того, в Bootstrap есть ещё один класс , который предназначен для отключения видимости элемента, к которому он применён. Но, в отличие от вышеперечисленных классов, данный класс не изменяет свойство у элемента и, следовательно, он по-прежнему занимает место, хоть и становится не видимым.
<div class="show">...</div> <div class="hidden">...</div> <div class="invisible">...</div>
Классы для выравнивания изображений
Изменить положение изображения в Bootstrap можно с помощью утилитных классов:
- в Bootstrap 3: , , , , и ;
- в Bootstrap 4: , , , , и .
Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства со значением или .
<!-- Bootstrap 3 --> <div class="clearfix"> <!-- выравниваем изображение по левому краю с помощью float: left --> <img src="..." alt="..." class="pull-left"> <!-- выравниваем изображение по правому краю с помощью float: right --> <img src="..." alt="..." class="pull-right"> </div> <!-- Bootstrap 4 --> <div class="clearfix"> <!-- выравниваем изображение по левому краю с помощью float: left --> <img src="..." alt="..." class="float-left"> <!-- выравниваем изображение по правому краю с помощью float: right --> <img src="..." alt="..." class="float-right"> </div>
Установка изображению (Bootstrap 3) или (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через и .
<!-- Bootstrap 3 --> <img src="..." alt="..." class="center-block"> <!-- Bootstrap 4 --> <img src="..." alt="..." class="mx-auto d-block">
Классы , и предназначены для выравнивания изображений, которые отображаются на странице только как строчно-блочные () элементы. Для этого изображение необходимо поместить в элемент, например, и добавить к нему один из этих классов.
<!-- Bootstrap 3 и 4 --> <!-- по левому краю --> <div class="text-left"> <img src="..." alt="..."> </div> <!-- по центру --> <div class="text-center"> <img src="..." alt="..."> </div> <!-- по правому краю --> <div class="text-right"> <img src="..." alt="..."> </div>
Фиксированное (плавающее) меню
Bootstrap 3 предоставляет классы, с помощью которых вы можете прикрепить (зафиксировать) меню при прокрутке странице к её верхней или нижней части.
Прикрепление к верхней части страницы
Для создания адаптивного горизонтального меню, прикрепленного к верхней части страницы, к нему необходимо добавить дополнительный класс .
<!-- Класс navbar-fixed-top прикрепляет меню к верхней части страницы -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- Элемент с классом container или container-fluid необходим для центрирования и установки необходимых отступов слева и справа для контента -->
<div class="container">
...
</div>
</nav>
Содержимое горизонтального меню помещайте внутрь контейнера с классом или . Это обеспечит центрирование меню и установку необходимых отступов слева и справа для его контента.
Для того чтобы верхнее фиксированное меню не накладывалась на контент страницы необходимо для элемента добавить CSS свойство (высота меню Navbar по умолчанию равна 50px):
body {
padding-top: 70px;
}
Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.
Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:
:target:before {
display: block;
content: " ";
margin-top: -70px;
height: 70px;
visibility: hidden;
}
Меню, прикрепленное к нижней части страницы
Прикрепление меню к нижней части страницы осуществляется посредством добавления к нему дополнительного класса .
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента добавить следующее CSS правило:
body {
padding-bottom: 70px;
}
Горизонтальное меню для навигации по странице
Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):
<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">
<!—Фиксированное горизонтальное меню для навигации по текущей странице -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
<li><a href="#href2">Ссылка 2</a></li>
<li><a href="#href3">Ссылка 3</a></li>
<li><a href="#href4">Ссылка 4</a></li>
<li><a href="#href5">Ссылка 5</a></li>
</ul>
</div>
</div>
</nav>
<!--Основной контент страницы -->
<main>
<div class="container-fluid">
...
<h1>Название страницы</h1>
...
<h2 id="href1">Заголовок 1</h2>
...
<h2 id="href2">Заголовок 2</h2>
...
<h2 id="href3">Заголовок 3</h2>
...
<h2 id="href4">Заголовок 4</h2>
...
<h2 id="href5">Заголовок 5</h2>
...
</div>
</main>
...
</body>
Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:
//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
//если она не имеет класс dropdown-toggle
if (!$(this).hasClass("dropdown-toggle")) {
//то закрыть меню
$(".navbar-collapse").collapse('hide');
}
});
Пропуск навигации
Благодаря давнему недостатки/ошибки в Chrome (см. вопрос 262171 в хром багтрекер) и Internet Explorer (см. эту статью на ссылки и фокус того), Вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив .
Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с при щелчке мышкой) с .
Обратите внимание, что эта ошибка также влияет на другие ссылки вашего сайта могут использовать, делая их бесполезными для пользователей клавиатуры. Вы можете рассмотреть вопрос о включении аналогичного затычка исправить все другие именованные анкеры / идентификаторы фрагментов, которые выступают в качестве цели ссылки
Строки и ячейки таблицы
Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> — это контейнер для остальных тегов таблицы.
Тег <tr> образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега <td> (хотя первая может быть задана и тегом <th>).
Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка
)
А сама строка
Рассмотрим пример:
Мы видим три строки (элементы <tr>). В каждой из строк по три ячейки (<td>). Представим это HTML-кодом:
Объединение ячеек
Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.
Столбцы таблицы объединяются атрибутом colspan, а строки — атрибутом rowspan.
И тут важно не запутаться:
Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.
Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.
Рассмотрим пару примеров:
| 1 | 2 | |
|---|---|---|
| 1 | 2 | |
| 1 | 2 | 3 |
| 1 | 2 |
Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.
Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:
Ещё один пример:
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | |
| 1 |
Как такое сверстать:
Он запрещает вам:
- Привлечь авторов и владельцев лицензий к ответственности за ущерб, поскольку Bootstrap предоставляется без гарантии
- Привлечь к ответственности создателей или правообладателей Bootstrap
- Распространять любую часть Bootstrap без надлежащей ссылки на источник
- Использовать любые знаки, принадлежащие Twitter, любым способом, который может указывать или подразумевать, что Twitter одобряет ваше распространение
- Использовать любые знаки, принадлежащие Twitter, любым способом, который может указывать или подразумевать, что вы создали соответствующее программное обеспечение Twitter
Дополнительные материалы
В этом разделе представлена следующая информация:
Табы, вкладки которых имеют выпадающее меню
В Bootstrap к вкладкам при необходимости можно добавить выпадающее меню. Кроме этого, если некоторые вкладки нужно сделать не активными, то к ним можно добавить класс .
<ul class="nav nav-tabs">
<!-- Обычная вкладка -->
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
...
<!-- Вкладка с выпадающим списком -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Дополнительно</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#reviews">Обзоры</a>
<a class="dropdown-item" href="#question-answer">Вопрос-Ответ</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#comments">Комментарии</a>
</div>
</li>
<!-- Вкладка в состоянии disabled -->
<li class="nav-item">
<a class="nav-link disabled" href="#istructions-and-files" tabindex="-1" aria-disabled="true">Инструкции и
файлы</a>
</li>
...
</ul>
<div class="tab-content">...</div>
Добавление aria-атрибутов в разметку
Если вы хотите сделать сайт более доступным для людей с ограниченными возможностями, то данную разметку следует дополнить aria-атрибутами.
Эти атрибуты предназначены для специальных приложений, например экранных дикторов, с помощью которых пользователи прослушивают страницы.
Для этого к вкладкам необходимо добавить , , и дополнительные aria-атрибуты с помощью которых передать пользователям специальных приложений структуру, функциональность и текущее состояния табов.
Горизонтальные промежутки
Классы могут использоваться для управления шириной горизонтального промежутка. Родительский элемент или может нуждаться в корректировке, если также используются более крупные промежутка, чтобы избежать нежелательного переполнения, с помощью соответствующей утилиты заполнения. Например, в следующем примере мы увеличили отступ с помощью :
Пользовательские внутренние отступы колонок
Пользовательские внутренние отступы колонок
Альтернативное решение — добавить оболочку вокруг с классом :
Пользовательские внутренние отступы колонок
Пользовательские внутренние отступы колонок
Заводские Android браузеры
Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.
Меню выбора
На элементе, в Android браузере не будет отображаться элементы управления если есть и/или . (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.
Хотите увидеть пример? Проверьте это JS Bin demo.
Печать
Даже в некоторых современных браузерах печать может быть необычной.
В частности, начиная с версии Chrome v32 и независимо от настроек полей, Chrome использует ширину области просмотра, значительно меньшую, чем физический размер бумаги, при разрешении медиа-запросов при печати веб-страницы. Это может привести к неожиданной активации сверхмалой сетки Bootstrap при печати. Смотрите issue #12078 и ошибка Chrome #273306 для некоторых деталей. Предлагаемые обходные пути:
- Используйте очень маленькую сетку и убедитесь, что ваша страница под ней выглядит приемлемо.
- Настройте значения переменных Less, чтобы бумага для принтера считалась больше, чем очень маленькая.
- Добавьте пользовательские медиа-запросы, чтобы изменить контрольные точки размера сетки только для печатных СМИ.
Кроме того, начиная с Safari v8.0 фиксированной ширины может привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Смотрите #14868 и ошибка WebKit #138192, чтобы получить дополнительные сведения. Одним из возможных способов решения этой проблемы является добавление следующего CSS:
Оформление строчных (inline) текстовых элементов HTML5
Bootstrap содержит стили для основных HTML5 inline элементов: , , , , , , , , и .
…для выделения текста, имеющего актуальность в другом контексте…
…для выделения текста, который был удалён из документа…
…для выделения текста, который потерял уже свою актуальность…
…для разметки текста, который был добавлен в документ…
…для разметки текста, который стилистически отличается от обычного текста (например, является невнятным или содержит ошибки в написании слов) …
…используется в основном для разметки информации, которая должна отображаться на странице более мелким шрифтом (например, авторских прав)…
…для разметки важного текста…
…для разметки текста, который имеет эмоциональную окраску…
…для разметки текста, стилистически отличающегося от обычного текста, без передачи ему какого-либо особого значения или значимости (например, для выделения ключевых слов, названий продуктов в обзоре)…
…для разметки иностранных слов в тексте, технических терминов и другой информации, которая произносится в тексте альтернативным голосом или настроением без эмоциональной окраски…
Как сделать текст жирным, наклонным или подчёркнутым
В Bootstrap 4 для этих целей уже есть подготовленные классы , , и .
<p class="font-weight-bold">Жирный текст...</p> <p class="font-weight-normal">Нормальный (не жирный текст)...</p> <p class="font-weight-light">Текст, имеющий тонкое начертание...</p> <p class="font-italic">Курсивный текст...</p>
Если используете Bootstrap 3, то вы их можете добавить следующие стили в свой файл CSS, а затем использовать их в HTML (посредством добавления к элементам необходимых классов):
.font-weight-bold {
font-weight: 700;
}
.font-weight-normal {
font-weight: 400;
}
.font-weight-light {
font-weight: 300;
}
.font-italic {
font-style: italic;
}
.text-underline {
text-decoration: underline;
}
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.
<div class="container">
<div class="row">
<div class="col-6"> (1) </div>
<div class="col-6"> (2) </div>
<div class="col-12"> (3) </div>
<div class="col-8"> (4) </div>
</div>
</div>
Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на sm-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>
Как зафиксировать меню при прокрутке
Если необходимо зафиксировать меню не сразу, а после прокрутки страницы на величину, равной высоте некоторого блока, расположенного до него, то можно воспользоваться CSS свойством со значением .
<body>
<!-- Блок до меню Navbar (например, логотип) -->
<div style="height: 90px;">...</div>
<!-- Горизонтальное меню Navbar -->
<nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
...
</nav>
</body>
Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.
<body>
<!-- Блок до меню Navbar (например, логотип) -->
<div style="height: 90px;">...</div>
<!-- Горизонтальное меню Navbar -->
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
...
</nav>
</body>
.navbar.affix {
top:0;
width:100%;
}
Bootstrap Navbar — Анимация кнопки меню
Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».
1 вариант (анимация в иконку закрытия):
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggle .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 10% 90%;
-ms-transform-origin: 10% 90%;
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
2 вариант (анимация в стрелочку, направленную вверх):
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
transform: translate3d(1px,0,0) rotate(-45deg);
transform-origin: center center;
width: 11px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
transform: rotate(-90deg);
transform-origin: center center;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-14px,0) rotate(-135deg);
transform-origin: right top;
width: 11px;
}
Валидаторы
Для того, чтобы обеспечить наилучшие впечатления для старый и глючит браузеры, Bootstrap использует CSS хаки браузер в нескольких местах особые CSS на определенные версии браузеров, чтобы обойти ошибки в самих браузерах. Эти писаки понятно дело CSS валидаторы жаловаться на то, что они являются недействительными. В пару мест, мы также применяем ультрасовременные CSS функций, которые еще не полностью стандартизирована, но они используются исключительно для постепенного улучшения.
Эти предупреждения не имеют значения в практике, поскольку не вымышленная часть нашей CSS делает полной проверки и богатство порциями не препятствовать нормальному функционированию, не ломаные части, поэтому мы намеренно игнорируют эти предупреждения.
Как это работает
На высоком уровне, блочная система работает так:
- Существует три основных компонента—контейнера, строки и столбцы.
- Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
- «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
- Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
- Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
- Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
- Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
- Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
- Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
- Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.
Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.
Акцентированные таблицы
Полосатые строки
Используйте , чтобы добавить полосатую зебру к любой строке таблицы внутри .
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Эти классы также можно добавить в варианты таблиц:
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Строки с наведением
Добавьте , чтобы включить состояние наведения курсора на строки таблицы внутри .
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Эти строки с наведением также можно комбинировать с полосатым вариантом:
| # | Имя | Фамилия | Обращение |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Активные таблицы
Выделите строку или ячейку таблицы, добавив класс .
| # | Первый | Последний | Обработчик |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | Первый | Последний | Обработчик |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Как изменить точку переключения navbar
Самый простой способ изменить точку переключения (значение переменной ) – это создать свою сборку Bootstrap на странице Customize.
Способ изменения точки схлопывания меню с помощью CSS (без создания своей сборки):
@media (max-width: 899px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
margin-right: -15px;
margin-left: -15px;
}
}
Для того чтобы создать не схлопывающееся меню можно воспользоваться вышеприведённым решением, но назначить в качестве значения переменной значение 320px (минимальную ширину экрана устройства).
