Bootstrap 3 классы: Bootstrap Бутстрап 4 Class

Содержание

Bootstrap Бутстрап 4 Class

.active Добавление цвета белого текста к активной ссылке в навигационной области . Navbar
.active Добавление синего цвета фона к элементу активного списка в группе списков List Groups
.active Добавление темно-синего цвета фона для имитации нажатой кнопки Buttons
.active Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке Dropdowns
.active Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) Pagination
.active Отображает/показывает текущий элемент карусели Carousel
.alert Создает окно сообщения предупреждения Alerts
.alert-danger
Тревога. Указывает на опасное или потенциально отрицательное действие Alerts
.alert-dark Темная тревога. Темно-серый окно оповещения Alerts
.alert-dismissible Указывает закрывающееся окно оповещения. Вместе с .close классом этот класс используется для закрытия оповещения (добавляет дополнительные отступы) Alerts
.alert-heading Добавляет color:inherit к указанному элементу Alerts
.alert-info Синее оповещение. Указывает нейтральное информативное изменение или действие Alerts
.alert-light Сигнал тревоги. Светлая серая коробка оповещения Alerts
.alert-link
Используется на ссылки внутри оповещения для обеспечения соответствия цветные ссылки
Alerts
.alert-primary Синяя тревога. Указывает на важное действие Alerts
.alert-secondary Серый сигнал тревоги. Указывает на «менее» важное действие Alerts
.alert-success Зеленая тревога. Указывает на успешное или положительное действие Alerts
.alert-warning Желтый сигнал тревоги. Указывает на осторожность следует принимать с этим действием Alerts
.align-baseline Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию Utilities
.align-bottom Элемент выравнивается по нижнему элементу в строке Utilities
.align-middle Элемент помещается в середину родительского элемента Utilities
.align-top Элеме

Bootstrap Бутстрап Классы

.active Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении) Tables
.active Добавляет серый цвет фона к активной ссылке по умолчанию навигационной навигации. Добавляет черный фон и белый цвет к текущей ссылке внутри инвертированной навигационной навигации. Navbar
.active Добавление синего цвета фона к элементу активного
списка
в группе списков
List Groups
.active Добавление синего цвета фона для имитации нажатой кнопки Buttons
.active Анимация полосового индикатора выполнения Progress Bars
.active Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке Dropdowns
.active Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) Pagination
.affix Подключаемый модуль позволяет элементу становиться прикрепленным (заблокированным/липким) к области на странице. Включение
position:fixed
и отключение
Affix
.alert Создает окно сообщения предупреждения Alerts
.alert-danger Красная коробка тревоги. Указывает на опасное или потенциально отрицательное действие Alerts
.alert-dismissible Вместе с .close классом этот класс используется для закрытия оповещения Alerts
.alert-info Светло-синяя коробка оповещения. Указывает некоторую информацию Alerts
.alert-link Используется на ссылки внутри оповещения, чтобы добавить соответствующие цветные ссылки Alerts
.alert-success
Зеленая коробка тревоги. Указывает на успешное или положительное действие Alerts
.alert-warning Желтая коробка оповещения. Указывает на осторожность следует принимать с этим действием Alerts

Bootstrap Бутстрап Вспомогательные классы справка



Текст

Добавьте значение через Text-Colors с классами ниже. Ссылки будут затемнены при наведении:

Класс Описание
.text-muted Текст, стилизованный под класс «текст-приглушенный»
.text-primary Текст, стилизованный под класс «Text-Primary»
.text-success Текстовый стиль с классом «Text-Success»
.text-info Текст, стилизованный под класс «Text-info»
.text-warning Текст в стиле с классом «текст-предупреждение»
.text-danger Текст, стилизованный под класс «Text-опасность»

Фон

Добавить значение через фон-цвета с классами ниже. Ссылки затемнить на Hover так же, как текстовые классы:

Класс Описание
.bg-primary Ячейка таблицы стилизована под класс «BG-Primary»
.bg-success Ячейка таблицы стилизована под класс «BG-Success»
.bg-info Ячейка таблицы стилизована под класс «BG-info»
.bg-warning Ячейка таблицы стилизована под класс «BG-warning»
.bg-danger Ячейка таблицы стилизована под класс «BG-опасность»

Другие

Класс Описание
.pull-left Поплавок элемента влево
.pull-right Поплавок элемента вправо
.center-block Задает отображаемый элемент: блок с полями справа: авто и поле слева: Авто
.clearfix Очищает поплавки
.show Вынуждает элемент быть показанным (дисплей: блок)
.hidden Заставляет элемент быть скрытым (отображение: нет)
.invisible Заставляет элемент быть невидимым (видимость: скрытый). Займет место на странице, даже если она невидима
.sr-only Скрытие элемента для всех устройств, Кроме программ чтения с экрана
.sr-only-focusable
Объедините с. SR-только для отображения элемента снова, когда он сфокусирован (например, пользователь с клавиатурой)
.text-hide Помогает заменить текстовое содержимое элемента фоновым изображением
.close Указывает значок закрытия
.caret Указывает функциональность раскрывающегося списка (будет автоматически отменено в дропуп меню)


Отзывчивые утилиты

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

Используйте один или комбинацию доступных классов для переключения содержимого между точками просмотра.

Classes Extra small devices Phones (<768px)

Компоненты. Документация Bootstrap 3.3.7

Доступные символы

Включает в себя более 250 символов в формате шрифта из Glyphicon Полурослики набор. Значки символов Халфлинги, как правило, не предоставляются бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности, мы только просим, чтобы вы включили ссылку на Значки символов при любой возможности.

Как использовать

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

Не смешивайте с другими компонентами

Классы значков не могут сочетаться с другими элементами. Они спроектированы, чтобы быть отдельными элементами. Вместо этого добавте

<span> и применить значок классов <span>

Только для пустых элементов

Классы Иконок следует использовать только на элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.

Изменение местоположения значка шрифта

Bootstrap предполагает значок файлов шрифтов будет располагаться в ../fonts/ каталог, по сравнению с скомпилированных файлов CSS. Перемещение и переименование этих файлов шрифтов означает обновление CSS в одном из трех способов:

  • Изменить @icon-font-path and/или @icon-font-name переменные в источнике малых файлов.
  • Использование опции относительно URL-адреса тем меньше обеспечивается компилятора.
  • Изменить url() пути в составленном CSS.

Используйте все, что вариант лучше всего подходит вашей конкретной установки развития.

Доступно иконки

Современные версии ассистивных технологий объявит CSS Контента, а также специальные символы Unicode. Чтобы избежать непредвиденных и запутанных выхода в программы чтения с экрана (в частности, при иконки используется чисто для декора), то скрыть их с атрибутом aria-hidden="true".

Если вы используете иконка, чтобы передать смысл (а не только как декоративный элемент), убедитесь, что это значение также передал вспомогательные технологии – например, включать дополнительный контент, визуально скрыты с .sr-only класс.

Если вы создаете элементы другого текста (например, <button>

, который только содержит иконка), Вы всегда должны предоставить альтернативный контент, чтобы определить цель контроля, так что будет иметь смысл для пользователей вспомогательных технологий. В этом случае, можно добавить aria-label атрибут на себя управление.

<span aria-hidden="true"></span>

Примеры

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

<button type="button" aria-label="Left Align">
  <span aria-hidden="true"></span>
</button>

<button type="button">
  <span aria-hidden="true"></span> Star
</button>

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

Error: Enter a valid email address

<div role="alert">
  <span aria-hidden="true"></span>
  <span>Error:</span>
  Enter a valid email address
</div>

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Пример

Оберните кнопку выпадающего меню и список с помощью класса .dropdown или другого элемента, который объявляет position: relative;.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span></span>
  </button>
  <ul aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выпадающие меню могут быть изменены, чтобы расширить вверх (а не вниз), добавив .dropup родителю.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span></span>
  </button>
  <ul aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Выравнивание

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Может потребоваться дополнительное позиционирование

Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределми области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.

.pull-right устаревшее выравнивание

В версии 3.1, мы определили устаревшим выравнивание .pull-right для выпадающего меню. Для выравнивания меню справа, используйте .dropdown-menu-right. Компоненты, выровненные справа в навигационной панели используют реализован версию класса right-aligned, для автоматического выравнивания меню. Для переопределения их, используйте .dropdown-menu-left.

<ul aria-labelledby="dLabel">
  ...
</ul>

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

<ul aria-labelledby="dropdownMenu3">
  ...
  <li>Dropdown header</li>
  ...
</ul>

Делитель

Добавить разделитель для разделения ряда ссылок в выпадающем меню.

<ul aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator"></li>
  ...
</ul>

Заблокированы части меню

Добавьте .disabled к <li> в выпадающем списке, чтобы отключить ссылку.

<ul aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).

Обеспечить правильное role и укажите метку

Для того, для вспомогательных технологий, таких как программы чтения с экрана – донести, что ряд кнопок сгруппированы, соответствующий role атрибут должен быть обеспечен. Для группы кнопок, это будет role="group", в то время как панели инструментов должны иметь role="toolbar".

Одно исключение-это группы, которые содержат только один элемент управления (например, оправдано группы кнопок с <button> элементами) или выпадающий.

Кроме того, группы и панели инструментов должны иметь четкие этикетки, как и большинство технологий, иначе не озвучить их, несмотря на наличие правильно role атрибута. В примерах, приведенных здесь, мы используем aria-label, но альтернативы, такие как aria-labelledby, также можно использовать.

Основной пример

Оберните серию кнопок с классом .btn класс .btn-group.

<div role="group" aria-label="...">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

Объедините набор <div> с помощью <div> для более сложных компонентов.

<div role="toolbar" aria-label="...">
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
  <div role="group" aria-label="...">...</div>
</div>

Изменение размера

Вместо применения кнопки классы размеров для каждой кнопки в группе, просто добавьте .btn-group-* друг .btn-group, в том числе для вложения нескольких групп.

Left Middle Right

Left Middle Right

Left Middle Right

Left Middle Right

<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>
<div role="group" aria-label="...">...</div>

Вложенность

Разместите .btn-group в середине другой .btn-group, если вы хотите совместить выпадающее меню с серией кнопок.

<div role="group" aria-label="...">
  <button type="button">1</button>
  <button type="button">2</button>

  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span></span>
    </button>
    <ul>
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Вертикальные вариации

Сделайте набор кнопок, составленных вертикально, а не горизонтально. Split кнопки выпадающего меню не поддерживаются.

Button Button Button Button
<div role="group" aria-label="...">
  ...
</div>

Группа кнопок Justified

Создавайте группы кнопок, растянуты на всю ширину их родительского элемента. Также рассмотрите вариант с кнопкой в выпадающем меню внутри группы кнопок.

Обработка рамок

Из-за специфических HTML и CSS, используемой для обоснования кнопок (а именно display: table-cell), границы между которыми удвоятся. В регулярных группах кнопок, margin-left: -1px используется для стека границ вместо удаления их. Впрочем, margin не работает с display: table-cell. В результате этого, в зависимости от ваших настроек в Bootstrap, вы можете удалить или повторно изменить цвет рамок.

IE8 и рамки

Internet Explorer 8 не оказывает границы на кнопках в обоснованной группе кнопок, будь то на <a> или <button> елементах. Чтобы избежать этого, обернуть каждую кнопку в другую .btn-group.

Смотрите #12476 для подробной информации.

С <a> элементами

Просто заключите серию .btn в .btn-group.btn-group-justified.

<div role="group" aria-label="...">
  ...
</div>
Ссылки действуя как кнопки

Если <a> элементы используются в качестве кнопки запуска на странице функциональность, вместо того, чтобы переходить на другой документ или раздел в пределах текущей страницы – они также должны быть даны соответствующие role="button".

С <button> элементами

Для использования групп кнопок по ширине с элементами <button>, вы должны заключить каждую кнопку в группу кнопок. Большинство браузеров не правильно применяют наш CSS для обоснования, элемента <button>, но так как мы поддерживаем кнопки выпадающего меню, мы можем обойти это

<div role="group" aria-label="...">
  <div role="group">
    <button type="button">Left</button>
  </div>
  <div role="group">
    <button type="button">Middle</button>
  </div>
  <div role="group">
    <button type="button">Right</button>
  </div>
</div>

Используйте любую кнопку для выпадающего меню разместив ее в .btn-group, и обеспечив ее правильно-размеченным меню.

Одиночная кнопка выпадающего меню

Предоставьте другого вида кнопке, с выпадающим меню, с помощью определенных базовых изменений.

<!-- Одна кнопка -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span></span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split кнопка с выпадающим меню

Аналогично, создайте split кнопку c выпадающим меню с такими же изменениями в разметки, только с разделенной кнопкой.

<!-- Раздельная кнопка -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Изменение размера

Кнопки в выпадающем меню могут иметь любой размер.

<!-- Большая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

<!-- Очень малая группа кнопок -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span></span>
  </button>
  <ul>
    ...
  </ul>
</div>

Вариант списка сверху

Создайте меню, элементы которого поднимаются вверх, прибавив .dropup к родительскому контейнеру.

<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span></span>
    <span>Toggle Dropdown</span>
  </button>
  <ul>
    <!-- Ссылки выпадающего меню -->
  </ul>
</div>

Продлить элементов управления формы, добавляя текст или кнопки до, после или с обеих сторон в любом текстовом <input>. Используйте .input-group С .input-group-addon или .input-group-btn добавлять или добавлять элементы к одному .form-control.

Текстовое <input> только

В данном случае избегайте использования элементов <select>, поскольку они в полной мере не могут стилизоваться в WebKit браузерах.

Избегайте использования <textarea> элементы вот как их rows атрибута не будут уважать в некоторых случаях.

Подсказки и информеры в группе ввода требуют специальных настроек

Когда используете подсказки или информеры (popovers) на элементах в пределах .input-group, вам необходимо определить параметр container: 'body', для избежания нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов при вызове подсказок или информеров).

Не смешивайте с другими компонентами

Не смешивайте группы форм или классы столбцов разметки непосредственно с группами ввода. Вместо этого, внедрите группу ввода внутри группы формы или связанной разметки с элементом.

Всегда добавляйте ярлыки

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

Точный метод будет использоваться (видимых <label> элементы <label> элементы скрыты с помощью .sr-only класса, или использование aria-label, aria-labelledby, aria-describedby, title или placeholder атрибут) и какие дополнительные сведения должны быть доведены будет варьироваться в зависимости от типа интерфейса виджета вы реализуете. Примеры в этом разделе представлено несколько рекомендаций, конкретных подходов.

Основной пример

Поместите дополнительный компонент или кнопку по обе стороны от ввода. Вы также можете разместить один с обеих сторон.

Мы не поддерживаем несколько дополнений (.input-group-addon или .input-group-btn) на одной стороне.

Мы не поддерживаем несколько form-control в одной группе ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span>@example.com</span>
</div>

<div>
  <span>$</span>
  <input type="text" aria-label="Amount (to the nearest dollar)">
  <span>.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div>
  <span>https://example.com/users/</span>
  <input type="text" aria-describedby="basic-addon3">
</div>

Изменение размера

Разместите один приложение или одну кнопку с любой стороны от формы ввода. Вы также можете разместить их по обе стороны от формы ввода.

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Дополнение для флажков и переключателей

Поместите любые опции галочек (checkbox) или переключателей в рамках дополнения формы ввода вместо текста.

<div>
  <div>
    <div>
      <span>
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio" aria-label="...">
      </span>
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

Дополнение для кнопок

Кнопки в группах ввода немного отличаются и требуют один дополнительный уровень вложенности. Вместо .input-group-addon, вы должны будете использовать .input-group-btn. Это необходимо из-за стилей браузера по умолчанию, которые не могут быть переопределены.

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text" placeholder="Search for...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text" placeholder="Search for...">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

Кнопки с выпадающим меню

<div>
  <div>
    <div>
      <div>
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span></span></button>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-группа -->
      <input type="text" aria-label="...">
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text" aria-label="...">
      <div>
        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span></span></button>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-группа -->
    </div><!-- /input-группа -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.строки -->

Сегментированные кнопки

<div>
  <div>
    <!-- Кнопка и выпадающее меню -->
  </div>
  <input type="text" aria-label="...">
</div>

<div>
  <input type="text" aria-label="...">
  <div>
    <!-- Кнопка и выпадающее меню -->
  </div>
</div>

Несколько кнопок

В то время как вы можете иметь только одно добавить-на одной стороне, вы можете иметь несколько кнопок внутри один .input-group-btn.

<div>
  <div>
    <!-- Кнопки -->
  </div>
  <input type="text" aria-label="...">
</div>

<div>
  <input type="text" aria-label="...">
  <div>
    <!-- Кнопки -->
  </div>
</div>

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

Используя навигации на вкладке панели Требуется JavaScript вкладок плагина

Для вкладки с tabbable местах, вы должны использовать вкладки JavaScript плагин. Разметка также потребует дополнительных role и атрибуты арии – см. плагина пример разметки Для получения дополнительной информации.

Сделать навигации используется как навигация работает

Если вы используете navs для обеспечения навигации, обязательно добавить role="navigation" для наиболее логичным родительский контейнер <ul> или обернуть <nav> элемент во всей навигации. Не добавляйте в роли <ul> сама, так как это мешает ей быть объявлен реальный список вспомогательных технологий.

Вкладки

Заметьте, что класс .nav-tabs требует базового класса .nav.

<ul>
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Навигационные кнопки

Используйте тот же HTML, но используйте .nav-pills вместо .nav-tabs:

<ul>
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Навигационные кнопки также доступны в вертикальной сборке. Просто добавьте .nav-stacked.

<ul>
  ...
</ul>

Выравнивание по ширине навигаций

При помощи .nav-justified можно легко создавать вкладки или кнопки, одинаковой ширины с их родительскими элементами, для более широких экранов по 768px. На меньших экранах, навигационные ссылки будут состоять.

В настоящее время обосновано навигации навигация ссылки не поддерживаются.

WebKit и адаптивные навигационные меню, выровнены по ширине

Как на v9.1.2, Сафари экспонаты ошибка, в которой изменение размера вашего браузера горизонтально вызывает рендеринг ошибок в обоснованных навигаций которые удаляются при обновлении. Эта ошибка также показано в пример justified nav.

<ul>
  ...
</ul>
<ul>
  ...
</ul>

Заблокированные ссылки

В любых навигационных компонентов (вкладок, кнопок, списков) можно добавить .disabled для отображения в них серых ссылок и отсутствия эффектов при наведении курсора.

Функциональности ссылки не изменны

Этот класс меняет лишь отражение <a>, но не его функциональность. Для блокировки функциональности ссылки используйте JavaScript.

<ul>
  ...
  <li role="presentation"><a href="#">Disabled link</a></li>
  ...
</ul>

Использование выпадающего меню

Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.

Вкладки с выпадающем меню

<ul>
  ...
  <li role="presentation">
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационные кнопки с выпадающем меню

<ul>
  ...
  <li role="presentation">
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

Навигационная панель по умолчанию

Навигационные панели являются адаптивными цель-компонентами, которые служат в качестве навигационных заголовков для приложений или сайтов. При просмотре на мобильных устройствах они сворачиваются (и могут переключаться), а при увеличении ширины смотрового окна принимают горизонтальную форму.

В настоящее время обосновано навигации навигация ссылки не поддерживаются.

Переполнение контента

Поскольку Bootstrap не знает сколько места содержимого в ваших потребностей NavBar, вы можете столкнуться с проблемами заключения содержимого во втором ряду. Чтобы решить эту проблему, вы можете:

  1. Уменьшите количество или ширину NavBar пунктов.
  2. Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит.
  3. Измените точку, в которой navbar переключается между сворачиванием и горизонтальным режимом. Настройте, изменив @grid-float-breakpoint или добавьте свои настройки для медиа запросов.
Требуется JavaScript плагин

Если JavaScript отключен и ширина окна станет достаточно узкой, для чтобы навигационная панель свернулась, то тогда не будет возможности развернуть навигационную панель и просмотреть ее содержимое с классом .navbar-collapse.

Адаптивная навигационная панель в вашей версии Bootstrap требует плагина collapse.

Изменение сворачивания мобильных navbar

NavBar коллапсирует в вертикальной мобильного зрения если видовой экран уже, чем @grid-float-breakpoint, и расширяется в горизонтальной немобильного зрения если видовой экран, по крайней мере @grid-float-breakpoint в ширину. Эта переменная в менее источника контролировать, когда NavBar разрушается /расширяется. Значение по умолчанию 768px (the smallest «small» or «tablet» screen).

Доступность навигационных панелей

Будьте уверены, чтобы использовать <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

<nav>
  <div>
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#">Brand</a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div>
      <ul>
        <li><a href="#">Link <span>(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form>
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Submit</button>
      </form>
      <ul>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a>
          <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Логотип

Заменить бренд navbar с вашего собственного изображения можно меняя текст тэга <img>. .navbar-brand имеет свой внутренний отступ и высоту, возможно, придется поменять некоторые CSS-свойства в зависимости от вашего изображения.

<nav>
  <div>
    <div>
      <a href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Формы

Разместите содержимое формы в пределах .navbar-form для правильного вертикального выравнивания, и для обеспечения функцией свертывания на узких смотровых окнах. Используйте параметры выравнивания, чтобы решить, где будет находиться содержимое в пределах навигационной панели.

Как ведущий, класс .navbar-form имеет большинство своего кода совместно с .form-inline через mixin. Некоторые элементы управления форм, таких как группы ввода, могут потребовать фиксированной для правильного отображения в navbar.

<form role="search">
  <div>
    <input type="text" placeholder="Search">
  </div>
  <button type="submit">Submit</button>
</form>
Предостережения для мобильных устройств

Есть некоторые предостережения относительно использования элементов управления формы в неподвижных элементах на мобильных устройствах. Смотрите наши документы поддержки браузера.

Всегда добавляйте ярлыки

Программы чтения с экрана будут иметь проблемы со своими формами если Вы не включите метки для каждого входа. Для этих встроенных форм, вы можете спрятать ярлыки, используя .sr-only класс. Существуют и другие альтернативные способы предоставления метку для вспомогательных технологий, таких как aria-label, aria-labelledby или title атрибута. Если ни один из них присутствует, программы чтения с экрана могут прибегнуть к помощи атрибута placeholder, Если присутствует, но учтите, что использование placeholder в качестве замены для других методов маркировки не рекомендуется.

Кнопки

Добавьте класс .navbar-btn к элементам <button>, которые не находятся в <form> для вертикального их центрирование в навигационных панелях.

Таблицы · Bootstrap на русском

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

Примеры

Используя самые элементарные таблица наценки, вот как .table на основе таблицы смотри на Bootstrap.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с .table-inverse.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Зебра»

Используйте .table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Рамочная таблица

Добавить .table-bordered для границ со всех сторон таблица и клеток.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить .table-hover для включения наведение состояние О таблица строк в <tbody>.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс .table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

Класс Описание
.table-active Применяет цвет при наведении на конкретную строку или ячейку
.table-success Указывает на успешное или позитивное действие
.table-info Указывает на нейтральные информативные изменения или действия
.table-warning Указывает на предупреждения, которые могут потребовать внимания
.table-danger Указывает на опасное или потенциально негативное действие
# Заголовок столбца Заголовок столбца Заголовок столбца
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Регулярное таблица вариантов предпосылки не доступно с обратным таблица, однако, вы можете использовать текст или фона утилит для достижения подобных стилей.

# Заголовок столбца Заголовок столбца Заголовок столбца
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Передать смысл для ассистивных технологий

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

Адаптивные таблицы

Сделать таблицу адаптивной можно просто с помощью добавления класса .table-responsive к .table, благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.

Вертикальной подрезки/усечения

Адаптивный таблицы использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

# Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div>
  <table>
    ...
  </table>
</div>

Обратный стиль

Превратите традиционную таблицу на их стороне с помощью table-reflow. При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

# Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Типографика. Содержание · Bootstrap. Версия v4.1.3

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

Глобальные настройки

Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.

  • Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
  • Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
  • Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
  • Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover.
  • Используйте $body-bg для задания background-color для <body> (по умолчанию стоит #fff).

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Все HTML-заголовки (<h2><h6>) доступны в BS4.

Заголовок Пример

<h2></h2>

h2. Заголовок bootstrap

<h3></h3>

h3. Заголовок bootstrap

<h4></h4>

h4. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h6></h6>

h6. Заголовок bootstrap
<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>

Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2.h6 также доступны.

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>

Настройка заголовков

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

Заголовок отображения С выцветшим вторичным текстом

<h4>
  Заголовок отображения
  <small>С выцветшим вторичным текстом</small>
</h4>

«Заголовок дисплея»

Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.

Display 1
Display 2
Display 3
Display 4
<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тэг-выделитель для подсветки текста.

Удаленный текст.

Зачеркнутый.

Строка — дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>

Классы .mark и .small дают стили, одинаковые с тэгами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.

Также, свободно пользуйтесь тэгами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote> для создания цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Наименование источника

Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>

Выравнивание

Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Блочные

Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Описание и выравнивание

Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсом.

Списки описания
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Вложенность
Список вложенных определений
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt>Euismod</dt>
  <dd>
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Отзывчивая «типографика»

Этот термин означает масштабирование текста и компонентов простой регулировкой коренного элемента font-size в медиа-запросах. Bootstrap не делает этого по умолчанию, но вы можете легко сделать это сами.

Вот пример. Выбирайте какие угодно font-size и медиа-запросы.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}
Выпадающие элементы. Компоненты · Bootstrap. Версия v4.1.3

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

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

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

Предупреждение
<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие элементы кнопок с разделенными зонами

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

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная Toggle Dropdown Вторичная Toggle Dropdown Успех Toggle Dropdown Предупреждение Toggle Dropdown Опасность Toggle Dropdown
<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

Направления

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

Split dropup Toggle Dropdown
<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

Split dropright Toggle Dropdright
<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text. Свободно стилизуйте их обычным CSS.

<div>
  <span>Dropdown item text</span>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

Активные элементы меню

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Текст меню

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

<div>
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p>
    And this is more example text.
  </p>
</div>

Формы меню

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>
<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div aria-labelledby="dropdownMenuOffset">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
    </div>
  </div>
  <div>
    <button type="button">Reference</button>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span>Toggle Dropdown</span>
    </button>
    <div aria-labelledby="dropdownMenuReference">
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown" still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название Тип По умолч. Описание
offset number | string | function 0 Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip boolean true Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary string | element ‘scrollParent’ Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.
reference string | element ‘toggle’ Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js’s referenceObject docs.
display string dynamic | static By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод Описание
$().dropdown('toggle') Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown('update') Обновляет позицию «выпадения» элемента.
$().dropdown('dispose') Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие Описание
show.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.dropdown Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})
90000 CSS · Bootstrap 90001 90002 Get the lowdown on the key pieces of Bootstrap’s infrastructure, including our approach to better, faster, stronger web development. 90003 90004 HTML5 doctype 90005 90002 Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. 90003 90008 90009 … 90010 90011 90004 Mobile first 90005 90002 With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework.With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, 90015 Bootstrap is mobile first 90016. Mobile first styles can be found throughout the entire library instead of in separate files. 90003 90002 To ensure proper rendering and touch zooming, 90015 add the viewport meta tag 90016 to your 90021 90010. 90003 90008 90009 90010 90011 90002 You can disable zooming capabilities on mobile devices by adding 90021 user-scalable = no 90010 to the viewport meta tag.This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we do not recommend this on every site, so use caution! 90003 90008 90009 90010 90011 90004 Typography and links 90005 90002 Bootstrap sets basic global display, typography, and link styles. Specifically, we: 90003 90040 90041 Set 90021 background-color: #fff; 90010 on the 90021 body 90010 90046 90041 Use the 90021 @ font-family-base 90010, 90021 @ font-size-base 90010, and 90021 @ line-height-base 90010 attributes as our typographic base 90046 90041 Set the global link color via 90021 @ link-color 90010 and apply link underlines only on 90021: hover 90010 90046 90061 90002 These styles can be found within 90021 scaffolding.less 90010. 90003 90004 Normalize.css 90005 90002 For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal. 90003 90004 Containers 90005 90002 Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to 90021 padding 90010 and more, neither container is nestable. 90003 90002 Use 90021 .container 90010 for a responsive fixed width container.90003 90008 90009
… 90010 90011 90002 Use 90021 .container-fluid 90010 for a full width container, spanning the entire width of your viewport. 90003 90008 90009
… 90010 90011 90002 Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.90003 90004 Introduction 90005 90002 Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works: 90003 90040 90041 Rows must be placed within a 90021 .container 90010 (fixed-width) or 90021 .container-fluid 90010 (full-width) for proper alignment and padding. 90046 90041 Use rows to create horizontal groups of columns. 90046 90041 Content should be placed within columns, and only columns may be immediate children of rows.90046 90041 Predefined grid classes like 90021 .row 90010 and 90021 .col-xs-4 90010 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. 90046 90041 Columns create gutters (gaps between column content) via 90021 padding 90010. That padding is offset in rows for the first and last column via negative margin on 90021 .row 90010 s. 90046 90041 The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.90046 90041 Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three 90021 .col-xs-4 90010. 90046 90041 If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. 90046 90041 Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any 90021 .col-md- * 90010 class to an element will not only affect its styling on medium devices but also on large devices if a 90021 .col-lg- * 90010 class is not present. 90046 90061 90002 Look to the examples for applying these principles to your code. 90003 90002 We use the following media queries in our Less files to create the key breakpoints in our grid system. 90003 90008 90141 / * Extra small devices (phones, less than 768px) * / / * No media query since this is the default in Bootstrap * / / * Small devices (tablets, 768px and up) * / @media (min-width: @ screen-sm-min) {…} / * Medium devices (desktops, 992px and up) * / @media (min-width: @ screen-md-min) {…} / * Large devices (large desktops, 1200px and up) * / @media (min-width: @ screen-lg-min) {…} 90010 90011 90002 We occasionally expand on these media queries to include a 90021 max-width 90010 to limit CSS to a narrower set of devices. 90003 90008 90141 @media (max-width: @ screen-xs-max) {…} @media (min-width: @ screen-sm-min) and (max-width: @ screen-sm-max) {…} @media (min-width: @ screen-md-min) and (max-width: @ screen-md-max) {…} @media (min-width: @ screen-lg-min) {…} 90010 90011 90004 Grid options 90005 90002 See how aspects of the Bootstrap grid system work across multiple devices with a handy table. 90003 90156 90157 90158 90159 90160 Extra small devices 90161 Phones (<768px) 90162 90163 90160 Small devices 90161 Tablets (≥768px) 90162 90163 90160 Medium devices 90161 Desktops (≥992px) 90162 90163 90160 Large devices 90161 Desktops (≥1200px) 90162 90163 90176 90177 90178 90158 90180 Grid behavior 90163 90182 Horizontal at all times 90183 90184 Collapsed to start, horizontal above breakpoints 90183 90176 90158 90180 Container width 90163 90182 None (auto) 90183 90182 750px 90183 90182 970px 90183 90182 1170px 90183 90176 90158 90180 Class prefix 90163 90182 90021.col-xs- 90010 90183 90182 90021 .col-sm- 90010 90183 90182 90021 .col-md- 90010 90183 90182 90021 .col-lg- 90010 90183 90176 90158 90180 # of columns 90163 90222 12 90 183 90176 90158 90180 Column width 90163 90182 Auto 90183 90182 ~ 62px 90183 90182 ~ 81px 90183 90182 ~ 97px 90183 90176 90158 90180 Gutter width 90163 90222 30px (15px on each side of a column) 90183 90176 90158 90180 Nestable 90163 90222 Yes 90183 90176 90158 90180 Offsets 90163 90222 Yes 90183 90176 90158 90180 Column ordering 90163 90222 Yes 90183 90176 90261 90262 90004 Example: Stacked-to-horizontal 90005 90002 Using a single set of 90021.col-md- * 90010 grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any 90021 .row 90010. 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002.col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-4 90003 90002 .col-md-4 90003 90002 .col-md-4 90003 90008 90009
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1 <90010 90011.90000 Bootstrap CSS Helper Classes Reference 90001 90002 90003 Text 90004 90005 Add meaning through text-colors with the classes below. Links will darken on hover: 90006 90007 90008 90009 Class 90010 90009 Description 90010 90009 Example 90010 90015 90008 90017 .text-muted 90018 90017 Text styled with class "text-muted" 90018 90017 Try it 90018 90015 90008 90017.text-primary 90018 90017 Text styled with class "text-primary" 90018 90017 Try it 90018 90015 90008 90017 .text-success 90018 90017 Text styled with class "text-success" 90018 90017 Try it 90018 90015 90008 90017 .text-info 90018 90017 Text styled with class "text-info" 90018 90017 Try it 90018 90015 90008 90017 .text-warning 90018 90017 Text styled with class "text-warning" 90018 90017 Try it 90018 90015 90008 90017.text-danger 90018 90017 Text styled with class "text-danger" 90018 90017 Try it 90018 90015 90064 90003 Background 90004 90005 Add meaning through background-colors with the classes below. Links will darken on hover just like text classes: 90006 90007 90008 90009 Class 90010 90009 Description 90010 90009 Example 90010 90015 90008 90017 .bg-primary 90018 90017 Table cell is styled with class "bg-primary" 90018 90017 Try it 90018 90015 90008 90017.bg-success 90018 90017 Table cell is styled with class "bg-success" 90018 90017 Try it 90018 90015 90008 90017 .bg-info 90018 90017 Table cell is styled with class "bg-info" 90018 90017 Try it 90018 90015 90008 90017 .bg-warning 90018 90017 Table cell is styled with class "bg-warning" 90018 90017 Try it 90018 90015 90008 90017 .bg-danger 90018 90017 Table cell is styled with class "bg-danger" 90018 90017 Try it 90018 90015 90064 90003 Other 90004 90007 90008 90009 Class 90010 90009 Description 90010 90009 Example 90010 90015 90008 90017.pull-left 90018 90017 Floats an element to the left 90018 90017 Try it 90018 90015 90008 90017 .pull-right 90018 90017 Floats an element to the right 90018 90017 Try it 90018 90015 90008 90017 .center-block 90018 90017 Sets an element to display: block with margin-right: auto and margin-left: auto 90018 90017 Try it 90018 90015 90008 90017 .clearfix 90018 90017 Clears floats 90018 90017 Try it 90018 90015 90008 90017.show 90018 90017 Forces an element to be shown (display: block) 90018 90017 Try it 90018 90015 90008 90017 .hidden 90018 90017 Forces an element to be hidden (display: none) 90018 90017 Try it 90018 90015 90008 90017 .invisible 90018 90017 Forces an element to be invisible (visibility: hidden). Will take up space on page even though it is invisible 90018 90017 Try it 90018 90015 90008 90017.sr-only 90018 90017 Hides an element to all devices except screen readers 90018 90017 Try it 90018 90015 90008 90017 .sr-only-focusable 90018 90017 Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) 90018 90017 Try it 90018 90015 90008 90017 .text-hide 90018 90017 Helps replace an element's text content with a background image 90018 90017 Try it 90018 90015 90008 90017.close 90018 90017 Indicates a close icon 90018 90017 Try it 90018 90015 90008 90017 .caret 90018 90017 Indicates dropdown functionality (will reverse automatically in dropup menus) 90018 90017 Try it 90018 90015 90064 90002 90002 90003 Responsive Utilities 90004 90005 These classes are used to show and / or hide content by device via media queries. 90006 90005 Use one or a combination of the available classes for toggling content across viewport breakpoints: 90006 90007 90236 90008 90009 Classes 90010 90009 Extra small devices 90241 Phones (<768px) 90242 90010 90009 Small devices 90241 Tablets (≥768px) 90242 90010 90009 Medium devices 90241 Desktops (≥992px) 90242 90010 90009 Large devices 90241 Desktops (≥1200px) 90242 90010 90015 90257 90258 90008 90260.visible-xs- * 90010 90017 Visible 90018 90017 Hidden 90018 90017 Hidden 90018 90017 Hidden 90018 90015 90008 90260 .visible-sm- * 90010 90017 Hidden 90018 90017 Visible 90018 90017 Hidden 90018 90017 Hidden 90018 90015 90008 90260 .visible-md- * 90010 90017 Hidden 90018 90017 Hidden 90018 90017 Visible 90018 90017 Hidden 90018 90015 90008 90260.visible-lg- * 90010 90017 Hidden 90018 90017 Hidden 90018 90017 Hidden 90018 90017 Visible 90018 90015 90307 90258 90008 90260 .hidden-xs 90010 90017 Hidden 90018 90017 Visible 90018 90017 Visible 90018 90017 Visible 90018 90015 90008 90260 .hidden-sm 90010 90017 Visible 90018 90017 Hidden 90018 90017 Visible 90018 90017 Visible 90018 90015 90008 90260.hidden-md 90010 90017 Visible 90018 90017 Visible 90018 90017 Hidden 90018 90017 Visible 90018 90015 90008 90260 .hidden-lg 90010 90017 Visible 90018 90017 Visible 90018 90017 Visible 90018 90017 Hidden 90018 90015 90307 90064 90003 Hidden 90004 90005 Hide elements depending on screen size: 90006 90363 Example 90364 90005

Example 90366

Resize this page to see how the text below changes: 90366

This text is hidden on an EXTRA SMALL screen. 90366

This text is hidden on a SMALL screen. 90366

This is text hidden on a MEDIUM screen. 90366

This is text hidden on a LARGE screen . 90006 90005 Result: 90006 90003 Example 90004 90005 Resize this page to see how the text below changes: 90006 90366 Try it Yourself » 90005 As of v3.2.0, the 90380 .visible — * — * 90381 classes for come in three variations, one for each CSS 90380 display 90381 property value: 90006 90007 90236 90008 90009 Group of classes 90010 90009 CSS display 90010 90015 90257 90258 90008 90260 visible — * — block 90010 90017 display: block; 90018 90015 90008 90260.visible — * — inline 90010 90017 display: inline; 90018 90015 90008 90260 .visible — * — inline-block 90010 90017 display: inline-block; 90018 90015 90307 90064 90005 E.g. for small (90380 sm 90381) screens, the available 90380 .visible — * — * 90381 classes are: 90380 .visible-sm-block 90381, 90380 .visible-sm-inline 90381, and 90380 .visible-sm-inline-block 90381. 90006 90005 The classes 90380.visible-xs 90381, 90380 .visible-sm 90381, 90380 .visible-md 90381, and 90380 .visible-lg 90381 are 90436 deprecated as of v3.2.0 90437. 90006 90363 Example 90364 90005

Example 90366

Resize this page to see how the text below changes: 90366

This text is shown only on an EXTRA SMALL screen. 90366

This text is shown only on a SMALL screen. 90366

This text is shown only on a MEDIUM screen. 90366

This text is shown only on a LARGE screen. 90006 90005 Result: 90006 90003 Example 90004 90005 Resize this page to see how the text below changes: 90006 90454 This text is shown only on an EXTRA SMALL screen. 90455 90454 This text is shown only on a SMALL screen. 90455 90454 This text is shown only on a MEDIUM screen. 90455 90454 This text is shown only on a LARGE screen. 90455 90366 Try it Yourself » 90366 .90000 Bootstrap 3 Tutorial 90001 90002 90003 Try it Yourself Examples 90004 90005 This Bootstrap tutorial contains hundreds of Bootstrap examples. 90006 90005 With our online editor, you can edit the code, and click on a button to view the result. 90006 90009 Bootstrap Example 90010 90011 My First Bootstrap Page 90011 Resize this responsive page to see the effect! 90005
90011
90011
90011

Column 1 90011

Lorem ipsum dolor.. 90011 90011

90011

Column 2 90011

Lorem ipsum dolor .. 90011 90011

90011

Column 3 90011

Lorem ipsum dolor .. 90011 90011 90011 90006 Try it Yourself » 90005 Click on the «Try it Yourself» button to see how it works. 90006 90002 90002 90003 Bootstrap Exercises 90004 90002 90003 Bootstrap Quiz Test 90004 90005 Test your Bootstrap skills at W3Schools! 90006 90005 Start Bootstrap Quiz! 90006 90002 90003 Bootstrap References 90004 90005 At W3Schools you will find a complete Bootstrap reference of all CSS classes, Components, and JavaScript plugins — all with «Try it Yourself» examples: 90006 90002 90003 Bootstrap Themes / Templates 90004 90005 We have made some Bootstrap Templates you can play around with.They are completely free to use: 90006 90002 90003 Bootstrap 3 vs. Bootstrap 4 90004 90005 Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness. 90006 90005 Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported. 90006 90005 90061 If you require IE8-9 support, use Bootstrap 3. 90062 It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes.However, no new features will be added to it. 90006 Go To Bootstrap 4 » 90002 90003 Did You Know? 90004 90005 W3.CSS is an excellent alternative to Bootstrap. 90006 90005 W3.CSS is smaller, faster, and easier to use. 90006 90005 If you want to learn W3.CSS, go to our W3.CSS Tutorial. 90006 90011 .90000 CSS · Bootstrap 90001 90002 Get the lowdown on the key pieces of Bootstrap’s infrastructure, including our approach to better, faster, stronger web development. 90003 90004 HTML5 doctype 90005 90002 Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. 90003 90008 90009 … 90010 90011 90004 Mobile first 90005 90002 With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework.With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, 90015 Bootstrap is mobile first 90016. Mobile first styles can be found throughout the entire library instead of in separate files. 90003 90002 To ensure proper rendering and touch zooming, 90015 add the viewport meta tag 90016 to your 90021 90010. 90003 90008 90009 90010 90011 90002 You can disable zooming capabilities on mobile devices by adding 90021 user-scalable = no 90010 to the viewport meta tag.This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we do not recommend this on every site, so use caution! 90003 90008 90009 90010 90011 90004 Typography and links 90005 90002 Bootstrap sets basic global display, typography, and link styles. Specifically, we: 90003 90040 90041 Set 90021 background-color: #fff; 90010 on the 90021 body 90010 90046 90041 Use the 90021 @ font-family-base 90010, 90021 @ font-size-base 90010, and 90021 @ line-height-base 90010 attributes as our typographic base 90046 90041 Set the global link color via 90021 @ link-color 90010 and apply link underlines only on 90021: hover 90010 90046 90061 90002 These styles can be found within 90021 scaffolding.less 90010. 90003 90004 Normalize.css 90005 90002 For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal. 90003 90004 Containers 90005 90002 Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to 90021 padding 90010 and more, neither container is nestable. 90003 90002 Use 90021 .container 90010 for a responsive fixed width container.90003 90008 90009

… 90010 90011 90002 Use 90021 .container-fluid 90010 for a full width container, spanning the entire width of your viewport. 90003 90008 90009
… 90010 90011 90002 Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.90003 90004 Introduction 90005 90002 Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works: 90003 90040 90041 Rows must be placed within a 90021 .container 90010 (fixed-width) or 90021 .container-fluid 90010 (full-width) for proper alignment and padding. 90046 90041 Use rows to create horizontal groups of columns. 90046 90041 Content should be placed within columns, and only columns may be immediate children of rows.90046 90041 Predefined grid classes like 90021 .row 90010 and 90021 .col-xs-4 90010 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. 90046 90041 Columns create gutters (gaps between column content) via 90021 padding 90010. That padding is offset in rows for the first and last column via negative margin on 90021 .row 90010 s. 90046 90041 The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.90046 90041 Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three 90021 .col-xs-4 90010. 90046 90041 If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. 90046 90041 Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any 90021 .col-md- * 90010 class to an element will not only affect its styling on medium devices but also on large devices if a 90021 .col-lg- * 90010 class is not present. 90046 90061 90002 Look to the examples for applying these principles to your code. 90003 90002 We use the following media queries in our Less files to create the key breakpoints in our grid system. 90003 90008 90141 / * Extra small devices (phones, less than 768px) * / / * No media query since this is the default in Bootstrap * / / * Small devices (tablets, 768px and up) * / @media (min-width: @ screen-sm-min) {…} / * Medium devices (desktops, 992px and up) * / @media (min-width: @ screen-md-min) {…} / * Large devices (large desktops, 1200px and up) * / @media (min-width: @ screen-lg-min) {…} 90010 90011 90002 We occasionally expand on these media queries to include a 90021 max-width 90010 to limit CSS to a narrower set of devices. 90003 90008 90141 @media (max-width: @ screen-xs-max) {…} @media (min-width: @ screen-sm-min) and (max-width: @ screen-sm-max) {…} @media (min-width: @ screen-md-min) and (max-width: @ screen-md-max) {…} @media (min-width: @ screen-lg-min) {…} 90010 90011 90004 Grid options 90005 90002 See how aspects of the Bootstrap grid system work across multiple devices with a handy table. 90003 90156 90157 90158 90159 90160 Extra small devices 90161 Phones (<768px) 90162 90163 90160 Small devices 90161 Tablets (≥768px) 90162 90163 90160 Medium devices 90161 Desktops (≥992px) 90162 90163 90160 Large devices 90161 Desktops (≥1200px) 90162 90163 90176 90177 90178 90158 90180 Grid behavior 90163 90182 Horizontal at all times 90183 90184 Collapsed to start, horizontal above breakpoints 90183 90176 90158 90180 Container width 90163 90182 None (auto) 90183 90182 750px 90183 90182 970px 90183 90182 1170px 90183 90176 90158 90180 Class prefix 90163 90182 90021.col-xs- 90010 90183 90182 90021 .col-sm- 90010 90183 90182 90021 .col-md- 90010 90183 90182 90021 .col-lg- 90010 90183 90176 90158 90180 # of columns 90163 90222 12 90183 90176 90158 90180 Column width 90163 90182 Auto 90183 90182 ~ 62px 90183 90182 ~ 81px 90183 90182 ~ 97px 90183 90176 90158 90180 Gutter width 90163 90222 30px (15px on each side of a column) 90183 90176 90158 90180 Nestable 90163 90222 Yes 90183 90176 90158 90180 Offsets 90163 90222 Yes 90183 90176 90158 90180 Column ordering 90163 90222 Yes 90183 90176 90261 90262 90004 Example: Stacked-to-horizontal 90005 90002 Using a single set of 90021.col-md- * 90010 grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any 90021 .row 90010. 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-1 90003 90002.col-md-1 90003 90002 .col-md-1 90003 90002 .col-md-4 90003 90002 .col-md-4 90003 90002 .col-md-4 90003 90008 90009
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 90010 90011 90004 Example: Fluid container 90005 90002 Turn any fixed-width grid layout into a full-width layout by changing your outermost 90021.container 90010 to 90021 .container-fluid 90010. 90003 90008 90009
… 90010 90011 90004 Example: Mobile and desktop 90005 90002 Do not want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding 90021 .col-xs- * 90010 90021 .col-md- * 90010 to your columns. See the example below for a better idea of ​​how it all works. 90003 90002 .col-xs-12 .col-md-8 90003 90002 .col-xs-6.col-md-4 90003 90002 .col-xs-6 .col-md-4 90003 90002 .col-xs-6 .col-md-4 90003 90002 .col-xs-6 .col-md-4 90003 90008 90336 90011.

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

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