Bootstrap элементы: Компоненты · Bootstrap на русском - Блог сумасшедшего сисадмина

Содержание

Компоненты · Bootstrap на русском

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

Включает в себя более 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

<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, вы можете столкнуться с проблемами заключения содержимого во втором ряду. Чтобы решить эту проблему, вы можете:

Уменьшите количество или ширину NavBar пунктов.
Скройте определенные элементы NavBar в определенных размерах экрана с помощью классов адаптивных утилит.
Измените точку, в которой 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> для вертикального их центрирование в навигационных панелях.

<button type="button">Sign in</button>

Специфическая особенность использования

Как и стандартные классы кнопок, .navbar-btn может использоваться в элементах <a> и <input>. Тем не менее, ни один .navbar-btn или же стандартные классы кнопки не должны использоваться в элементах <a> внутри .navbar-nav.

Текст

Заключите строку текста в элемент с классом .navbar-text, обычно с тегом <p>, для правильного выравнивания и цвета.

<p>Signed in as Mark Otto</p>

Не контекстные ссылки

Люди, которые используют стандартные ссылки в пределах необычных компонентов навигационных панелей, могут применять класс .navbar-link для вставки правильных цветов в навигационных панелях по умолчанию и инвертированных навигационных панелях.

<p>Signed in as <a href="#">Mark Otto</a></p>

Компонент выравнивания

Выравнивайте навигационные ссылки, формы, кнопки, текст, используя вспомогательные классы . navbar-left или .navbar-right. Оба классы добавляют CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, вложите их в отдельный <ul> с соответствующим вспомогательным классом.

Эти классы являются смешанной версией классов .pull-left и .pull-right, но они предназначены для медиа запросов, чтобы упростить обработку компонентов навигационных панелей для различных размеров устройств.

Правое выравнивание нескольких компонентов

В настоящее время Navbars имеют ограничение с несколькими .navbar-right классы. Правильно пространство, мы используем отрицательные отступ на последний .navbar-right элемент. При наличии нескольких элементов с использованием этого класса, эти поля не работает, как предполагалось.

Мы вернемся к этому, когда перепишем этот компонент в v4.

Фиксация вверху

Добавьте . navbar-fixed-top и подключите .container или .container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

<nav>
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

Фиксированная навигационная панель будет накладываться на остальной контент вашей страницы, пока вы не добавите padding в верхней части <body>. Попробуйте установить свои собственные значения, или используйте фрагмент кода ниже. Справка: По умолчанию, навигационная панель имеет высоту 50px.

body { padding-top: 70px; }

Убедитесь, что это включено после основного Bootstrap CSS.

Фиксация внизу

Добавьте .navbar-fixed-bottom и подключите .container или . container-fluid для центровки и внутренних отступлений содержимого навигационной панели.

<nav>
  <div>
    ...
  </div>
</nav>

Необходимость установления padding для body

Фиксированная навигационная панель будет налагаться на остальные вашего содержимого, пока вы не добавите padding в нижней части <body>. Попробуйте установить свои собственные значения, или используйте фрагмент кода ниже. Справка: По умолчанию, навигационная панель имеет высоту 50px.

body { padding-bottom: 70px; }

Убедитесь, что это включено после основного Bootstrap CSS.

Статический верх

Создайте навигационную панель на полную ширину, которая будет прокручиваться вместе со страницей, добавив .navbar-static-top и включите . container или .container-fluid, для центровки и внутренних отступлений содержимого навигационной панели.

В отличие от классов .navbar-fixed-*, вам не нужно изменять любой body и #2#.

<nav>
  <div>
    ...
  </div>
</nav>

Инвертированная навигационная панель

Изменить внешний вид панели навигации, добавив .navbar-inverse.

<nav>
  ...
</nav>

Установите текущую страницу расположение в пределах навигационной иерархии.

Разделители автоматически добавляются в CSS через :before и content.

<ol>
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li>Data</li>
</ol>

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

Простая нумерация inspired by Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и предоставляет большие кнопки.

<nav aria-label="Page navigation">
  <ul>
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul>
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1 <span>(current)</span></a></li>
    ...
  </ul>
</nav>

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

<nav aria-label="...">
  <ul>
    <li>
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li>
      <span>1 <span>(current)</span></span>
    </li>
    ...
  </ul>
</nav>

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

Есть потребность увеличить или уменьшить блок постраничного вывода? Добавьте .pagination-lg или .pagination-sm для изменения размеров.

<nav aria-label="..."><ul>...</ul></nav>
<nav aria-label="..."><ul>...</ul></nav>
<nav aria-label="..."><ul>...</ul></nav>

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

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

По умолчанию, листание имеет ссылки, выровненные по-центру.

<nav aria-label="...">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Выравнивание ссылок

В качестве альтернативы, вы можете выравнивать каждую ссылку:

<nav aria-label="...">
  <ul>
    <li><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

Листание ссылок также использует базовый вспомогательный класс .disabled.

<nav aria-label="...">
  <ul>
    <li><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Пример

Example heading New

<h4>Example heading <span>New</span></h4>

Доступные варианты

Добавте любой из перечисленных ниже модификаторов классов, чтобы изменить внешний вид меткии.

Default Primary Success Info Warning Danger

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Есть тонна меток?

Оказание проблемы могут возникнуть, когда у вас есть десятки встроенных ярлыков в узком контейнере, каждый из которых содержит свой собственный inline-block элементе (похожая иконка). Способом решить эту проблему является создание display: inline-block;. Для примера, смотрите #13219.

Легко подсветить новые или непрочитанные записи добавив к ссылкам <span>, Bootstrap навигацию, и другое.

<a href="#">Inbox <span>42</span></a>

<button type="button">
  Messages <span>4</span>
</button>

Самосвертывание

Когда нет новых или непрочитанных записей, значки будут просто свернуты (через CSS селектор :empty), при условии отсутствия внутри содержимого.

Кросс-браузерная совместимость

Значки не будут самозгортатись в Internet Explorer 8, потому что им не хватает поддержки селектора :empty.

Адаптация под активные состояния

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

<ul role="tablist">
  <li role="presentation"><a href="#">Home <span>42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span>3</span></a></li>
</ul>

Легкий, гибкий компонент, который можно расширять на весь экран, чтобы продемонстрировать ключевой контент вашего сайта.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div>
  <h2>Hello, world!</h2>
  <p>...</p>
  <p><a href="#" role="button">Learn more</a></p>
</div>

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

<div>
  <div>
    ...
  </div>
</div>

Представляем вам простую оболочку для h2, которая устанавливает соответствующий отступ и сегментирует содержание страницы. В ней можно использовать элемент по умолчанию h2 и small, а также много других компонентов (с дополнительными стилями).

<div>
  <h2>Example page header <small>Subtext for header</small></h2>
</div>

Расширьте систему сетки Bootstrap с помощью компонента эскиза для легкого создания сетки с изображениями, видео, текстом, и так далее.

Если вы ищете как Pinterest-like презентацию эскизов разной высоты и/или ширины, вам потребуется использовать сторонние плагины, такие как Masonry, Isotope или Salvattore.

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

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

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

Настраиваемое содержимое

Добавив немного разметки, можно включать любое содержимое HTML, такой как заголовки, параграфы, или кнопки в середине эскизов.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div>
  <div>
    <div>
      <img src="..." alt="...">
      <div>
        <h4>Thumbnail label</h4>
        <p>...</p>
        <p><a href="#" role="button">Button</a> <a href="#" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Предоставьте контекстные интерактивные замечания для типовых действий пользователей.

Примеры

Для базовых замечаний, оберните любой текст и опциональную кнопку при помощи .alert, и одного из четырех контекстных классов (например, .alert-success).

Без класса по умолчанию

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

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Warning! Better check yourself, you’re not looking too good.

Oh snap! Change a few things up and try submitting again.

<div role="alert">...</div>
<div role="alert">...</div>
<div role="alert">...</div>
<div role="alert">...</div>

Неотстранимое оповещение

Создавайте любые замечания добавив необязательные .alert-dismissible и кнопку закрытия.

Требуется JavaScript alert плагин

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

× Warning! Better check yourself, you’re not looking too good.

<div role="alert">
  <button type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Обеспечьте правильное поведение на всех устройствах

Убедитесь, что используете элемент <button> с атрибутом data-dismiss="alert".

Ссылки в замечаниях

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

<div role="alert">
  <a href="#">...</a>
</div>
<div role="alert">
  <a href="#">...</a>
</div>
<div role="alert">
  <a href="#">...</a>
</div>
<div role="alert">
  <a href="#">...</a>
</div>

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

Кросс-браузерная совместимость

Прогрессбар использует переходы и анимацию CSS3 для обеспечения определенных эффектов. Эти функции не поддерживаются в Internet Explorer 9 и старше, или в старых версиях Firefox. Opera 12 не поддерживает анимации.

Политика защиты содержимого (CSP) Совместимость

Если ваш сайт имеет Политика защиты содержимого (CSP) нельзя style-src 'unsafe-inline', тогда Вы не сможете использовать встроенный style атрибутами установить индикатор ширины, как показано в примерах ниже. Альтернативные методы установки ширины, которые совместимы со строгим ППО включают использование небольшого JavaScript (что наборы element.style.width) или с помощью настраиваемых CSS классов.

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

Прогрессбар по умолчанию.

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete</span>
  </div>
</div>

С меткой

Удалить <span> С .sr-only класс в прогресс бар, чтобы показать видимый процент.

<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

Чтобы убедиться, что текст остается читаемым даже на низком проценте, попробуйте добавить min-width в прогресс-бар.

<div>
  <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">
    2%
  </div>
</div>

Контекстные альтернативы

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

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete (danger)</span>
  </div>
</div>

Полосатый индикатор

Использует градиент, чтобы создать полосатый эффект. Не доступен в IE9 и ниже.

<div>
  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <span>40% Complete (success)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <span>20% Complete</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span>60% Complete (warning)</span>
  </div>
</div>
<div>
  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <span>80% Complete (danger)</span>
  </div>
</div>

Индикатор с анимацией

Добавьте .active к .progress-bar-striped для анимации левой или правой полосатости. Это является недоступным в IE9 и ниже.

<div>
  <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    <span>45% Complete</span>
  </div>
</div>

Сводный индикатор

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

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

<div>
  <div>
    <span>35% Complete (success)</span>
  </div>
  <div>
    <span>20% Complete (warning)</span>
  </div>
  <div>
    <span>10% Complete (danger)</span>
  </div>
</div>

Стилизация абстрактного объекта, для создания различных типов компонентов (таких как комментарии для блога, твиттера, и т.д.), которые со своим изображением выровнены по левому или по правому краю рядом с текстовым содержанием.

Предлагаемое по умолчанию значение медиа отображает медиа объектов (изображений, видео, аудио) слева или справа от содержимого блока.

<div>
  <div>
    <a href="#">
      <img src="..." alt="...">
    </a>
  </div>
  <div>
    <h5>Media heading</h5>
    ...
  </div>
</div>

Классы .pull-left и .pull-right также существует и ранее использовались как часть медиа компонента, но не рекомендуется для использования в качестве «v3».3.0. Они примерно эквивалентны .media-left и .media-right, за исключением того, что .media-right должен быть помещен после .media-body в HTML.

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

<div>
  <div>
    <a href="#">
      <img src="..." alt="...">
    </a>
  </div>
  <div>
    <h5>Middle aligned media</h5>
    ...
  </div>
</div>

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

<ul>
  <li>
    <div>
      <a href="#">
        <img src="..." alt="...">
      </a>
    </div>
    <div>
      <h5>Media heading</h5>
      ...
    </div>
  </li>
</ul>

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

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

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Значки

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

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

<ul>
  <li>
    <span>14</span>
    Cras justo odio
  </li>
</ul>

Связанные элементы

Ссылочные пункты группы списков создаются с помощью тегов <div> вместо пунктов списка (здесь также используется в качестве родительского элемента <ul> вместо #2#). Не нужно дополнительно обертывать каждый пункт родительским элементом.

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Кнопка элементы

Список элементов группы могут быть кнопки вместо элементов списка (это также означает, что родитель <div> вместо <ul>). Нет необходимости для отдельных родителей по каждому элементу. Не использовать стандартный .btn классы здесь.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <button type="button">Cras justo odio</button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button">Vestibulum at eros</button>
</div>

Неактивные пункты

Добавьте .disabled к .list-group-item для серого оттенка сделав неактивным.

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

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

Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанно. Также включают в себя состояние .active.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

<ul>
  <li>Dapibus ac facilisis in</li>
  <li>Cras sit amet nibh libero</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>
<div>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Cras sit amet nibh libero</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Настраиваемое содержимое

Добавляйте практически любой HTML, даже для связанного списка групп, как показано ниже.

<div>
  <a href="#">
    <h5>List group item heading</h5>
    <p>...</p>
  </a>
</div>

Хотя не всегда необходимо, но иногда нужно во что-то упаковать DOM. Для таких случаев, попробуйте компонент панели.

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

По умолчанию, все .panel применяют некоторую базовую рамка (border) и отступы (padding), чтобы вместить содержимое.

<div>
  <div>
    Basic panel example
  </div>
</div>

Панель с заголовком

Легко добавить Заголовок контейнера панель с .panel-heading. Вы также можете включить любой <h2>—<h6> с .panel-title класс, чтобы добавить предварительно оформленный Заголовок. Однако размеры шрифта <h2>—<h6> переопределяются .panel-heading.

Для правильной линии окраски, не забудьте разместить ссылки в заголовках в .panel-title.

Panel heading without title

Panel content

Panel title

Panel content

<div>
  <div>Panel heading without title</div>
  <div>
    Panel content
  </div>
</div>

<div>
  <div>
    <h4>Panel title</h4>
  </div>
  <div>
    Panel content
  </div>
</div>

Оберните кнопки или вторичный текст в .panel-footer. Заметьте, что эта панель с нижним колонтитулом не наследует цвета и рамки (borders), при использовании контекстных вариантов, поскольку они не предназначены, чтобы быть на переднем плане.

<div>
  <div>
    Panel content
  </div>
  <div>Panel footer</div>
</div>

Контекстные альтернативы

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

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

С таблицами

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

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Содержание панели по умолчанию -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Если панель не имеет тела, компоненты переносятся из заголовка панели таблицы корректно.

Panel heading

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div>
  <!-- Содержание панели по умолчанию -->
  <div>Panel heading</div>

  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

С группой списка

Легко включать группы списка в пределы любой панели.

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div>
  <!-- Содержание панели по умолчанию -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- Группа списков -->
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>

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

Правила применяются непосредственно к <iframe>, <embed>, и <video> элементы; необязательно использовать явное класс потомок <object> когда вы хотите, чтобы соответствовать стиль для других атрибутов.

Pro-Совет! Вам не нужно включать frameborder="0" в вашем <iframe> мы переопределили, это за вас.

<!-- Соотношение 16:9 -->
<div>
  <iframe src="..."></iframe>
</div>

<!-- Соотношение 4:3 -->
<div>
  <iframe src="..."></iframe>
</div>

Основной эффект ячейки

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

<div>...</div>

Дополнительные классы

Чтобы контролировать отступы (padding) и закругления углов, используйте два дополнительных модификаторы классов.

Look, I’m in a large well!

<div>...</div>

Look, I’m in a small well!

<div>...</div>

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню 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>

По умолчанию выпадающее меню автоматически расположено в 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>
  <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>

Добавьте класс .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>

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

Через атрибуты или 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.

Обратите внимание, что если для 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…
})

Компоненты · Twitter Bootstrap: на Русском

Изначальные установки

Одинаковая разметка, разные классы

Все навигационные компоненты—вкладки, кнопки и списки—имеют одинаковую HTML-разметку и родительский класс .nav.

Вкладки

Используйте в качестве вкладок <ul> список, и дополнительный класс в родительском элементе .nav-tabs:

<ul>
  <li>
    <a href="#">Главная</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

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

Используйте HTML-код из предыдущего примера, но вместо класса .nav-tabs используйте .nav-pills:

<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Отключенное состояние

Для любого элемента навигации (вкладки, кнопки или списки), добавьте класс .disabled для изменения стилей — серый шрифт и отсутвие анимации при наведении курсора. Тем не менее ссылки и элементы останутся кликабельными, до тех пор пока Вы не уберете атрибут href. Либо управляя элементами через JavaScript.

<ul>
  ...
  <li><a href="#">Главная</a></li>
  ...
</ul>

Выравнивание элементов

Для выравнивания навигации используйте классы .pull-left или .pull-right. Оба класса добавляют условие CSS float left или right.

Навигационный стек

По умолчанию вкладки и кнопки располагаются горизонтально, добавьте класс .nav-stacked для вертикального отображения.

Стек вкладок

<ul>
  ...
</ul>

Стек кнопок

<ul>
  ...
</ul>

Выпадающие списки

Выпадающее меню в Bootstrap вкладках и навигационных кнопках. Незабудте добавить jQuery плагин.

JS-плагин выпадающих списков dropdowns JS-плагин.

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

<ul>
  <li>
    <a
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b></b>
      </a>
    <ul>
      <!-- links -->
    </ul>
  </li>
</ul>

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

<ul>
  <li>
    <a
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b></b>
      </a>
    <ul>
      <!-- links -->
    </ul>
  </li>
</ul>

Навигационный список

Он же Сайдбар

Навигационный список позволяет создать легкую и удобную в использовании навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.

Пример навигационного списка

К списку ссылок и добавьте классы — class="nav nav-list":

<ul>
  <li>Заголовок</li>
  <li><a href="#">На главную</a></li>
  <li><a href="#">Библиотека</a></li>
  ...
</ul>

Замечание Для вложения в навигационные списки, применяйте классы class="nav nav-list" только к вложенным элементам — <ul>.

Горизонтальный разделитель

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

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

Вкладки как навигация

Оживим наши вкладки при помощи JS-плагина для простого переключения между контентом. Bootstrap включает в себя четыре стиля расположения вкладок: вверху (по умолчанию), справа, внизу и слева от контента.

Пример вкладок

p>Для создания переключаемых вкладок создайте .tab-pane с уникальным ID для каждой вкладки и поместите их в элемент с классом .tab-content.

Я первая секция.

Привет, я 2-я секция.

Как дела? Это 3-я секция.

<div> <!-- Only required for left/right tabs -->
  <ul>
    <li><a href="#tab1" data-toggle="tab">Вкладка 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Вкладка 2</a></li>
  </ul>
  <div>
    <div>
      <p>Я первая секция.</p>
    </div>
    <div>
      <p>Привет, я 2-я секция.</p>
    </div>
  </div>
</div>

«Fade in» вкладки

Для плавного переключения между вкладками, добавьте класс .fade к каждому с классом .tab-pane.

jQuery плагин

Все вкладки управляются jQuery плагином. Изучите больше о javascript плагине.

Пример стилей вкладок

Расположение внизу

Переверните представление посетителей Ваших проектов о вкладках. Разместив их снизу.

Я первая Вкладка — A!

Здорова! Я Вкладка B.

Хей-хей Я Вкладка C.

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

Вкладки слева

Добавьте класс .tabs-left для размещения вкладок слева относительно контента.

Я первая Вкладка — A!

Здорова! Я Вкладка B.

Хей-хей Я Вкладка C.

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

Вкладки справа

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

Я первая Вкладка — A!

Здорова! Я Вкладка B.

Хей-хей Я Вкладка C.

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

Позиционирование элементов в Bootstrap

Позиционирование элементов

Последнее обновление: 31.10.2015

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком расположены как бы в три столбца и составляют одну строку:

Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:


<div>
    <div>
        <h3>Getting started</h3>
        <p>.............</p>
    </div>
    <div>
        <h3>Get more libraries</h3>
        <p>.............</p>
    </div>
    <div>
        <h3>Web Hosting</h3>
        <p>.............</p>
    </div>
</div>

Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно, но в данном случае у нас одна строка.

Для создания отдельного столбца строки используется класс col-md-4. col, как ясно из названия, обозначает столбец.

Дальше идет md — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4 означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов), подобный класс мог бы быть таким col-xs-4.

Все типы классов:

col-xs-*: для устройств с шириной экрана меньше 768 пикселей
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше
col-md-*: для устройств с шириной экрана от 992 пикселя и выше
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом col-md-4 будет выглядеть вполне неплохо, но мы можем установить сразу два класса, чтобы еще больше детализировать отображение на различных устройствах, например:


<div>

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы col-md(sm|lg)-offset-* позволяют задать смещение относительно левого блока или начала строки в условных единицах. Например, у нас есть такая строка:


<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:


<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:


<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.

Компоненты Bootstrap

Последнее обновление: 31.10.2015

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы. Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/. Рассмотрим вкратце некоторые из них.

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

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице _Layout:


<div>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div>
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

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

Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top. Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

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

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:

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

Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:


<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:


<div role="group">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

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

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:


<div>
    <button type="button" data-toggle="dropdown">
        Язык программирования <span></span>
    </button>
    <ul role="menu">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">VB.NET</a></li>
        <li></li>
        <li><a href="#">Java</a></li>
    </ul>
</div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать дополнительные классы меток, чтобы конкретизировать тип сообщения:


<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Похожую функциональность предлагает класс alert:


<div>Задача успешно завершена</div>
<div>Дополнительная информация</div>
<div>Внимание!</div>
<div>Опасно!</div>

Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты может легко адаптировать и приспособить под конкретные устройства.

370+ Большой набор Bootstrap элементов на сайт

# Разработка 12 Сентября 2020Комментариев: 9

Здесь мы собрали большой набор готовых элементов для bootstrap 3 и bootstrap 4, включающий в себя более 370 готовых решений, которые подойдут каждому. Скачав и разместив код того или иного элемента на своём сайте, можно сэкономить реально кучу времени, не собирая ничего с нуля.

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

Эта сборка bootstrap элементов включает следующий функционал

Виджеты bootstrap
Чарты, статистики, граффики bootstrap
Навигация bootstrap
Оформление для личного кабинета bootstrap
Готовые якоря bootstrap для landing page
Toggle меню bootstrap
Мобильное меню bootstrap
Оформление карточки товаров bootstrap
Фотогалерея bootstrap
Оформление статей для блога
bootstrap инфографика
Резюме на базе bootstrap
Форма логин-пароль для bootstrap
Форма регистрации на сайте bootstrap
Иконки bootstrap
Блок поделиться в соц сетях
Интересные анимации и различные переходы
Кнопка меню гамбургер, открывающая целый блок
Табы bootstrap
Галерея изображений с переворотом фото к описанию
Адаптивная bootstrap таблица
Карточка с ценами для сайта
Плавно всплывающие блоки с описанием
Статусы посещений и различной статистикой
Дизайн блоки чтобы сайт выглядел более современно
bootstrap календарь событий
bootstrap меню с бесконечным списком пунктов
Блок наша команда с анимациями и описаниями
Красивые адабптивные виджеты соцсетей bootstrap
Красиво оформленные текстовые блоки
Тени box-shadow bootstrap

Виджет погоды
Свадебные приглашения
Граффики для фондовых бирж
Списки множественного выбора bootstrap
Функция уведомлений на сайте
Текстовый редактор на bootstrap
bootstrap эмулятор смартфона
Оформление страницы с ценами сайта
Функциональная корзина, с возможностью редактирования количества товаров
Табы навигации bootstrap
Различные кнопки для сайта button
Загрузчик файлов на сервер bootstrap
Различные выпадающие меню dropdown-menu
Прогресс бар bootstrap
Виджет поста на сайт
Таймлайн для описания деятельности по месяцам/годам
Фильтр товаров на bootstrap
Кнопка отправить на печать bootstrap
Факты о нас в цифрах
Адаптивная таблица сравнения товаров
Формы обратной связи для сайта
Установка рейтинга для чего либо на bootstrap
Форма заполнения для кредитных карт
Планировщик задач на bootstrap
Оформление и дизайн купонов
Тема продажи приложений
Блок отзывов на сайте
Блок отзывов каруселью для сайта
Записи для оформления блога
Виджет музыкального плеера bootstrap
Галерея с возможностью открыть фото во весь экран
Красивое разделение блоков dividers

И это не весь список элементов которые присутствуют в данной сборке. Вы можете самостоятельно открать и опробывать каждый элемент

Скачать

Вот собственно и все! будем надеяться что данный набор элементов и графики сильно поможет вам в быстрой разработке ваших сайтов на bootstrap

Bootstrap Бутстрап 4 Utilities

Утилиты Bootstrap 4
Bootstrap 4 имеет множество утилит/вспомогательных классов для быстрого стиля элементов без использования CSS-кода.
Границы
Используйте border классы для добавления или удаления границ элемента:
Пример
Пример
<span></span>
<span></span>
<span></span>
<span></span>
<span class=»border border-bottom-0″></span>
<span></span>
Цвет границы
Добавьте цвет к границе с любым из контекстных классов цвета границы:
Пример
Пример
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
Радиус границы
Добавьте скругленные углы к элементу с помощью rounded классов:
Пример
Пример
<span></span>
<span></span>
<span></span>
<span class=»rounded-bottom»></span>
<span></span>
<span></span>
<span class=»rounded-0″></span>
Поплавок и Clearfix
Float элемент вправо с .float-right классом или слева с .float-left, и очистить поплавки с .clearfix классом:
Пример
Пример
<div>
<span>Float left</span>
<span class=»float-right»>Float right</span>
</div>
Отзывчивые поплавки
Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float (.float-*-left|right — where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
Пример
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none
Пример
<div>Float right on small screens or wider</div><br>
<div>Float right on medium screens or wider</div><br>
<div>Float right on large screens or wider</div><br>
<div>Float right on extra large screens or wider</div><br>
<div>Float none</div>
Выравнивание по центру
Центрировать элемент с помощью .mx-auto класса (добавляет маржу-левое и правое поле: Auto):
Пример
Пример
<div>Centered</div>
Ширина
Задать ширину элемента с классами w-* (.w-25, .w-50, .w-75, .w-100, .mw-100):
Пример
Width 25%
Width 50%
Width 75%
Width 100%
Max Width 100%
Пример
<div>Width 25%</div>
<div>Width 50%</div>
<div>Width 75%</div>
<div class=»w-100 bg-warning»>Width 100%</div>
<div>Max Width 100%</div>
Высота
Задание высоты элемента с помощью классов h-* (.h-25, .h-50, .h-75, .h-100, .mh-100):
Пример
Height 25%
Height 50%
Height 75%
Height 100%
Max Height 100%
Пример
<div>
<div>Height 25%</div>
<div>Height 50%</div>
<div>Height 75%</div>
<div class=»h-100 bg-warning»>Height 100%</div>
<div style=»height:500px»>Max Height 100%</div>
</div>
Интервал
Bootstrap 4 имеет широкий диапазон полезных классов для гибких полей и отступов. Они работают для всех точек останова: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
Классы используются в формате: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Где свойство является одним из:
m — sets margin
p — sets padding
Где стороны один из:
t — sets margin-top or padding-top
b — sets margin-bottom or padding-bottom
l — sets margin-left or padding-left
r — sets margin-right or padding-right
x — sets both padding-left and padding-right or margin-left and margin-right
y — sets both padding-top and padding-bottom or margin-top and margin-bottom
blank — sets a margin or padding on all 4 sides of the element
Где Размер является одним из:
0 — sets margin or padding to 0
1 — sets margin or padding to .25rem (4px if font-size is 16px)
2 — sets margin or padding to .5rem (8px if font-size is 16px)
3 — sets margin or padding to 1rem (16px if font-size is 16px)
4 — sets margin or padding to 1.5rem (24px if font-size is 16px)
5 — sets margin or padding to 3rem (48px if font-size is 16px)
auto — sets margin to auto
Пример
У меня только верхняя обивка (1.5rem = 24px)
У меня есть обивка со всех сторон (3rem = 48px)
У меня есть маржа со всех сторон (3rem = 48px) and a bottom padding (3rem = 48px)
Пример
<div>I only have a top padding (1.5rem = 24px)</div>
<div>I have a padding on all sides (3rem = 48px)</div>
<div>I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
Дополнительные примеры интервалов
.m-# / m-*-# margin on all sides
.mt-# / mt-*-# margin top
.mb-# / mb-*-# margin bottom
.ml-# / ml-*-# margin left
.mr-# / mr-*-# margin right
.mx-# / mx-*-# margin left and right
.my-# / my-*-# margin top and bottom
.p-# / p-*-# padding on all sides
.pt-# / pt-*-# padding top
.pb-# / pb-*-# padding bottom
.pl-# / pl-*-# padding left
.pr-# / pr-*-# padding right
.py-# / py-*-# padding top and bottom
.px-# / px-*-# padding left and right
Тени
Используйте shadow- классы для добавления теней к элементу:
Пример
No shadow
Small shadow
Default shadow
Large shadow
Пример
<div>No shadow</div>
<div class=»shadow-sm p-4 mb-4 bg-white»>Small shadow</div>
<div>Default shadow</div>
<div>Large shadow</div>
Выравнивание по вертикали
Используйте align- классы для изменения выравнивания элементов (работает только на встроенных, встроенных блоках, встроенных элементах таблицы и ячейках таблицы):
Пример
baseline top middle bottom text-top text-bottom
Пример
<span>baseline</span>
<span class=»align-top»>top</span>
<span>middle</span>
<span>bottom</span>
<span class=»align-text-top»>text-top</span>
<span class=»align-text-bottom»>text-bottom</span>
Адаптивные встраивания
Создание адаптивного видео или слайд-шоу встраивается в зависимости от ширины родительского элемента.
Добавьте .embed-responsive-item к любым элементам встраивания (например, < IFRAME > или < Video >) в родительский элемент .embed-responsive и пропорции по вашему выбору:
Пример

<!— 16:9 aspect ratio —>
<div>
<iframe src=»…»></iframe>
</div>
<!— 4:3 aspect ratio —>
<div>
<iframe src=»…»></iframe>
</div>
<!— 1:1 aspect ratio —>
<div>
<iframe src=»…»></iframe>
</div>
Видимость
Используйте .visible классы или .invisible для управления видимостью элементов. Примечание: Эти классы не меняют отображаемое значение CSS. Они только добавляют visibility:visible или visibility:hidden:
Пример
I am visibile
I am invisible
Пример
<div>I am visible</div>
<div>I am invisible</div>
Позиции
Используйте .fixed-top класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:
Пример
<nav>
…
</nav>
Используйте .fixed-bottom класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:
Пример
<nav>
…
</nav>
Используйте .sticky-top класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание: Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).
Пример
<nav>
…
</nav>
Иконка закрыть
Используйте .close класс для оформления значка закрытия. Часто используется для оповещений и модальностей. Обратите внимание, что мы используем × символ, чтобы создать фактический значок (лучше лукионг «x»). Также обратите внимание, что он плавает вправо по умолчанию:
Пример
Пример
<button type=»button»>×</button>
Цвета
Как описано в разделе » цвета «, ниже приведен список всех классов текста и фона:
Классы для текстовых цветов: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст представляет некоторую информацию.
Этот текст представляет предупреждение.
Этот текст представляет опасность.
Вторичный текст.
Темно-серый текст.
Основного текста.
Светло-серый текст.
Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:
Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:
Пример
Черный текст с 50% непрозрачность на белом фоне
Белый текст с 50% непрозрачность на черном фоне
Цвета фона
Для цветов фона используются следующие классы: .bg-primary ,,,,, .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light .
Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.
Пример
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Типография/текстовые классы
Как описано в разделе типография, вот список всех типографий/текстовых классов:
Класс Описание
.display-* Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4
.font-weight-bold Полужирный текст
.font-weight-normal Обычный текст
.font-weight-light Легковесный текст
.font-italic Курсивный текст
.lead Выделяет абзац
.small Обозначает меньший текст (значение 85% от размера родительского элемента)
.text-left Указывает текст, выровненный по левому краю
.text-center Обозначает текст, выровненный по центру
.text-right Указывает текст с выравниванием по правому краю
.text-justify Обозначает обоснованный текст
.text-monospace Текст с интервалом
.text-nowrap Обозначает отсутствие текста переноса
.text-lowercase Обозначает текст в нижнем регистре
.text-uppercase Указывает верхний текст
.text-capitalize Обозначает текст с прописными буквами
.initialism Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyled Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
.list-inline Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>)
.pre-scrollable Делает <pre> элемент прокручиваемым
Элементы блока
Чтобы сделать элемент элементом Block, добавьте .d-block класс. Используйте любой из d-*-block классов для управления, когда элемент должен быть элементом блока на определенной ширине экрана:
Пример
d-block d-sm-block d-md-block d-lg-block d-xl-block
Пример
<span>d-block</span>
<span>d-sm-block</span>
<span>d-md-block</span>
<span>d-lg-block</span>
<span class=»d-xl-block bg-success»>d-xl-block</span>
Flex
Используйте .flex-* классы для управления макетом с Flexbox.
Подробнее о Bootstrap 4 Flex читайте в следующей главе.
Пример
Horizontal:
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Vertical:
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

компонентов · Bootstrap
Доступные символы
Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Глификоны Халфлинги обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности мы просим вас по возможности включать обратную ссылку на Glyphicons.
Как использовать
По соображениям производительности для всех значков требуется базовый класс и индивидуальный класс значков.Чтобы использовать, поместите следующий код где угодно. Обязательно оставьте пространство между значком и текстом для правильного заполнения.
Не смешивать с другими компонентами
Классы значков нельзя напрямую комбинировать с другими компонентами. Их нельзя использовать вместе с другими классами в одном элементе. Вместо этого добавьте вложенный и примените классы значков к .
Только для пустых элементов
Классы значков следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
Изменение расположения шрифта значка
Bootstrap предполагает, что файлы шрифтов значков будут расположены в каталоге ../fonts/ относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:
Измените переменные @ icon-font-path и / или @ icon-font-name в исходных файлах Less.
Используйте параметр относительных URL-адресов, предоставляемый компилятором Less.
Измените url () пути в скомпилированном CSS.
Используйте тот вариант, который лучше всего подходит для ваших конкретных условий разработки.
Доступные значки
Современные версии вспомогательных технологий объявляют контент, созданный с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и сбивающего с толку вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью атрибута aria-hidden = "true" .
Если вы используете значок для передачи смысла (а не только как декоративный элемент), убедитесь, что это значение также передается вспомогательным технологиям — например, включите дополнительный контент, визуально скрытый с помощью класса .sr-only .
Если вы создаете элементы управления без другого текста (например,
Значок, используемый в предупреждении, чтобы указать, что это сообщение об ошибке, с дополнительным .sr-only текст, чтобы передать эту подсказку пользователям вспомогательных технологий.
Ошибка: Введите действительный адрес электронной почты
Ошибка: Введите действительный адрес электронной почты
Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript.
Пример
Оберните триггер раскрывающегося списка и раскрывающееся меню в .раскрывающийся список или другой элемент, объявляющий position: relative; . Затем добавьте HTML-код меню.
Действие Другое действие Здесь еще кое-что Отдельная ссылка
Раскрывающиеся меню можно изменить, чтобы развернуть вверх (а не вниз), добавив .dropup к родительскому.
Действие Другое действие Здесь еще кое-что Отдельная ссылка
Выравнивание
По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.
Может потребоваться дополнительное позиционирование
Выпадающие списки автоматически размещаются с помощью CSS в обычном потоке документа. Это означает, что выпадающие списки могут быть обрезаны родителями с определенными свойствами переполнения или отображаться за пределами области просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.
Устарело
. Выравнивание вправо
Начиная с версии v3.1.0 мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right . Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left .
...
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
... Раскрывающийся заголовок ...
Разделитель
Добавьте разделитель для разделения серии ссылок в раскрывающемся меню.
... ...
Отключенные пункты меню
Добавьте .disabled к
в раскрывающемся списке, чтобы отключить ссылку.
Обычная ссылка Отключенная ссылка Другая ссылка
Сгруппируйте серию кнопок в одну строку с помощью группы кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок.
Проверьте правильность роли
и предоставьте этикетку
Чтобы вспомогательные технологии, такие как программы чтения с экрана, передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут role . Для групп кнопок это будет role = "group" , а на панелях инструментов должно быть role = "toolbar" .
Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами

Класс	Описание
`.display-*`	Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: `.display-1`, `.display-2`, `.display-3`, `.display-4`
`.font-weight-bold`	Полужирный текст
`.font-weight-normal`	Обычный текст
`.font-weight-light`	Легковесный текст
`.font-italic`	Курсивный текст
`.lead`	Выделяет абзац
`.small`	Обозначает меньший текст (значение 85% от размера родительского элемента)
`.text-left`	Указывает текст, выровненный по левому краю
`.text-center`	Обозначает текст, выровненный по центру
`.text-right`	Указывает текст с выравниванием по правому краю
`.text-justify`	Обозначает обоснованный текст
`.text-monospace`	Текст с интервалом
`.text-nowrap`	Обозначает отсутствие текста переноса
`.text-lowercase`	Обозначает текст в нижнем регистре
`.text-uppercase`	Указывает верхний текст
`.text-capitalize`	Обозначает текст с прописными буквами
`.initialism`	Отображение текста внутри `<abbr>` элемента в немного меньшем размере шрифта
`.list-unstyled`	Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих `<ul>` и `<ol>` ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
`.list-inline`	Размещение всех элементов списка в одной строке (используется вместе с `.list-inline-item` каждым элементом <li>)
`.pre-scrollable`	Делает `<pre>` элемент прокручиваемым

Объедините наборы
в
для более сложных компонентов.
... ... ...
Калибровка
Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .btn-group- * к каждой .btn-group , в том числе при вложении нескольких групп.
Оставил Середина Верно
Оставил Середина Верно
Оставил Середина Верно
Оставил Середина Верно
... ... ... ...
Вложенность
Поместите .btn-group в другую .btn-group , если вы хотите, чтобы выпадающие меню были смешаны с рядом кнопок.
Раскрывающаяся ссылка Раскрывающаяся ссылка
Вертикальное отклонение
Обеспечивает отображение набора кнопок вертикально, а не горизонтально. Выпадающие меню с разделенными кнопками здесь не поддерживаются.
Кнопка Кнопка Кнопка Кнопка
...
Обоснованные группы кнопок
Сделайте так, чтобы группа кнопок растягивалась одинакового размера, чтобы охватить всю ширину ее родительского элемента. Также работает с раскрывающимися списками кнопок в группе кнопок.
Обработка бордюров
Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно: display: table-cell ), границы между ними удваиваются.В обычных группах кнопок margin-left: -1px используется для наложения границ вместо их удаления. Однако поле не работает с display: table-cell . В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.
IE8 и границы
Internet Explorer 8 не отображает границы кнопок в группе кнопок по ширине, будь то элементы или

Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в .btn-group и обеспечение правильной разметки меню.
Зависимость подключаемого модуля
Для раскрывающихся списков кнопок
требуется, чтобы в вашу версию Bootstrap был включен плагин раскрывающегося списка.
Раскрывающееся меню с одной кнопкой
Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.
Действие Другое действие Здесь еще кое-что Отдельная ссылка
Раскрывающиеся списки кнопок
Аналогичным образом создайте раскрывающиеся списки разделенных кнопок с теми же изменениями разметки, только с отдельной кнопкой.
Действие Другое действие Здесь еще кое-что Отдельная ссылка
Калибровка
Выпадающие меню кнопок работают с кнопками любого размера.
... ... ...
Выпадающий вариант
Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового .Используйте .input-group с добавлением .input-group-addon или .input-group-btn для добавления или добавления элементов к одному .form-control .
Текстовый
только с
Избегайте использования здесь элементов </code>, поскольку их атрибут <code> rows </code> не будет соблюдаться в некоторых случаях.</p> <h5><span class="ez-toc-section" id="i-228"> Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки </span></h5> <p> При использовании всплывающих подсказок или всплывающих окон для элементов в пределах <code> .input-group </code> вам необходимо указать опцию <code> container: 'body' </code>, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря округления углы при срабатывании всплывающей подсказки или всплывающего окна). </p> <h5><span class="ez-toc-section" id="i-229"> Не смешивать с другими компонентами </span></h5> <p> Не смешивайте группы форм или классы столбцов сетки напрямую с группами ввода.Вместо этого вложите группу ввода внутрь группы формы или связанного с сеткой элемента. </p> <h5><span class="ez-toc-section" id="i-230"> Всегда добавлять ярлыки </span></h5> <p> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода. Для этих групп ввода убедитесь, что любые дополнительные метки или функции передаются вспомогательным технологиям. </p> <p> Точная техника, которая будет использоваться (видимые элементы <code> <label>, </code>, <code> <label>, </code> элементы, скрытые с помощью <code>.sr-only </code> class, или использование <code> aria-label </code>, <code> aria-labelledby </code>, <code> aria-describeby </code>, <code> title </code> или <code> placeholder </code> attribute) и то, какая дополнительная информация должна быть передана, будет варьироваться в зависимости от точный тип реализуемого вами виджета интерфейса. Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев. </p> <h3><span class="ez-toc-section" id="i-231"> Базовый пример </span></h3> <p> Поместите одну надстройку или кнопку по обе стороны от входа.Вы также можете разместить его по обе стороны от входа. </p> <p> <strong> Мы не поддерживаем несколько надстроек (<code> .input-group-addon </code> или <code> .input-group-btn </code>) на одной стороне. </strong> </p> <p> <strong> Мы не поддерживаем несколько элементов управления формой в одной группе ввода. </strong> </p><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "basic-addon1"> </div> <div> <input type = "text" placeholder = "Имя пользователя получателя" aria-describeby = "basic-addon2"> <span> @example.com </span> </div> <div> <span> $ </span> <input type = "text" aria-label = "Сумма (с точностью до доллара)"> <span> 0,00 </span> </div> <label for = "basic-url"> Ваш персональный URL </label> <div> <span> https://example.com/users/ </span> <input type = "text" aria-describeby = "basic-addon3"> </div> </code> </pre><h3><span class="ez-toc-section" id="i-232"> Калибровка </span></h3> <p> Добавьте классы относительного изменения размеров формы в саму <code> .input-group </code>, и содержимое внутри автоматически изменит размер — нет необходимости повторять классы размеров элемента управления формы для каждого элемента.</p><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon1"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon2"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя" aria-describeby = "sizing-addon3"> </div> </code> </pre><h3><span class="ez-toc-section" id="i-233"> Флажки и радио-надстройки </span></h3> <p> Поместите любой флажок или переключатель в аддон группы ввода вместо текста.</p><pre> <code data-lang="html"> <div> <div> <div> <span> <input type = "checkbox" aria-label = "..."> </span> <input type = "text" aria-label = "..."> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <span> <input type = "radio" aria-label = "..."> </span> <input type = "text" aria-label = "..."> </div> <! - / input-group -> </div> <! - /.Col-LG-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="i-234"> Дополнения для кнопок </span></h3> <p> Кнопки в группах ввода немного отличаются и требуют одного дополнительного уровня вложенности. Вместо <code> .input-group-addon </code> вам нужно будет использовать <code> .input-group-btn </code> для переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить. </p><pre> <code data-lang="html"> <div> <div> <div> <span> <button type = "button"> Вперед! </button> </span> <input type = "text" placeholder = "Искать... "> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <input type = "text" placeholder = "Искать ..."> <span> <button type = "button"> Вперед! </button> </span> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="i-235"> Кнопки с раскрывающимися списками </span></h3><pre> <code data-lang="html"> <div> <div> <div> <div> <button type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-extended = "false"> Действие <span></span> </button> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь еще кое-что </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </div> <! - / btn-group -> <input type = "text" aria-label = "... "> </div> <! - / input-group -> </div> <! - /.col-lg-6 -> <div> <div> <input type = "text" aria-label = "..."> <div> <button type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-extended = "false"> Действие <span></span> </button> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь еще кое-что </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </div> <! - / btn-group -> </div> <! - / input-group -> </div> <! - /.Col-LG-6 -> </div> <! - /.row -> </code> </pre><h3><span class="ez-toc-section" id="i-236"> Сегментированные кнопки </span></h3><pre> <code data-lang="html"> <div> <div> <! - Кнопка и раскрывающееся меню -> </div> <input type = "text" aria-label = "..."> </div> <div> <input type = "text" aria-label = "..."> <div> <! - Кнопка и раскрывающееся меню -> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-237"> Несколько кнопок </span></h3> <p> Хотя у вас может быть только одно дополнение на каждой стороне, у вас может быть несколько кнопок внутри одного <code>.Вход-группа-БТН </code>. </p><pre> <code data-lang="html"> <div> <div> <! - Кнопки -> </div> <input type = "text" aria-label = "..."> </div> <div> <input type = "text" aria-label = "..."> <div> <! - Кнопки -> </div> </div> </code> </pre><p> Nav, доступные в Bootstrap, имеют общую разметку, начиная с базового класса <code> .nav </code>, а также общие состояния. Поменяйте местами классы модификаторов для переключения между стилями.</p> <h5><span class="ez-toc-section" id="_JavaScript-3"> Для использования навигации для панелей вкладок требуется плагин JavaScript для вкладок. </span></h5> <p> Для вкладок с областями, допускающими вкладки, необходимо использовать плагин JavaScript для вкладок. Для разметки также потребуются дополнительные атрибуты <code> role, </code> и ARIA — подробности см. В примере разметки плагина. </p> <h5><span class="ez-toc-section" id="i-238"> Сделать навигационные системы доступными для навигации </span></h5> <p> Если вы используете навигацию для предоставления панели навигации, обязательно добавьте <code> role = "navigation" </code> в наиболее логичный родительский контейнер <code> <ul> </code> или оберните элемент <code> <nav> </code> вокруг всего навигация.Не добавляйте роль к самому <code> <ul> </code>, так как это помешает тому, чтобы вспомогательные технологии объявили его реальным списком. </p> <h3><span class="ez-toc-section" id="i-239"> Вкладки </span></h3> <p> Обратите внимание, что для класса <code> .nav-tabs </code> требуется базовый класс <code> .nav </code>. </p><pre> <code data-lang="html"> <ul> <li role = "presentation"> <a href="#"> Главная страница </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения </a> </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="i-240"> Таблетки </span></h3> <p> Возьмите тот же HTML, но используйте <code>.nav-pills </code> вместо: </p><pre> <code data-lang="html"> <ul> <li role = "presentation"> <a href="#"> Главная страница </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения </a> </li> </ul> </code> </pre><p> Таблетки также можно штабелировать вертикально. Просто добавьте <code> .nav-stacked </code>. </p><pre> <code data-lang="html"> <ul> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="i-241"> Обосновано </span></h3> <p> Легко делайте вкладки или пилюли равной ширине их родительской на экранах шире 768 пикселей с <code>.навигационное оправдание </code>. На экранах меньшего размера навигационные ссылки складываются. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="Safari"> Safari и адаптивная оправданная навигация </span></h5> <p> Начиная с версии 9.1.2, Safari обнаруживает ошибку, при которой изменение размера вашего браузера по горизонтали вызывает ошибки рендеринга в выровненной навигации, которые очищаются при обновлении. Эта ошибка также проявляется в примере обоснованной навигации. </p><pre> <code data-lang="html"> <ul> ... </ul> <ul> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="i-242"> Отключенные ссылки </span></h3> <p> Для любого компонента навигации (вкладки или таблетки) добавьте <code> .disabled </code> для <strong> серых ссылок и отсутствия эффектов наведения </strong>. </p> <h5><span class="ez-toc-section" id="i-243"> Не влияет на функциональность ссылки </span></h5> <p> Этот класс изменяет только внешний вид <code> <a> </code>, но не его функциональные возможности. Используйте собственный JavaScript, чтобы отключить ссылки здесь. </p><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a href="#"> Отключенная ссылка </a> </li> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="i-244"> Использование раскрывающихся списков </span></h3> <p> Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript. </p> <h4><span class="ez-toc-section" id="i-245"> Вкладки с раскрывающимися списками </span></h4><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающееся меню <span> </span> </a> <ul> ... </ul> </li> ... </ul> </code> </pre><h4><span class="ez-toc-section" id="i-246"> Таблетки с раскрывающимися списками </span></h4><pre> <code data-lang="html"> <ul> ... <li role = "presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающееся меню <span> </span> </a> <ul> ... </ul> </li> ... </ul> </code> </pre><h3><span class="ez-toc-section" id="i-247"> Панель навигации по умолчанию </span></h3> <p> Навбары — это адаптивные мета-компоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.</p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="i-248"> Переполнение содержания </span></h5> <p> Поскольку Bootstrap не знает, сколько места требуется содержимому на панели навигации, вы можете столкнуться с проблемами, связанными с переносом содержимого во вторую строку. Чтобы решить эту проблему, вы можете: </p> <ol type="a"> <li> Уменьшите количество или ширину элементов навигационной панели. </li> <li> Скрыть определенные элементы навигационной панели при определенных размерах экрана с помощью гибких служебных классов. </li> <li> Измените точку, в которой ваша навигационная панель переключается между свернутым и горизонтальным режимами.Настройте переменную <code> @ grid-float-breakpoint </code> или добавьте свой собственный медиа-запрос. </li> </ol> <h5><span class="ez-toc-section" id="_JavaScript-4"> Требуется подключаемый модуль JavaScript </span></h5> <p> Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах <code> .navbar-collapse </code>. </p> <p> Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания. </p> <h5><span class="ez-toc-section" id="i-249"> Изменение свернутой точки останова мобильной панели навигации </span></h5> <p> Навигационная панель сворачивается в вертикальное мобильное представление, когда область просмотра уже, чем <code> @ grid-float-breakpoint </code>, и расширяется в свое горизонтальное немобильное представление, когда ширина области просмотра составляет не менее <code> @ grid-float-breakpoint </code>.Отрегулируйте эту переменную в источнике Less, чтобы контролировать, когда панель навигации сворачивается / расширяется. Значение по умолчанию — <code> 768 пикселей </code> (самый маленький «маленький» или «планшетный» экран). </p> <h5><span class="ez-toc-section" id="i-250"> Сделать доступными панели навигации </span></h5> <p> Обязательно используйте элемент <code> <nav> </code> или, если вы используете более общий элемент, такой как <code> <div> </code>, добавьте <code> role = "navigation" </code> на каждую панель навигации, чтобы явно идентифицировать ее как область ориентира для пользователи вспомогательных технологий. </p><pre> <code data-lang="html"> <nav> <div> <! - Бренд и переключатель сгруппированы для лучшего отображения на мобильных устройствах -> <div> <button type = "button" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria-extended = "false"> <span> Переключить навигацию </span> <span> </span> <span> </span> <span> </span> </button> <a href="#"> Бренд </a> </div> <! - Соберите навигационные ссылки, формы и другой контент для переключения -> <div> <ul> <li> <a href="#"> Ссылка <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающийся список <span> </span> </a> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь еще кое-что </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> <li role = "separator"> </li> <li> <a href="#"> Еще одна отдельная ссылка </a> </li> </ul> </li> </ul> <форма> <div> <input type = "text" placeholder = "Search"> </div> <button type = "submit"> Отправить </button> </form> <ul> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Раскрывающийся список <span> </span> </a> <ul> <li> <a href="#"> Действие </a> </li> <li> <a href="#"> Другое действие </a> </li> <li> <a href="#"> Здесь еще кое-что </a> </li> <li role = "separator"> </li> <li> <a href="#"> Отдельная ссылка </a> </li> </ul> </li> </ul> </div> <! - /.navbar-collapse -> </div> <! - /.container-fluid -> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-251"> Имидж бренда </span></h3> <p> Замените марку навигационной панели своим собственным изображением, заменив текст на <code> <img> </code>. Поскольку <code> .navbar-brand </code> имеет собственное заполнение и высоту, вам может потребоваться переопределить некоторый CSS в зависимости от вашего изображения. </p><pre> <code data-lang="html"> <nav> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" alt = "Бренд" src = "..."></noscript><img class="lazyload lazy lazy-hidden" alt = "Бренд" src = "..."><noscript><img alt = "Бренд" src = "..."></noscript> </a> </div> </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-252"> Формы </span></h3> <p> Поместите содержимое формы в <code>.navbar-form </code> для правильного вертикального выравнивания и сворачивания в узких окнах просмотра. Используйте параметры выравнивания, чтобы решить, где он находится в содержимом панели навигации. </p> <p> Напомним, что <code> .navbar-form </code> разделяет большую часть своего кода с <code> .form-inline </code> через mixin. <strong> Некоторым элементам управления формы, например группам ввода, может потребоваться фиксированная ширина для правильного отображения на панели навигации. </strong> </p><pre> <code data-lang="html"> <form role = "search"> <div> <input type = "text" placeholder = "Search"> </div> <button type = "submit"> Отправить </button> </form> </code> </pre><h5><span class="ez-toc-section" id="i-253"> Предупреждения о мобильных устройствах </span></h5> <p> Есть некоторые предостережения относительно использования элементов управления формы в фиксированных элементах на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера. </p> <h5><span class="ez-toc-section" id="i-254"> Всегда добавлять ярлыки </span></h5> <p> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода. Для этих встроенных форм вы можете скрыть метки, используя класс </code> .sr-only </code>. Существуют и другие альтернативные методы предоставления метки для вспомогательных технологий, такие как атрибут <code> aria-label </code>, <code> aria-labelledby </code> или <code> title </code>. Если ни один из них не присутствует, программы чтения с экрана могут прибегнуть к использованию атрибута <code> заполнителя </code>, если он присутствует, но обратите внимание, что использование заполнителя </code> </code> в качестве замены для других методов маркировки не рекомендуется.</p> <h3><span class="ez-toc-section" id="i-255"> Кнопки </span></h3> <p> Добавьте класс <code> .navbar-btn </code> к элементам <code> <button> </code>, не находящимся в <code> <form> </code>, чтобы центрировать их по вертикали на панели навигации. </p><pre> <code data-lang="html"> <button type = "button"> Войти </button> </code> </pre><h5><span class="ez-toc-section" id="i-256"> Использование в зависимости от контекста </span></h5> <p> Как и стандартные классы кнопок, <code> .navbar-btn </code> можно использовать с элементами <code> <a> </code> и <code> <input> </code>. Однако ни <code>.navbar-btn </code> и стандартные классы кнопок не должны использоваться в элементах <code> <a> </code> в пределах <code> .navbar-nav </code>. </p> <h3><span class="ez-toc-section" id="i-257"> Текст </span></h3> <p> Обернуть строки текста в элемент с <code> .navbar-text </code>, обычно в тег <code> <p> </code> для правильного интерлиньяжа и цвета. </p><pre> <code data-lang="html"> <p> Вы вошли как Марк Отто </p> </code> </pre><h3><span class="ez-toc-section" id="i-258"> Не навигационные ссылки </span></h3> <p> Для людей, использующих стандартные ссылки, которые не входят в стандартный компонент навигации навигационной панели, используйте <code>.navbar-link </code>, чтобы добавить правильные цвета для параметров по умолчанию и инвертированных параметров навигационной панели. </p><pre> <code data-lang="html"> <p> Вы вошли как <a href="#"> Марк Отто </a> </p> </code> </pre><h3><span class="ez-toc-section" id="i-259"> Выравнивание компонентов </span></h3> <p> Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов <code> .navbar-left </code> или <code> .navbar-right </code>. Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный <code> <ul> </code> с применением соответствующего служебного класса.</p> <p> Эти классы представляют собой смешанные версии <code> .pull-left </code> и <code> .pull-right </code>, но они ограничены медиа-запросами для упрощения обработки компонентов навигационной панели на разных размерах устройств. </p> <h5><span class="ez-toc-section" id="i-260"> Выравнивание нескольких компонентов по правому краю </span></h5> <p> Навбары в настоящее время имеют ограничение: несколько классов <code> .navbar-right </code>. Чтобы правильно разместить контент, мы используем отрицательное поле на последнем элементе <code> .navbar-right </code>. Когда есть несколько элементов, использующих этот класс, эти поля не работают должным образом.</p> <p> Мы вернемся к этому, когда сможем переписать этот компонент в v4. </p> <h3><span class="ez-toc-section" id="i-261"> Зафиксировано наверху </span></h3> <p> Добавьте <code> .navbar-fixed-top </code> и добавьте <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h5><span class="ez-toc-section" id="i-262"> Требуется обивка корпуса </span></h5> <p> Фиксированная панель навигации будет перекрывать другой ваш контент, если вы не добавите <code> padding </code> вверху <code> <body> </code>.Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей. </p><pre> <code data-lang="scss"> body {padding-top: 70px; } </code> </pre><p> Не забудьте включить этот <strong> после </strong> в основной CSS Bootstrap. </p> <h3><span class="ez-toc-section" id="i-263"> Крепится к дну </span></h3> <p> Добавьте <code> .navbar-fixed-bottom </code> и добавьте <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h5><span class="ez-toc-section" id="i-264"> Требуется обивка корпуса </span></h5> <p> Фиксированная панель навигации будет перекрывать другой контент, если вы не добавите <code> padding </code> внизу <code> <body> </code>.Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом. Совет: по умолчанию высота панели навигации составляет 50 пикселей. </p><pre> <code data-lang="scss"> body {padding-bottom: 70px; } </code> </pre><p> Не забудьте включить этот <strong> после </strong> в основной CSS Bootstrap. </p> <h3><span class="ez-toc-section" id="i-265"> Статический верх </span></h3> <p> Создайте полноразмерную навигационную панель, которая прокручивается вместе со страницей, добавив <code> .navbar-static-top </code> и включив <code> .container </code> или <code> .container-fluid </code> для центрирования и заполнения содержимого навигационной панели. </p> <p> В отличие от <code>.navbar-fixed- * </code>, вам не нужно изменять какие-либо отступы в теле <code> </code>. </p><pre> <code data-lang="html"> <nav> <div> ... </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-266"> Перевернутая панель навигации </span></h3> <p> Измените внешний вид навигационной панели, добавив <code> .navbar-inverse </code>. </p><pre> <code data-lang="html"> <nav> ... </nav> </code> </pre><p> Указывает расположение текущей страницы в иерархии навигации. </p> <p> Разделители автоматически добавляются в CSS через <code>: до </code> и <code> содержимое </code>.</p><pre> <code data-lang="html"> <ol> <li> <a href="#"> На главную </a> </li> <li> <a href="#"> Библиотека </a> </li> <li> Данные </li> </ol> </code> </pre><p> Обеспечьте ссылки для разбивки на страницы для вашего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджеру. </p> <p> Простая разбивка на страницы, вдохновленная Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно пропустить, он легко масштабируется и обеспечивает большие области щелчка.</p><pre> <code data-lang="html"> <nav aria-label = "Навигация по странице"> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden = "true"> & laquo; </span> </a> </li> <li> <a href="#"> 1 </a> </li> <li> <a href="#"> 2 </a> </li> <li> <a href="#"> 3 </a> </li> <li> <a href="#"> 4 </a> </li> <li> <a href="#"> 5 </a> </li> <li> <a href="#" aria-label="Next"> <span aria-hidden = "true"> & raquo; </span> </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="i-267"> Отключенное и активное состояния </span></h4> <p> Ссылки настраиваются в зависимости от обстоятельств.Используйте <code> .disabled </code> для не кликабельных ссылок и <code> .active </code> для обозначения текущей страницы. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden = "true"> & laquo; </span> </a> </li> <li> <a href="#"> 1 <span> (текущий) </span> </a> </li> ... </ul> </nav> </code> </pre><p> Мы рекомендуем вам заменить активные или отключенные привязки на <code> <span> </code> или опустить привязку в случае стрелок «предыдущий / следующий», чтобы удалить функциональность щелчка при сохранении заданных стилей.</p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <span> <span aria-hidden = "true"> & laquo; </span> </span> </li> <li> <span> 1 <span>(current)</span> </span> </li> ... </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="i-268"> Калибр </span></h4> <p> Хотите больше или меньше нумерации страниц? Добавьте <code> .pagination-lg </code> или <code> .pagination-sm </code> для дополнительных размеров. </p><pre> <code data-lang="html"> <nav aria-label = "... "> <ul> ... </ul> </nav> <nav aria-label = "..."> <ul> ... </ul> </nav> <nav aria-label = "..."> <ul> ... </ul> </nav> </code> </pre><p> Быстрые предыдущие и следующие ссылки для простой реализации разбивки на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы. </p> <h4><span class="ez-toc-section" id="i-269"> Пример по умолчанию </span></h4> <p> По умолчанию ссылки в центре пейджера. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#"> Предыдущий </a> </li> <li> <a href="#"> Далее </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="i-270"> Выровненные звенья </span></h4> <p> Как вариант, вы можете выровнять каждую ссылку по сторонам: </p><pre> <code data-lang="html"> <nav aria-label = "... "> <ul> <li> <a href="#"> <span aria-hidden = "true"> & larr; </span> Раньше </a> </li> <li> <a href="#"> Более новая <span aria-hidden = "true"> & rarr; </span> </a> </li> </ul> </nav> </code> </pre><h4><span class="ez-toc-section" id="i-271"> Дополнительное отключенное состояние </span></h4> Ссылки на пейджер <p> также используют общий служебный класс <code> .disabled </code> из пагинации. </p><pre> <code data-lang="html"> <nav aria-label = "..."> <ul> <li> <a href="#"> <span aria-hidden = "true"> & larr; </span> Раньше </a> </li> <li> <a href="#"> Более новая <span aria-hidden = "true"> & rarr; </span> </a> </li> </ul> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-272"> Пример </span></h3> <p> <h3><span class="ez-toc-section" id="i-273"> Пример заголовка Новый </span></h3> <h4><span class="ez-toc-section" id="i-274"> Пример заголовка Новый </span></h4> <h5><span class="ez-toc-section" id="i-275"> Пример заголовка Новый </span></h5> <h5><span class="ez-toc-section" id="i-276"> Пример заголовка Новый </span></h5> <h6><span class="ez-toc-section" id="i-277"> Пример заголовка Новый </span></h6> </p><pre> <code data-lang="html"> <h4><span class="ez-toc-section" id="i-278"> Пример заголовка </span></h4><span> Новое</span> </h4> </code> </pre><h3><span class="ez-toc-section" id="i-279"> Доступные варианты </span></h3> <p> Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид метки.</p> <p> По умолчанию Начальный Успех Информация Предупреждение Опасность </p><pre> <code data-lang="html"> <span> По умолчанию </span> <span> Первичный </span> <span> Успех </span> <span> Информация </span> <span> Предупреждение </span> <span> Опасность </span> </code> </pre><h5><span class="ez-toc-section" id="i-280"> Есть тонны этикеток? </span></h5> <p> Проблемы с отображением могут возникнуть, когда у вас есть десятки встроенных меток в узком контейнере, каждая из которых содержит свой собственный элемент <code> inline-block </code> (например, значок).Чтобы решить эту проблему, установите <code> display: inline-block; </code>. Для контекста и примера см. № 13219. </p> <p> Легко выделяйте новые или непрочитанные элементы, добавляя <code> <span> </code> к ссылкам, навигации Bootstrap и т. Д. </p><pre> <code data-lang="html"> <a href="#"> Входящие <span> 42 </span> </a> <button type = "button"> Сообщения <span> 4 </span> </button> </code> </pre><h5><span class="ez-toc-section" id="i-281"> Самосвертывание </span></h5> <p> Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью CSS-селектора <code>: пустой </code>), если в них нет содержимого.</p> <h5><span class="ez-toc-section" id="i-282"> Кроссбраузерность </span></h5> Значки <p> не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: empty </code>. </p> <h5><span class="ez-toc-section" id="i-283"> Адаптируется к активным состояниям навигации </span></h5> <p> Встроенные стили включены для размещения значков в активных состояниях в навигации по таблеткам. </p><pre> <code data-lang="html"> <ul role = "tablist"> <li role = "presentation"> <a href="#"> Домашняя страница <span> 42 </span> </a> </li> <li role = "presentation"> <a href="#"> Профиль </a> </li> <li role = "presentation"> <a href="#"> Сообщения <span> 3 </span> </a> </li> </ul> </code> </pre><p> Легкий и гибкий компонент, который при желании может расширять всю область просмотра для демонстрации ключевого контента на вашем сайте.</p> <p> Это простой герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации. </p> <p> Узнать больше </p><pre> <code data-lang="html"> <div> <h2><span class="ez-toc-section" id="i-284"> Привет, мир! </span></h2> <p> ... </p> <p> <a href="#" role="button"> Подробнее… </a> </p> </div> </code> </pre><p> Чтобы сделать jumbotron полной ширины и без закругленных углов, поместите его за пределами всех <code> .container </code> s и вместо этого добавьте <code>.контейнер </code> внутри. </p><pre> <code data-lang="html"> <div> <div> ... </div> </div> </code> </pre><p> Простая оболочка для <code> h2 </code> для надлежащего разделения и сегментирования разделов содержимого на странице. Он может использовать небольшой элемент </code> <code> h2 </code> по умолчанию, а также большинство других компонентов (с дополнительными стилями). </p><pre> <code data-lang="html"> <div> <h2><span class="ez-toc-section" id="i-285"> Пример заголовка страницы </span></h2><small> Подтекст для заголовка </small> </h2> </div> </code> </pre><p> Расширьте сеточную систему Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и т. Д.</p> <p> Если вы ищете представление эскизов разной высоты и / или ширины в стиле Pinterest, вам потребуется сторонний плагин, например Masonry, Isotope или Salvattore. </p> <h3><span class="ez-toc-section" id="i-286"> Пример по умолчанию </span></h3> <p> По умолчанию эскизы Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="i-287"> Пользовательский контент </span></h3> <p> С небольшой дополнительной разметкой можно добавить в эскизы любой HTML-контент, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="i-288"> Ярлык эскиза </span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p> <h4><span class="ez-toc-section" id="i-289"> Ярлык эскиза </span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p> <h4><span class="ez-toc-section" id="i-290"> Ярлык эскиза </span></h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <p> Кнопка Кнопка </p><pre> <code data-lang="html"> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" ... "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" ... "><noscript><img src = "... "alt =" ... "></noscript> <div> <h4><span class="ez-toc-section" id="i-291"> Ярлык эскиза </span></h4> <p> ... </p> <p> <a href="#" role="button"> Button </a> <a href="#" role="button"> Button </a> </p> </div> </div> </div> </div> </code> </pre><p> Предоставляет контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений. </p> <h3><span class="ez-toc-section" id="i-292"> Примеры </span></h3> <p> Оберните любой текст и дополнительную кнопку закрытия в <code>.alert </code> и один из четырех контекстных классов (например, <code> .alert-success </code>) для основных предупреждающих сообщений. </p> <h5><span class="ez-toc-section" id="i-293"> Нет класса по умолчанию </span></h5> <p> У предупреждений нет классов по умолчанию, только базовые классы и классы-модификаторы. Серое предупреждение по умолчанию не имеет особого смысла, поэтому вам необходимо указать тип через контекстный класс. Выбирайте из успеха, информации, предупреждения или опасности. </p> <p> <strong> Молодец! </strong> Вы успешно прочитали это важное предупреждающее сообщение.</p> <p> <strong> Внимание! </strong> Это предупреждение требует вашего внимания, но оно не особо важно. </p> <p> <strong> Предупреждение! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </p> <p> <strong> Ах да! </strong> Измените кое-что и попробуйте отправить еще раз. </p><pre> <code data-lang="html"> <div role = "alert"> ... </div> <div role = "alert"> ... </div> <div role = "alert"> ... </div> <div role = "alert"> ...</div> </code> </pre><h3><span class="ez-toc-section" id="i-294"> Отключаемые оповещения </span></h3> <p> Создавайте любые оповещения, добавляя необязательный <code> .alert-dismiss </code> и кнопку закрытия. </p> <p> × <strong> Предупреждение! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </p><pre> <code data-lang="html"> <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "Close"> <span aria-hidden = "true"> & times; </span> </button> <strong> Предупреждение! </strong> Лучше проверьте себя, вы не очень хорошо выглядите.</div> </code> </pre><h5><span class="ez-toc-section" id="i-295"> Обеспечить правильное поведение на всех устройствах </span></h5> <p> Обязательно используйте элемент <code> <button> </code> с атрибутом данных <code> data-dismiss = "alert" </code>. </p> <h3><span class="ez-toc-section" id="i-296"> Ссылки в оповещениях </span></h3> <p> Используйте служебный класс <code> .alert-link </code>, чтобы быстро предоставлять соответствующие цветные ссылки в любом предупреждении. </p><pre> <code data-lang="html"> <div role = "alert"> <a href="#"> ... </a> </div> <div role = "alert"> <a href="#">... </a> </div> <div role = "alert"> <a href="#"> ... </a> </div> <div role = "alert"> <a href="#"> ... </a> </div> </code> </pre><p> Обеспечивайте актуальную обратную связь о ходе рабочего процесса или действия с помощью простых, но гибких индикаторов выполнения. </p> <h5><span class="ez-toc-section" id="i-297"> Кроссбраузерность </span></h5> <p> Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых своих эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox.Opera 12 не поддерживает анимацию. </p> <h5><span class="ez-toc-section" id="_CSP-2"> Совместимость с политикой безопасности контента (CSP) </span></h5> <p> Если на вашем веб-сайте есть политика безопасности контента (CSP), которая не разрешает <code> style-src 'unsafe-inline' </code>, то вы не сможете использовать встроенные атрибуты <code> стиля </code> для установки ширины индикатора выполнения, как показано на наши примеры ниже. Альтернативные методы установки ширины, совместимые со строгими CSP, включают использование небольшого пользовательского JavaScript (который устанавливает элемент <code>.style.width </code>) или используя собственные классы CSS. </p> <h3><span class="ez-toc-section" id="i-298"> Базовый пример </span></h3> <p> Индикатор выполнения по умолчанию. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 60% </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-299"> С этикеткой </span></h3> <p> Удалите <code> <span> </code> с классом <code> .sr-only </code> из индикатора выполнения, чтобы отобразить видимый процент. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> 60% </div> </div> </code> </pre><p> Чтобы текст метки оставался разборчивым даже для малых процентов, рассмотрите возможность добавления </code> минимальной ширины </code> к индикатору выполнения.</p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100"> 0% </div> </div> <div> <div role = "progressbar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100"> 2% </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-300"> Контекстные альтернативы </span></h3> <p> Индикаторы выполнения используют одни и те же кнопки и классы предупреждений для согласованных стилей. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 40% (успешно) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 20% </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 60% (предупреждение) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 80% (опасность) </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-301"> В полоску </span></h3> <p> Использует градиент для создания эффекта полос.Недоступно в IE9 и ниже. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 40% (успешно) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 20% </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> Готово на 60% (предупреждение) </span> </div> </div> <div> <div role = "progressbar" aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 80% (опасность) </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-302"> Анимированный </span></h3> <p> Добавьте <code>.active с </code> по <code> .progress-bar-striped </code> для анимации полос справа налево. Недоступно в IE9 и ниже. </p><pre> <code data-lang="html"> <div> <div role = "progressbar" aria-valuenow = "45" aria-valuemin = "0" aria-valuemax = "100"> <span> Выполнено на 45% </span> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-303"> С накоплением </span></h3> <p> Поместите несколько стержней в один <code> .progress </code>, чтобы сложить их. </p> <p> 35% выполнено (успех) </p> <p> Готово на 20% (предупреждение) </p> <p> Завершено на 10% (опасность) </p><pre> <code data-lang="html"> <div> <div> <span> Выполнено на 35% (успешно) </span> </div> <div> <span> Готово на 20% (предупреждение) </span> </div> <div> <span> Выполнено на 10% (опасность) </span> </div> </div> </code> </pre><p> Стили абстрактных объектов для создания различных типов компонентов (например, комментариев в блогах, твитов и т. Д.), Которые содержат изображение с выравниванием по левому или правому краю вместе с текстовым содержимым.</p> <p> Мультимедиа по умолчанию отображает мультимедийный объект (изображения, видео, аудио) слева или справа от блока содержимого. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="i-304"> Медиа-заголовок </span></h5> ... </div> </div> </code> </pre><p> Классы <code> .pull-left </code> и <code> .pull-right </code> также существуют и ранее использовались как часть медиа-компонента, но не рекомендуются для такого использования с версии v3.3.0. Они приблизительно эквивалентны <code> .media-left </code> и <code> .media-right </code>, за исключением того, что <code> .media-right </code> следует помещать после <code> .media-body </code> в html. </p> <p> Изображения или другой носитель можно выровнять по верхнему, среднему или нижнему краю. По умолчанию выравнивается по верхнему краю. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="i-305"> Медиа с выравниванием по центру </span></h5> ... </div> </div> </code> </pre><p> С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для цепочек комментариев или списков статей). </p><pre> <code data-lang="html"> <ul> <li> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="i-306"> Медиа-заголовок </span></h5> ... </div> </li> </ul> </code> </pre><p> Группы списков — это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.</p> <h3><span class="ez-toc-section" id="i-307"> Базовый пример </span></h3> <p> Самая основная группа списков — это просто неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или свой собственный CSS, если необходимо. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Морби лев рис </li> <li> Porta ac Concectetur ac </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="i-308"> Значки </span></h3> <p> Добавьте компонент значков к любому элементу группы списка, и он будет автоматически расположен справа.</p> <ul> <li> 14 Cras Justo Odio </li> <li> 2 Dapibus ac facilisis в </li> <li> 1 Morbi leo risus </li> </ul><pre> <code data-lang="html"> <ul> <li> <span> 14 </span> Cras Justo Odio </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="i-309"> Связанные элементы </span></h3> <p> Свяжите элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский <code> <div> </code> вместо <code> <ul> </code>).Нет необходимости в отдельных родителях для каждого элемента. </p><pre> <code data-lang="html"> <div> <a href="#"> Cras Justo Odio </a> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Morbi leo risus </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="i-310"> Кнопочные элементы </span></h3> <p> Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родительский <code> <div> </code> вместо <code> <ul> </code>).Нет необходимости в отдельных родителях для каждого элемента. <strong> Не используйте здесь стандартные классы <code> .btn </code>. </strong> </p> <p> Cras Justo Odio Dapibus ac facilisis в Morbi leo risus Porta ac Concectetur AC Вестибулум на эросе </p><pre> <code data-lang="html"> <div> <button type = "button"> Cras justo odio </button> <button type = "button"> Dapibus ac facilisis в </button> <button type = "button"> Morbi leo risus </button> <button type = "button"> Порт для переменного тока </button> <button type = "button"> Вестибулум на эросе </button> </div> </code> </pre><h3><span class="ez-toc-section" id="i-311"> Неактивные предметы </span></h3> <p> Добавьте <code>.отключил </code> на <code> .list-group-item </code>, чтобы он стал серым, чтобы он выглядел отключенным. </p><pre> <code data-lang="html"> <div> <a href="#"> Cras Justo Odio </a> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Morbi leo risus </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="i-312"> Контекстные классы </span></h3> <p> Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанных.Также включает <code>. Активное состояние </code>. </p> <ul> <li> Dapibus ac facilisis в </li> <li> Cras sit amet nibh libero </li> <li> Porta ac Concectetur ac </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <ul> <li> Dapibus ac facilisis в </li> <li> Cras sit amet nibh libero </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе </li> </ul> <div> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Cras sit amet nibh libero </a> <a href="#"> Porta ac Concectetur ac </a> <a href="#"> Вестибулум на эросе </a> </div> </code> </pre><h3><span class="ez-toc-section" id="i-313"> Пользовательский контент </span></h3> <p> Добавьте практически любой HTML-код внутри, даже для групп связанных списков, подобных приведенной ниже.</p><pre> <code data-lang="html"> <div> <a href="#"> <h5><span class="ez-toc-section" id="i-314"> Заголовок элемента группы списка </span></h5> <p> ... </p> </a> </div> </code> </pre><p> Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. В таких ситуациях попробуйте компонент панели. </p> <h3><span class="ez-toc-section" id="i-315"> Базовый пример </span></h3> <p> По умолчанию все, что делает <code> .panel </code>, это применяет некоторую базовую границу и отступы для содержания некоторого содержимого. </p><pre> <code data-lang="html"> <div> <div> Пример базовой панели </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-316"> Панель с рубрикой </span></h3> <p> С легкостью добавьте контейнер заголовка на панель с помощью <code>.панельная товарная позиция </code>. Вы также можете включить любой <code> <h2> </h2></code>–<code> <h6> </h6></code> с классом <code> .panel-title </code>, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <code> <h2> </h2></code> — <code> <h6> </h6> </code> заменяются <code> .panel-heading </code>. </p> <p> Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках в пределах <code> .panel-title </code>. </p> <p> Заголовок панели без названия </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-317"> Название панели </span></h4> </p> <p> Содержание панели </p><pre> <code data-lang="html"> <div> <div> Заголовок панели без заголовка </div> <div> Содержание панели </div> </div> <div> <div> <h4><span class="ez-toc-section" id="i-318"> Заголовок панели </span></h4> </div> <div> Содержание панели </div> </div> </code> </pre><p> Перенести кнопки или дополнительный текст на <code>.нижний колонтитул </code>. Обратите внимание, что нижние колонтитулы <strong> панели не наследуют цвета и границы </strong> при использовании контекстных вариаций, поскольку они не предназначены для размещения на переднем плане. </p><pre> <code data-lang="html"> <div> <div> Содержание панели </div> <div> Нижний колонтитул панели </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-319"> Контекстные альтернативы </span></h3> <p> Как и другие компоненты, легко сделать панель более значимой для конкретного контекста, добавив любой из классов контекстного состояния. </p> <p> <h4><span class="ez-toc-section" id="i-320"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-321"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-322"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-323"> Название панели </span></h4> </p> <p> Содержание панели </p> <p> <h4><span class="ez-toc-section" id="i-324"> Название панели </span></h4> </p> <p> Содержание панели </p><pre> <code data-lang="html"> <div>... </div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="i-325"> С таблицами </span></h3> <p> Добавьте любые <code> .table </code> без рамки в панель для создания бесшовного дизайна. Если есть <code>.panel-body </code>, мы добавляем дополнительную границу в верхнюю часть таблицы для разделения. </p> <p> Заголовок панели </p> <p> Здесь некое содержимое панели по умолчанию. Nulla vitae elit libero, pharetra augue.Aenean lacinia bibendum nulla sed Conctetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <table> <thead> <tr> <th> # </th> <th> Имя </th> <th> Фамилия </th> <th> Имя пользователя </th> </tr> </thead> <tbody> <tr> <th scope="row"> 1 </th> <td> Марка </td> <td> Отто </td> <td> @mdo </td> </tr> <tr> <th scope="row"> 2 </th> <td> Иаков </td> <td> Торнтон </td> <td> @ жир </td> </tr> <tr> <th scope="row"> 3 </th> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <div> <p>... </p> </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><p> Если тело панели отсутствует, компонент перемещается из заголовка панели в таблицу без прерывания. </p> <p> Заголовок панели </p> <table> <thead> <tr> <th> # </th> <th> Имя </th> <th> Фамилия </th> <th> Имя пользователя </th> </tr> </thead> <tbody> <tr> <th scope="row"> 1 </th> <td> Марка </td> <td> Отто </td> <td> @mdo </td> </tr> <tr> <th scope="row"> 2 </th> <td> Иаков </td> <td> Торнтон </td> <td> @ жир </td> </tr> <tr> <th scope="row"> 3 </th> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><h3><span class="ez-toc-section" id="i-326"> С группами списков </span></h3> <p> С легкостью включайте группы списков полной ширины в любую панель. </p> <p> Заголовок панели </p> <p> Здесь некое содержимое панели по умолчанию. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed Conctetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehicula ut id elit. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Морби лев рис </li> <li> Porta ac Concectetur ac </li> <li> Вестибулум на Эросе </li> </ul><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <div> <p>... </p> </div> <! - Группа списка -> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur AC </li> <li> Вестибулум на Эросе </li> </ul> </div> </code> </pre><p> Разрешить браузерам определять размеры видео или слайд-шоу на основе ширины содержащего их блока, создавая внутреннее соотношение, которое будет правильно масштабироваться на любом устройстве.</p> <p> Правила применяются непосредственно к элементам <code> <iframe> </code>, <code> <embed> </code>, <code> <video> </code> и <code> <object> </code>; при необходимости используйте явный класс-потомок <code> .embed-responseive-item </code>, если вы хотите согласовать стиль для других атрибутов. </p> <p> <strong> Pro-Tip! </strong> Вам не нужно включать <code> frameborder = "0" </code> в ваши <code> <iframe> </code> s, поскольку мы переопределяем это для вас. </p> <p> <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""/> </iframe> </p><pre> <code data-lang="html"> <! - Соотношение сторон 16: 9 -> <div> <iframe src = "... "> </iframe> </div> <! - Соотношение сторон 4: 3 -> <div> <iframe src = "..."> </iframe> </div> </code> </pre><h3><span class="ez-toc-section" id="i-327"> Стандартный колодец </span></h3> <p> Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки. </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="i-328"> Дополнительные классы </span></h3> <p> Управляйте заполнением и закругленными углами с двумя дополнительными классами модификаторов. </p> <p> Смотри, я в большом колодце! </p><pre> <code data-lang="html"> <div>... </div> </code> </pre><p> Смотри, я в маленьком колодце! </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h2><span class="ez-toc-section" id="_Bootstrap-6"> предупреждений · Bootstrap </span></h2> <p> Предоставляет контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений. </p> <h3><span class="ez-toc-section" id="i-329"> Примеры </span></h3> <p> Предупреждения доступны для текста любой длины, а также для дополнительной кнопки закрытия. Для правильного оформления используйте один из восьми <strong> требуемых контекстных классов </strong> (например,г., <code> .alert-success </code>). Для встроенного увольнения используйте плагин jQuery предупреждений. </p> <p> Простое первичное оповещение — проверьте! </p> <p> Простое вторичное предупреждение — проверьте! </p> <p> Простое предупреждение об успехе — проверьте! </p> <p> Простое предупреждение об опасности — проверьте это! </p> <p> Простое предупреждение — проверьте! </p> <p> Простое информационное сообщение — проверьте! </p> <p> Простое световое оповещение — проверьте! </p> <p> Простое темное оповещение — проверьте! </p><pre> <code data-lang="html"> <div role = "alert"> Простое первичное оповещение - проверьте! </div> <div role = "alert"> Простое вторичное предупреждение - проверьте! </div> <div role = "alert"> Простое предупреждение об успехе - проверьте! </div> <div role = "alert"> Простое предупреждение об опасности - проверьте это! </div> <div role = "alert"> Простое предупреждение - проверьте! </div> <div role = "alert"> Простое информационное сообщение - проверьте! </div> <div role = "alert"> Простое световое оповещение - проверьте! </div> <div role = "alert"> Простое темное предупреждение - проверьте! </div> </code> </pre><h5><span class="ez-toc-section" id="i-330"> Передача смысла вспомогательным технологиям </span></h5> <p> Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса <code> .sr-only </code>. </p> <h4><span class="ez-toc-section" id="i-331"> Цвет звена </span></h4> <p> Используйте служебный класс <code> .alert-link </code>, чтобы быстро предоставлять соответствующие цветные ссылки в любом предупреждении. </p> Простое вторичное оповещение с примером ссылки. Если хотите, щелкните по нему.<pre> <code data-lang="html"> <div role = "alert"> Простое первичное оповещение с <a href="#"> примером ссылки </a>.Если хотите, щелкните по нему. </div> <div role = "alert"> Простое вторичное оповещение с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> <div role = "alert"> Простое уведомление об успехе с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> <div role = "alert"> Простое предупреждение об опасности с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> <div role = "alert"> Простое предупреждение с <a href="#"> примером ссылки </a>.Если хотите, щелкните по нему. </div> <div role = "alert"> Простое информационное сообщение с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> <div role = "alert"> Простое световое оповещение с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> <div role = "alert"> Простое темное предупреждение с <a href="#"> примером ссылки </a>. Если хотите, щелкните по нему. </div> </code> </pre><h4><span class="ez-toc-section" id="i-332"> Дополнительное содержание </span></h4> <p> Предупреждения также могут содержать дополнительные элементы HTML, такие как заголовки, абзацы и разделители.</p> <h5><span class="ez-toc-section" id="i-333"> Молодец! </span></h5> <p> Ах да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет длиться немного дольше, чтобы вы могли увидеть, как интервалы в предупреждении работают с этим типом контента. </p> <hr/> <p> Когда вам нужно, обязательно используйте маржинальные утилиты, чтобы все было в порядке и порядке. </p><pre> <code data-lang="html"> <div role = "alert"> <h5><span class="ez-toc-section" id="i-334"> Молодец! </span></h5> <p> О да, вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет длиться немного дольше, чтобы вы могли увидеть, как интервалы в предупреждении работают с этим типом контента.</p> <hr> <p> Когда вам нужно, обязательно используйте утилиты маржи, чтобы все было в порядке и порядке. </p> </div> </code> </pre><h4><span class="ez-toc-section" id="i-335"> Отклонение </span></h4> <p> С помощью подключаемого модуля JavaScript предупреждений можно отклонить любые встроенные предупреждения. Вот как: </p> <ul> <li> Убедитесь, что вы загрузили плагин предупреждений или скомпилированный Bootstrap JavaScript. </li> <li> Если вы создаете наш JavaScript из исходного кода, ему требуется <code> util.js </code>. Скомпилированная версия включает это.</li> <li> Добавьте кнопку закрытия и класс <code> .alert-dishibited </code>, который добавляет дополнительный отступ справа от предупреждения и позиционирует кнопку <code> .close </code>. </li> <li> На кнопке отклонения добавьте атрибут <code> data-dismiss = "alert" </code>, который запускает функциональность JavaScript. Обязательно используйте с ним элемент <code> <button> </code> для правильного поведения на всех устройствах. </li> <li> Чтобы анимировать предупреждения при их отклонении, обязательно добавьте <code>.fade </code> и <code>. показать классы </code>. </li> </ul> <p> Вы можете увидеть это в действии на живой демонстрации: </p> <p> <strong> Святой гуакамоле! </strong> Вам следует отметить некоторые из этих полей ниже. × </p><pre> <code data-lang="html"> <div role = "alert"> <strong> Святой гуакамоле! </strong> Вам следует проверить некоторые из этих полей ниже. <button type = "button" data-dismiss = "alert" aria-label = "Закрыть"> <span aria-hidden = "true"> & times; </span> </button> </div> </code> </pre><h3><span class="ez-toc-section" id="_JavaScript-5"> Поведение JavaScript </span></h3> <h4><span class="ez-toc-section" id="i-336"> Триггеры </span></h4> <p> Включить отключение предупреждения через JavaScript: </p><pre> <code data-lang="js"> $ ('.alert '). alert () </code> </pre><p> Или с атрибутами <code> data </code> на кнопке <strong> в оповещении </strong>, как показано выше: </p><pre> <code data-lang="html"> <button type = "button" data-dismiss = "alert" aria-label = "Закрыть"> <span aria-hidden = "true"> & times; </span> </button> </code> </pre><p> Обратите внимание, что закрытие предупреждения приведет к его удалению из DOM. </p> <h4><span class="ez-toc-section" id="i-337"> Методы </span></h4> <table> <thead> <tr> <th> Метод </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> <code> $ ().оповещение () </code> </td> <td> Заставляет предупреждение прослушивать события щелчка на дочерних элементах, которые имеют атрибут <code> data-dismiss = "alert" </code>. (Не требуется при использовании автоматической инициализации data-api.) </td> </tr> <tr> <td> <code> $ (). Alert ('закрыть') </code> </td> <td> Закрывает предупреждение, удаляя его из модели DOM. Если классы <code> .fade </code> и <code> .show </code> присутствуют в элементе, предупреждение исчезнет, прежде чем оно будет удалено. </td> </tr> <tr> <td> <code> $ ().alert ('удалить') </code> </td> <td> Уничтожает оповещение элемента. </td> </tr> </tbody> </table><pre> <code data-lang="js"> $ (". Alert"). Alert ('close') </code> </pre><h4><span class="ez-toc-section" id="i-338"> События </span></h4> Плагин предупреждений <p> Bootstrap предоставляет несколько событий для подключения к функциям предупреждений. </p> <table> <thead> <tr> <th> Событие </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> <code> close.bs.alert </code> </td> <td> Это событие возникает сразу после вызова метода экземпляра <code> close </code>.</td> </tr> <tr> <td> <code> closed.bs.alert </code> </td> <td> Это событие запускается, когда предупреждение было закрыто (ожидает завершения переходов CSS). </td> </tr> </tbody> </table><pre> <code data-lang="js"> $ ('# myAlert'). On ('closed.bs.alert', function () { // сделай что-нибудь… }) </code> </pre><table> <h2><span class="ez-toc-section" id="Bootstrap_CSS"> Bootstrap Все классы CSS </span></h2> <tr> <td> <code> .active </code> </td> <td> Добавляет серый цвет фона в строку таблицы <strong> </strong> (<code> <tr> </code> или ячейку таблицы (<code> <td> </code>) (тот же цвет используется при наведении) </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>.активный </code> </td> <td> Добавляет серый цвет фона к активной ссылке по умолчанию <strong> навигационная панель. </strong> Добавляет черный фон и белый цвет к текущей ссылке внутри перевернутой панели навигации. </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>. Активный </code> </td> <td> Добавляет синий цвет фона к активному элементу списка <strong> </strong> в группе списков </td> <td> Попытайся </td> <td> Список групп </td> </tr> <tr> <td> <code>.активный </code> </td> <td> Добавляет синий цвет фона для имитации «нажатой» кнопки <strong> </strong> </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code>. Активный </code> </td> <td> Анимирует полосатый индикатор выполнения <strong> </strong> </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>. Активный </code> </td> <td> Добавляет синий цвет фона к активному раскрывающемуся элементу <strong> </strong> в раскрывающемся списке </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>.активный </code> </td> <td> Добавляет синий цвет фона к активной ссылке <strong> пагинации </strong> (для выделения текущей страницы) </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code>. Аффикс </code> </td> <td> Плагин Affix позволяет прикрепить элемент (заблокировать / закрепить) к области на странице. Он переключает положение <code>: фиксированный </code> вкл и выкл </td> <td> Попытайся </td> <td> Аффикс </td> </tr> <tr> <td> <code>.оповещение </code> </td> <td> Создает окно сообщения с предупреждением </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>. Предупреждение-опасность </code> </td> <td> Красный ящик оповещения. Указывает на опасное или потенциально негативное действие </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>. Предупреждение отклонено </code> </td> <td> Вместе с <code>.закрыть класс </code>, этот класс используется для закрыть оповещение </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code> .alert-info </code> </td> <td> Голубое окно предупреждения. Указывает некоторую информацию </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code> .alert-ссылка </code> </td> <td> Используется в ссылках внутри предупреждений для добавления соответствующих цветных ссылок </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>.предупреждение-успех </code> </td> <td> Зеленое окно предупреждения. Указывает на успешное или положительное действие </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>. Предупреждение </code> </td> <td> Желтое окно предупреждения. Указывает на то, что при выполнении этого действия следует соблюдать осторожность </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>. Значок </code> </td> <td> Создает круглый значок (серый кружок — часто используется как числовой индикатор) </td> <td> Попытайся </td> <td> Значки </td> </tr> <tr> <td> <code>.bg-опасность </code> </td> <td> Добавляет красный цвет фона к элементу. Представляет опасность или негативное действие </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .bg-info </code> </td> <td> Добавляет голубой фон к элементу. Представляет некоторую информацию </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.bg-primary </code> </td> <td> Добавляет синий цвет фона к элементу. Представляет что-то важное </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .bg-success </code> </td> <td> Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.bg-предупреждение </code> </td> <td> Добавляет желтый цвет фона к элементу. Обозначает предупреждение или отрицательное действие </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>. Хлебная крошка </code> </td> <td> Пагинация. Указывает расположение текущей страницы в иерархии навигации </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code>.btn </code> </td> <td> Создает простую кнопку (серый фон и закругленные углы) </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-блок </code> </td> <td> Создает кнопку уровня блока, занимающую всю ширину родительского элемента </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-опасный </code> </td> <td> Красная кнопка.Указывает на опасность или негативное действие </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-default </code> </td> <td> Кнопка по умолчанию. Белый фон и серая рамка </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-group </code> </td> <td> Группирует кнопки в одну строку </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code>.btn-group-обоснованный </code> </td> <td> Заставляет группу кнопок занимать всю ширину экрана </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code> .btn-group-lg </code> </td> <td> Большая группа кнопок (увеличивает все кнопки в группе кнопок — увеличенный размер шрифта и отступы) </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code>.btn-group-sm </code> </td> <td> Маленькая группа кнопок (уменьшает все кнопки в группе кнопок) </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code> .btn-group-xs </code> </td> <td> Очень маленькая группа кнопок (делает все кнопки в группе очень маленькими) </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code>.btn-group-вертикальный </code> </td> <td> Делает группу кнопок вертикально сложенной </td> <td> Попытайся </td> <td> Группы кнопок </td> </tr> <tr> <td> <code> .btn-info </code> </td> <td> Голубая кнопка. Представляет информацию </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-ссылка </code> </td> <td> Делает кнопку похожей на ссылку (поведение кнопки получения) </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code>.btn-lg </code> </td> <td> Большая кнопка </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-primary </code> </td> <td> Синяя кнопка. </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-sm </code> </td> <td> Маленькая кнопка </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code>.btn-success </code> </td> <td> Зеленая кнопка. Указывает на успех или положительное действие </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-warning </code> </td> <td> Желтая кнопка. Обозначает предупреждение или негативное действие </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code> .btn-xs </code> </td> <td> Очень маленькая кнопка </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code>.подпись </code> </td> <td> Добавляет текст заголовка в миниатюру <code>. </code> </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .caret </code> </td> <td> Создает значок стрелки курсора, который указывает, что кнопка является раскрывающимся списком </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code> .карусель </code> </td> <td> Создает карусель (слайд-шоу) </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>.карусель-подпись </code> </td> <td> Создает текст заголовка для каждого слайда в карусели </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>. Управление каруселью </code> </td> <td> Контейнер для следующих и предыдущих ссылок </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code> .карусель-индикаторы </code> </td> <td> Добавляет маленькие точки / индикаторы внизу каждого слайда (который указывает, сколько слайдов в карусели и какой слайд пользователь просматривает в данный момент) </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>.карусель внутренняя </code> </td> <td> Контейнер для предметов слайда </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code> центральный блок </code> </td> <td> Центрирует любой элемент (Устанавливает для элемента отображение <code>: блок </code> с полем <code> справа: автоматически </code> и <code> поле слева: автоматически </code>) </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.флажок </code> </td> <td> Контейнер для чекбоксов </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code> .checkbox-inline </code> </td> <td> Отображает несколько флажков в одной строке </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code> .clearfix </code> </td> <td> Очищает поплавки </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.закрыть </code> </td> <td> Обозначает значок закрытия </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .col - * - * </code> </td> <td> Адаптивная сетка (диапазон 1–12 столбцов). Очень маленькие устройства Телефоны (<768 пикселей), Маленькие устройства Планшеты (≥768 пикселей), Средние устройства Настольные компьютеры (≥992 пикселей), Большие устройства Настольные компьютеры (≥1200 пикселей). Значения столбца могут быть от 1 до 12. </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code>.col - * - смещение- * </code> </td> <td> Переместите столбцы вправо. Эти классы увеличивают левое поле столбца на * столбцы </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code> .col - * - тянуть- * </code> </td> <td> Изменяет порядок столбцов сетки </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code> .col - * - push- * </code> </td> <td> Изменяет порядок столбцов сетки </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code>.свернуть </code> </td> <td> Обозначает сворачиваемое содержимое, которое можно скрыть или показать по запросу </td> <td> Попытайся </td> <td> Свернуть </td> </tr> <tr> <td> <code>. Разрушение в </code> </td> <td> По умолчанию показывать сворачиваемое содержимое </td> <td> Попытайся </td> <td> Свернуть </td> </tr> <tr> <td> <code>. Контейнер </code> </td> <td> Контейнер фиксированной ширины, ширина которого определяется узлами экрана.Равное поле слева и справа. </td> <td> Попытайся </td> <td> Контейнеры </td> </tr> <tr> <td> <code>. Контейнер для жидкости </code> </td> <td> Контейнер, занимающий всю ширину экрана </td> <td> Попытайся </td> <td> Контейнеры </td> </tr> <tr> <td> <code>. Контрольная этикетка </code> </td> <td> Позволяет использовать метку для проверки формы </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code>.опасность </code> </td> <td> Добавляет красный фон в строку таблицы (<code> <tr> </code> или ячейку таблицы (<code> <td> </code>). Указывает на опасное или потенциально отрицательное действие </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>. Отключено </code> </td> <td> Отключает кнопку <strong> </strong> (добавляет непрозрачность и значок запрета на парковку при наведении курсора) </td> <td> Попытайся </td> <td> Кнопки </td> </tr> <tr> <td> <code>.отключен </code> </td> <td> Отключает раскрывающийся список <strong>. </strong> элемент (добавляет серый цвет текста и значок запрета парковки при наведении курсора) </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>. Отключено </code> </td> <td> Отключает ссылку <strong> для разбивки на страницы </strong> (нельзя щелкнуть — добавляет серый цвет текста и значок запрета на парковку при наведении курсора) </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code>.отключен </code> </td> <td> Отключает список <strong> </strong> элемент в группе списков (нельзя щелкнуть — добавляет серый цвет фона и значок запрета парковки при наведении курсора) </td> <td> Попытайся </td> <td> Список групп </td> </tr> <tr> <td> <code>. Делитель </code> </td> <td> Используется для разделения ссылок в раскрывающемся меню тонкой горизонтальной рамкой </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>.dl-горизонтальный </code> </td> <td> Выстраивает в ряд термины <code> <dt> </code> и описания <code> <dd> </code> в элементах <code> <dl> </code>. Начинается как по умолчанию <code> <dl> </code> s, но когда окно браузера расширяется, оно выстраивается бок о бок </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Выпадение </code> </td> <td> Создает переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>.раскрывающийся заголовок </code> </td> <td> Используется для добавления заголовков в раскрывающееся меню </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>. Выпадающее меню </code> </td> <td> Добавляет стили по умолчанию для контейнера раскрывающегося меню </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>. Dropdown-menu-right </code> </td> <td> Выравнивает раскрывающееся меню по правому краю </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>.раскрывающийся список </code> </td> <td> Используется на кнопке, которая должна скрывать и отображать (переключать) раскрывающееся меню </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>. Dropup </code> </td> <td> Обозначает раскрывающееся меню (вверх, а не вниз) </td> <td> Попытайся </td> <td> Выпадающее меню </td> </tr> <tr> <td> <code>. Адаптируется к встраиванию </code> </td> <td> Контейнер для встроенного содержимого.Делает видео или слайд-шоу правильно масштабируемыми на любом устройстве </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .embed-response-16by9 </code> </td> <td> Контейнер для встроенного содержимого. Создает встроенный контент с соотношением сторон 16: 9 </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .embed-response-4by3 </code> </td> <td> Контейнер для встроенного содержимого.Создает встроенный контент с соотношением сторон 4: 3 </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> элемент, реагирующий на встраивание </code> </td> <td> Используется внутри <code> .embed-responsive </code>. Красиво масштабирует видео до родительского элемента </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code>. Затухание </code> </td> <td> Добавляет эффект затухания при закрытии окна предупреждения </td> <td> Попытайся </td> <td> Оповещения </td> </tr> <tr> <td> <code>.форма-контроль </code> </td> <td> Используется для ввода, текстового поля и элементов выбора, чтобы охватить всю ширину страницы и сделать их адаптивными </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code> .form-control-feedback </code> </td> <td> Класс проверки формы </td> <td> Попытайся </td> <td> Входы 2 </td> </tr> <tr> <td> <code> .form-control-static </code> </td> <td> Добавляет простой текст рядом с меткой формы в горизонтальной форме </td> <td> Попытайся </td> <td> Входы 2 </td> </tr> <tr> <td> <code>.форма-группа </code> </td> <td> Контейнер для ввода формы и этикетки </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code> .form-inline </code> </td> <td> Делает <form> выровненным по левому краю с элементами управления встроенным блоком (только это применяется к формам в области просмотра шириной не менее 768 пикселей) </td> <td> Попробовать </td> <td> Формы </td> </tr> <tr> <td> <code>.форма-горизонтальная </code> </td> <td> Выравнивает метки и группы элементов управления формы по горизонтали </td> <td> Попробовать </td> <td> Формы </td> </tr> <tr> <td> <code> .glyphicon </code> </td> <td> Создает значок. Bootstrap предоставляет 260 бесплатных глификонов из набора </td> Glyphicons Halflings. <td> Попытайся </td> <td> Глификоны </td> </tr> <tr> <td> <code>. Опасная опасность </code> </td> <td> Добавляет красный цвет к метке и красную границу для ввода, а также значок ошибки внутри ввода (используется вместе с <code>.имеет обратную связь </code>) </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code>. Has-feedback </code> </td> <td> Добавляет значки обратной связи для входов (галочки, предупреждения и знаки ошибок) </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code>. Успех </code> </td> <td> Добавляет зеленый цвет к метке и зеленую границу для ввода, а также значок галочки внутри ввода (используется вместе с <code>.имеет обратную связь </code>) </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code> .has-warning </code> </td> <td> Добавляет желто-оранжевый цвет к метке и желто-оранжевую границу для ввода, а также значок галочки внутри ввода (используется вместе с <code> .has-feedback </code>) </td> <td> Попытайся </td> <td> Формы </td> </tr> <tr> <td> <code>.блок помощи </code> </td> <td> Блок текста справки, который переносится на новую строку и может выходить за пределы одной строки. </td> <td> Попытайся </td> <td> Размер входа </td> </tr> <tr> <td> <code>. Скрытый </code> </td> <td> Принудительно скрывает элемент (отображение <code>: нет </code>) </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .hidden- * </code> </td> <td> Скрывает содержимое в зависимости от размера экрана </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.скрыть </code> </td> <td> Не рекомендуется. Используйте <code> .hidden </code> вместо </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .h2 - .h6 </code> </td> <td> Делает элемент похожим на заголовок выбранного класса (h2-h6) </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Пиктограмма </code> </td> <td> Используется в навигационной панели для создания гамбургер-меню (три горизонтальные полосы) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.значок-следующий </code> </td> <td> Значок Unicode (стрелка вправо), используется в каруселях. Его часто заменяют глификоном </td>. <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code> .icon-prev </code> </td> <td> Значок Unicode (стрелка влево), используется в каруселях. Его часто заменяют глификоном </td>. <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>.img-circle </code> </td> <td> Преобразует изображение в круг (не поддерживается в IE8 и более ранних версиях) </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .img-отзывчивый </code> </td> <td> Делает изображение адаптивным </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .img-закругленное </code> </td> <td> Добавляет закругленные углы к изображению </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code>.img-thumbnail </code> </td> <td> Преобразует изображение в миниатюру (границы) </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .в </code> </td> <td> Затухает на вкладках </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code> .info </code> </td> <td> Добавляет голубой фон в строку таблицы (<code> <tr> </code> или ячейку таблицы (<code> <td> </code>).Указывает на нейтральное информативное изменение или действие </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code> .инициализм </code> </td> <td> Отображает текст внутри элемента <code> <abbr> </code> немного меньшим размером шрифта </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Группа ввода </code> </td> <td> Контейнер для улучшения ввода путем добавления значка, текста или кнопки спереди или сзади в качестве «справочного текста» </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code>.вход-группа-LG </code> </td> <td> Большая группа входов </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code>. Вход-группа-см </code> </td> <td> Малая группа ввода </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code>. Вход-группа-аддон </code> </td> <td> Вместе с классом <code> .input-group </code> этот класс позволяет добавлять значок или текст справки рядом с полем ввода </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code>.ввод-группа-БТН </code> </td> <td> Вместе с классом <code> .input-group </code> этот класс прикрепляет кнопку рядом с входом. Часто используется как строка поиска </td> <td> Попытайся </td> <td> Входы </td> </tr> <tr> <td> <code> .input-lg </code> </td> <td> Большое поле ввода </td> <td> Попытайся </td> <td> Размер входа </td> </tr> <tr> <td> <code>.ввод-см </code> </td> <td> Малое поле ввода </td> <td> Попытайся </td> <td> Размер входа </td> </tr> <tr> <td> <code>. Невидимый </code> </td> <td> Делает элемент невидимым (видимость <code>: скрыт </code>). <strong> Примечание: </strong> Даже если элемент невидим, он займет место на странице </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.товар </code> </td> <td> Класс добавлен к каждому элементу карусели. Может быть текст или изображения </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code> .джумботрон </code> </td> <td> Создает серый прямоугольник с полями и закругленными углами, увеличивающий размер шрифта текста внутри него. Создает большую рамку для привлечения дополнительного внимания к особому контенту или информации </td> <td> Попытайся </td> <td> Jumbotron </td> </tr> <tr> <td> <code>.этикетка </code> </td> <td> Добавляет к элементу серую рамку с закругленными углами. Предоставляет дополнительную информацию о чем-либо (например, «Новое») </td> <td> Попытайся </td> <td> Этикетки </td> </tr> <tr> <td> <code>. Этикетка-опасность </code> </td> <td> Красная этикетка </td> <td> Попытайся </td> <td> Этикетки </td> </tr> <tr> <td> <code> .label-info </code> </td> <td> Голубая этикетка </td> <td> Попытайся </td> <td> Этикетки </td> </tr> <tr> <td> <code>.этикетка-успех </code> </td> <td> Зеленая этикетка </td> <td> Попытайся </td> <td> Этикетки </td> </tr> <tr> <td> <code>. Этикетка-предупреждение </code> </td> <td> Желтая этикетка </td> <td> Попытайся </td> <td> Этикетки </td> </tr> <tr> <td> <code> Свинец </code> </td> <td> Увеличить размер шрифта и высоту строки абзаца </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.левый </code> </td> <td> Используется для определения левого элемента управления каруселью </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code> .list-group </code> </td> <td> Создает группу списка с рамкой для <code> <li> </code> элементов </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code> .list-group-item </code> </td> <td> Добавлен к каждому элементу <code> <li> </code> в группе списков </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code>.список-группа-элемент-заголовок </code> </td> <td> Создает заголовок группы списка (используется в других элементах, кроме <code> <li> </code>) </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code> .list-group-item-text </code> </td> <td> Используется для текста элемента внутри группы списка (используется для других элементов, кроме <code> <li> </code>) </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code>.список-группа-пункт-опасность </code> </td> <td> Красный цвет фона для элемента списка в группе списков </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code>. List-group-item-info </code> </td> <td> Голубой цвет фона для элемента списка в группе списков </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code> .list-group-item-success </code> </td> <td> Зеленый цвет фона для элемента списка в группе списков </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code>.список-группа-элемент-предупреждение </code> </td> <td> Желтый цвет фона для элемента списка в группе списков </td> <td> Попытайся </td> <td> Группа списка </td> </tr> <tr> <td> <code> .list-inline </code> </td> <td> Помещает все элементы списка в одну строку (горизонтальное меню) </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code>. Список без стиля </code> </td> <td> Удаляет все стили списка по умолчанию (маркеры, левое поле и т. Д.).) стайлинг от <code> <ul> </code> или <code> <ol> </code> список </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .марка </code> </td> <td> Выделение текста: выделенный текст </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .media </code> </td> <td> Выравнивает медиа-объекты (например, изображения или видео — часто используются для комментариев в сообщениях в блогах и т. Д.) </td> <td> Попытайся </td> <td> Медиа-объекты </td> </tr> <tr> <td> <code>.медиа-тело </code> </td> <td> Текст, который должен отображаться рядом с медиа-объектом </td> <td> Попытайся </td> <td> Медиа-объекты </td> </tr> <tr> <td> <code>. Медиа-заголовок </code> </td> <td> Создает заголовок внутри медиа-объекта </td> <td> Попытайся </td> <td> Медиа-объекты </td> </tr> <tr> <td> <code> .media-list </code> </td> <td> Вложенные списки носителей </td> <td> Попытайся </td> <td> Медиа-объекты </td> </tr> <tr> <td> <code>.медиа-объект </code> </td> <td> Обозначает медиа-объект (изображение или видео) </td> <td> Попытайся </td> <td> Медиа-объекты </td> </tr> <tr> <td> <code>. Модальный </code> </td> <td> Определяет содержимое как модальное и привлекает к нему внимание </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code>. Модальный кузов </code> </td> <td> Определяет стиль тела модального окна.Добавьте сюда любую разметку HTML (p, img и т. Д.) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code> .modal-content </code> </td> <td> Стилизует модальное окно (граница, цвет фона и т. Д.). Внутри этого добавьте верхний, основной и нижний колонтитулы модального окна, если необходимо </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code> .modal-dialog </code> </td> <td> Устанавливает правильную ширину и поля модального окна </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code>.модальный нижний колонтитул </code> </td> <td> Нижний колонтитул модального окна (часто содержит кнопку действия и кнопку закрытия) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code> .modal-header </code> </td> <td> Заголовок модального окна (часто содержит заголовок и кнопку закрытия) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code>.модальный-LG </code> </td> <td> Большое модальное окно (шире, чем по умолчанию) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code>. Модально-открытый </code> </td> <td> Используется в элементе <code> <body> </code> для предотвращения прокрутки страницы (<code> переполнение: скрыто </code>) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code> .modal-sm </code> </td> <td> Малый модальный (без ширины) </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code>.модальный заголовок </code> </td> <td> Название модального окна </td> <td> Попытайся </td> <td> Модалы </td> </tr> <tr> <td> <code> .nav nav-tabs </code> </td> <td> Обозначает меню с вкладками </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code> .nav nav-pills </code> </td> <td> Обозначает меню таблеток </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code>.nav .navbar-nav </code> </td> <td> Используется в контейнере <code> <ul> </code>, который содержит элементы списка со ссылками внутри панели навигации </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>. С выравниванием по навигации </code> </td> <td> Центры таблеток / таблеток. Обратите внимание, что на экранах размером менее 768 пикселей элементы складываются друг в друга (содержимое остается по центру) </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code>.с навигацией </code> </td> <td> Таблетки или таблетки вертикальной стопкой </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code> .nav-tabs </code> </td> <td> Создает меню с вкладками </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code> .navbar </code> </td> <td> Создает панель навигации </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.марка навбара </code> </td> <td> Добавлен к ссылке или элементу заголовка внутри панели навигации для представления логотипа или заголовка </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-btn </code> </td> <td> Выравнивает кнопку внутри панели навигации по вертикали </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-свернуть </code> </td> <td> Сворачивает панель навигации (скрывается и заменяется значком меню / гамбургера на мобильных телефонах и небольших планшетах) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.navbar-по умолчанию </code> </td> <td> Создает панель навигации по умолчанию (светло-серый цвет фона) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-фиксированное дно </code> </td> <td> Заставляет навигационную панель оставаться в нижней части экрана (липкая / фиксированная) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-fixed-top </code> </td> <td> Заставляет навигационную панель оставаться в верхней части экрана (закреплено / фиксировано) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.Навбар-форма </code> </td> <td> Добавлен для формирования элементов внутри навигационной панели для их вертикального центрирования (правильное заполнение) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-заголовок </code> </td> <td> Добавлен в элемент контейнера, содержащий ссылку / элемент, представляющий логотип или заголовок </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.навигационная панель-инверс </code> </td> <td> Создает черную панель навигации (вместо светло-серой) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-левый </code> </td> <td> Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по левому краю </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-link </code> </td> <td> Стилизует элемент так, чтобы он выглядел как ссылка внутри панели навигации (якоря получают правильное заполнение и подчеркивание при наведении, в то время как другие элементы, такие как p или span, получают эффект наведения по умолчанию — белый цвет на перевернутой панели навигации и черный цвет на панели навигации по умолчанию ) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.navbar-nav </code> </td> <td> Используется в контейнере <code> <ul> </code>, который содержит элементы списка со ссылками внутри панели навигации </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-правый </code> </td> <td> Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по правому краю. </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.navbar-static-top </code> </td> <td> Удаляет левую, верхнюю и правую границы (закругленные углы) с панели навигации (панель навигации по умолчанию имеет серую границу и радиус границы 4 пикселя по умолчанию) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .navbar-text </code> </td> <td> Выровняйте по вертикали любые элементы внутри навигационной панели, которые не являются ссылками (обеспечивает правильное заполнение) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code>.navbar-toggle </code> </td> <td> Стилизует кнопку, которая должна открывать панель навигации на маленьких экранах. Часто используется вместе с тремя классами <code> .icon-bar </code> для обозначения переключаемого значка меню (гамбургер / полоски) </td> <td> Попытайся </td> <td> Navbar </td> </tr> <tr> <td> <code> .след. </code> </td> <td> Используется в элементе управления карусели для идентификации следующего элемента управления </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>.следующий </code> </td> <td> Используется для выравнивания кнопок пейджера по правой стороне страницы (следующая кнопка) </td> <td> Попытайся </td> <td> Пейджер </td> </tr> <tr> <td> <code> .page-header </code> </td> <td> Добавляет горизонтальную линию под заголовком (+ добавляет дополнительное пространство вокруг элемента) </td> <td> Попытайся </td> <td> Заголовок страницы </td> </tr> <tr> <td> <code>.пейджер </code> </td> <td> Создает кнопки «предыдущий / следующий» (используется в элементах <code> <ul> </code>) </td> <td> Попытайся </td> <td> Пейджер </td> </tr> <tr> <td> <code> .pagination </code> </td> <td> Создает разбиение на страницы (полезно, если у вас есть веб-сайт с большим количеством страниц. Используется для элементов <code> <ul> </code>) </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code>.pagination-lg </code> </td> <td> Большая разбивка на страницы (каждая ссылка на страницу получает размер шрифта 18 пикселей. По умолчанию — 14 пикселей) </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code> .pagination-sm </code> </td> <td> Маленькая разбивка на страницы (каждая ссылка на страницу получает размер шрифта 12 пикселей. По умолчанию 14 пикселей) </td> <td> Попытайся </td> <td> Пагинация </td> </tr> <tr> <td> <code>.панель </code> </td> <td> Создает рамку с рамкой и отступом вокруг ее содержимого </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .панель-корпус </code> </td> <td> Контейнер для содержимого внутри панели </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .панель-развал </code> </td> <td> Сворачиваемая панель (переключение между скрытием и отображением панелей) </td> <td> Попытайся </td> <td> Свернуть </td> </tr> <tr> <td> <code>.панель-опасность </code> </td> <td> Красная панель. Указывает на опасность </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .panel-info </code> </td> <td> Голубая панель. Обозначает информацию </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .панель-успех </code> </td> <td> Зеленая панель. Указывает на успех </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code>.панель-предупреждение </code> </td> <td> Желтая панель. Указывает на предупреждение </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code>. Нижний колонтитул </code> </td> <td> Создает нижний колонтитул панели (светлый цвет фона) </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .panel-group </code> </td> <td> Используется для группировки нескольких панелей вместе.Это удаляет нижнее поле под каждой панелью </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code>. Заголовок панели </code> </td> <td> Создает заголовок панели (светлый цвет фона) </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code> .panel-title </code> </td> <td> Используется внутри заголовка панели <code> </code> для настройки стиля текста (удаляет поля и добавляет размер шрифта 16 пикселей) </td> <td> Попытайся </td> <td> Панели </td> </tr> <tr> <td> <code>.всплывающее окно </code> </td> <td> Всплывающее окно, которое появляется, когда пользователь нажимает на элемент </td> <td> Попытайся </td> <td> Поповер </td> </tr> <tr> <td> <code>. С предварительной прокруткой </code> </td> <td> Делает элемент <code><pre> </code> прокручиваемым (<code> max-height </code> 350 пикселей и обеспечивает полосу прокрутки по оси Y) </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.предыдущее </code> </td> <td> Используется в каруселях для обозначения «предыдущей» ссылки </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>. Предыдущий </code> </td> <td> Используется для выравнивания кнопок пейджера по левой стороне страницы (предыдущая кнопка) </td> <td> Попытайся </td> <td> Пейджер </td> </tr> <tr> <td> <code>. Прогресс </code> </td> <td> Контейнер для прогресс-бара </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>.прогресс-бар </code> </td> <td> Создает индикатор выполнения </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>. Прогресс-бар-опасность </code> </td> <td> Красный индикатор выполнения. Указывает на опасность </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code> .progress-bar-info </code> </td> <td> Голубой индикатор выполнения.Обозначает информацию </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>. Прогресс-бар в полоску </code> </td> <td> Создает полосатый индикатор выполнения </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>. Прогресс-бар-успех </code> </td> <td> Зеленый индикатор выполнения. Указывает на успех </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>.предупреждение-индикатор </code> </td> <td> Желтый индикатор выполнения. Указывает на предупреждение </td> <td> Попытайся </td> <td> Прогресс-бар </td> </tr> <tr> <td> <code>. Левый </code> </td> <td> Плавающий элемент слева </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>. Выдвижной правый </code> </td> <td> Плавающий элемент вправо </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.правый </code> </td> <td> Используется для определения правого элемента управления карусели </td> <td> Попытайся </td> <td> Карусель </td> </tr> <tr> <td> <code>. Ряд </code> </td> <td> Контейнер для отзывчивых столбцов </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code>. Водосточные </code> </td> <td> Удаляет желоба из строки и ее столбцов </td> <td> Попытайся </td> <td> Сетка </td> </tr> <tr> <td> <code>.показать </code> </td> <td> Показывает элемент (отображение <code>: блок) </code> </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>. Маленький </code> </td> <td> Создает более светлый второстепенный текст в любом заголовке </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> только .sr </code> </td> <td> Скрывает элемент на всех устройствах, кроме программ чтения с экрана </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>.SR-только-фокусируемый </code> </td> <td> Скрывает элемент на всех устройствах, кроме программ чтения с экрана </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code>. Успех </code> </td> <td> Добавляет зеленый цвет фона в строку таблицы (<code> <tr> </code> или ячейку таблицы (<code> <td> </code>). Указывает на успех или положительное действие </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>.содержание вкладки </code> </td> <td> Используется вместе с <code> .tab-pane </code> для создания переключаемых / динамических вкладок / таблеток </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code>. Панель </code> </td> <td> Используется вместе с <code> .tab-content </code> для создания переключаемых / динамических вкладок / таблеток </td> <td> Попытайся </td> <td> Вкладки </td> </tr> <tr> <td> <code>.стол </code> </td> <td> Добавляет базовый стиль к таблице (отступы, нижние границы и т. Д.) </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>. С бортиком </code> </td> <td> Добавляет границы со всех сторон таблицы и ячеек </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>. Сгущенный стол </code> </td> <td> Делает стол более компактным, разрезая заполнение ячеек пополам </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>.стол-навес </code> </td> <td> Создает зависающую таблицу (добавляет серый цвет фона в строки таблицы при наведении) </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>. Адаптивный </code> </td> <td> Делает таблицу адаптивной (при необходимости добавляет горизонтальную полосу прокрутки) </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>.текст заглавными буквами </code> </td> <td> Обозначает прописной текст </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .text-center </code> </td> <td> Выравнивание текста по центру </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .text-dangerous </code> </td> <td> Красный цвет текста. Указывает на опасность </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.текст скрыть </code> </td> <td> Скрывает текст (помогает заменить текстовое содержимое элемента фоновым изображением) </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .text-info </code> </td> <td> Голубой цвет текста. Обозначает информацию </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Выравнивание текста </code> </td> <td> Обозначает текст с выравниванием по ширине </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.текст слева </code> </td> <td> Выравнивает текст по левому краю </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Текст в нижнем регистре </code> </td> <td> Переводит текст в нижний регистр </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Без звука </code> </td> <td> Серый цвет текста </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.текст-nowrap </code> </td> <td> Запрещает перенос текста </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code> .text-primary </code> </td> <td> Синий цвет текста </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Текст-право </code> </td> <td> Выравнивает текст по правому краю </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.текст-успех </code> </td> <td> Зеленый цвет текста. Указывает на успех </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Текст верхний регистр </code> </td> <td> Делает текст заглавными </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>. Текст-предупреждение </code> </td> <td> Желто-оранжевый цвет текста. Указывает на предупреждение </td> <td> Попытайся </td> <td> Типографика </td> </tr> <tr> <td> <code>.миниатюра </code> </td> <td> Добавляет рамку вокруг элемента (часто изображений или видео), чтобы он выглядел как миниатюра </td> <td> Попытайся </td> <td> Изображения </td> </tr> <tr> <td> <code> .tooltip </code> </td> <td> Всплывающее окно, которое появляется, когда пользователь наводит указатель мыши на элемент </td> <td> Попытайся </td> <td> Подсказка </td> </tr> <tr> <td> <code>.видимый- * </code> </td> <td> Не рекомендуется, начиная с версии 3.2.0. Используется для отображения и / или скрытия содержимого на устройстве. <strong> Примечание: </strong> Используйте <code> .hidden- * </code> вместо </td> <td> Попытайся </td> <td> Помощники </td> </tr> <tr> <td> <code> .visible-print-block </code> </td> <td> Отображает элемент (отображение <code>: блок </code>) в печатном (предварительном) виде </td> <td> </td> <td> Помощники </td> </tr> <tr> <td> <code>.видимая печать встроенная </code> </td> <td> Отображает элемент (отображение <code>: встроенный </code>) в печатном (предварительном) виде </td> <td> </td> <td> Помощники </td> </tr> <tr> <td> <code> .visible-print-inline-block </code> </td> <td> Отображает элемент (отображение <code>: встроенный блок </code>) в печатном (предварительном) виде </td> <td> </td> <td> Помощники </td> </tr> <tr> <td> <code>.скрытая печать </code> </td> <td> Скрывает элемент (отображение <code>: нет </code>) в режиме печати (предварительный просмотр) </td> <td> </td> <td> Помощники </td> </tr> <tr> <td> <code>. Предупреждение </code> </td> <td> Добавляет желтый цвет фона в строку таблицы (<code> <tr> </code> или ячейку таблицы (<code> <td> </code>). Указывает на предупреждение </td> <td> Попытайся </td> <td> Таблицы </td> </tr> <tr> <td> <code>.колодец </code> </td> <td> Добавляет закругленную границу вокруг элемента с серым цветом фона и небольшим отступом </td> <td> Попытайся </td> <td> Уэллс </td> </tr> <tr> <td> <code> .well-LG </code> </td> <td> Большой колодец (дополнительная обивка) </td> <td> Попытайся </td> <td> Уэллс </td> </tr> <tr> <td> <code> .well-sm </code> </td> <td> Малый колодец (без прокладки) </td> <td> Попытайся </td> <td> Уэллс </td> </tr> </table> <h2><span class="ez-toc-section" id="i-339"> Компоненты начальной загрузки - такой код </span></h2> <h3><span class="ez-toc-section" id="i-340"> Установка </span></h3> <p> Необходимые компоненты: - Bootstrap CSS, jQuery, Popper.js, Bootstrap.js </p> <pre> <code> <head> </head> </code> </pre><h3><span class="ez-toc-section" id="i-341"> Навс </span></h3> <ul> <li> Ряд различных классов помогает установить различные стили навигации (вкладки, горизонтальные ссылки, вертикальные ссылки, активные ссылки, отключенные ссылки и т. Д.)) </li> Элементы навигации <li> в Bootstrap представляют собой только навигационные ссылки, а не общий класс <code> navbar </code>, который добавляет оболочку, в которой вы можете добавлять логотип, ссылки (внутри элемента <code> nav </code>), стили и даже формы ( например, панель поиска). </li> <li> Благодаря различным классам, элементам управления и стилям навигация становится намного глубже. Для получения дополнительной информации посетите: https://getbootstrap.com/docs/4.0/components/navbar/ </li> </ul><pre> <code> <nav> <a href="#"> Активно </a> <a href="#"> Ссылка </a> <a href="#"> Ссылка </a> <a href="#"> Отключено </a> </nav> </code> </pre><h3><span class="ez-toc-section" id="i-342"> Предупреждения </span></h3> <ul> <li> Когда действие на вашем сайте завершено, например, отправка формы, вы можете захотеть перенаправить пользователя на страницу с предупреждающим сообщением.Чтобы добавить роль, вы можете просто включить следующий код и изменить класс. </li> <li> Обратите внимание, что предупреждение <code> </code> является дополнением к <code> первичному предупреждению </code> </li> </ul><pre> <code> <div role = "alert"> Это основное предупреждение - проверьте его! </div> </code> </pre><ul> <li> Для предупреждений разного цвета доступны следующие классы. </li> </ul> <table> <thead> <tr> <th> Класс </th> <th> Цвет оповещения </th> </tr> </thead> <tbody> <tr> <td> первичное оповещение </td> <td> синий </td> </tr> <tr> <td> вторичное оповещение </td> <td> серый </td> </tr> <tr> <td> предупреждение-успех </td> <td> зеленый </td> </tr> <tr> <td> тревога-опасность </td> <td> красный </td> </tr> <tr> <td> предупреждение-предупреждение </td> <td> желтый </td> </tr> <tr> <td> информация оповещения </td> <td> бирюзовый </td> </tr> </tbody> </table> <p> </p> <h3><span class="ez-toc-section" id="i-343"> Кнопки </span></h3> <ul> <li> Аналогичным образом можно добавить кнопки того же цвета.Классы для кнопок аналогичны классам предупреждений для непрерывности. Следующий код добавит кнопку на вашу веб-страницу: </li> </ul><pre> <code> <button type = "button"> Основной </button> </code> </pre><ul> <li> Как видите, здесь также используется «первичный» язык в качестве дескриптора. Это приведет к тому, что кнопка будет того же цвета, что и основной компонент предупреждения. Следующие классы / стили кнопок доступны для использования в Bootstrap 4: </li> </ul> <table> <thead> <tr> <th> Класс </th> <th> Цвет кнопки </th> </tr> </thead> <tbody> <tr> <td> btn-primary </td> <td> синий </td> </tr> <tr> <td> БТН вторичный </td> <td> серый </td> </tr> <tr> <td> бтн-успех </td> <td> зеленый </td> </tr> <tr> <td> БТН-Опасность </td> <td> красный </td> </tr> <tr> <td> btn-предупреждение </td> <td> желтый </td> </tr> <tr> <td> btn-info </td> <td> бирюзовый </td> </tr> </tbody> </table> <ul> <li> Вы также можете изменить класс, чтобы кнопка была «пустой», или, скорее, имела прозрачный фон с цветной рамкой и текстом.Для этого нужно просто изменить <code> btn-primary </code> на <code> btn-outline-primary </code>. </li> </ul><pre> <code> <button type = "button"> Основной </button> </code> </pre><ul> <li> Обратите внимание, что Bootstrap использует семантический элемент <code> <button> </code>, а не просто div с классом 'btn-primary'. Это необходимо для применения всех стилей Bootstrap по умолчанию, поэтому постарайтесь не забыть! Bootstrap обычно по возможности использует семантические элементы HTML. </li> </ul> <p> </p> <h3><span class="ez-toc-section" id="i-344"> Карусель </span></h3> <ul> <li> <p> Bootstrap предлагает предварительно упакованные карусели изображений, которые можно добавить в заголовок (или где-нибудь еще) на вашем веб-сайте.Этот компонент имеет множество различных параметров и атрибутов, таких как разбиение на страницы (индикаторы слайдов), элементы управления (стрелки влево / вправо для прокрутки фотографий), миниатюры и подписи. </p> </li> <li> <p> Карусели, как мне кажется, более сложный и сложный компонент Bootstrap, поэтому давайте разберем относительно простую разметку ниже: </p> </li> </ul><pre> <code> <div data-ride = "carousel"> <div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Первый слайд"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Первый слайд"><noscript><img src = "..." alt = "Первый слайд"></noscript> </div> <div> <noscript><img class="lazy lazy-hidden" src = "... "alt =" Второй слайд "></noscript><img class="lazyload lazy lazy-hidden" src = "... "alt =" Второй слайд "><noscript><img src = "... "alt =" Второй слайд "></noscript> </div> <div> <noscript><img class="lazy lazy-hidden" src = "..." alt = "Третий слайд"></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "Третий слайд"><noscript><img src = "..." alt = "Третий слайд"></noscript> </div> </div> <a href="#carouselExampleControls" role="button" data-slide="prev"> <span aria-hidden = "true"> </span> <span> Предыдущий </span> </a> <a href="#carouselExampleControls" role="button" data-slide="next"> <span aria-hidden = "true"> </span> <span> Далее </span> </a> </div> </code> </pre><ul> <li> Этот код добавит карусель с тремя разными изображениями.<code> d-block </code> и <code> w-100 </code> - это классы, которые переопределяют поведение изображения по умолчанию в вашем браузере и заставляют изображение быть полноширинным и отзывчивым. </li> <li> Вы можете видеть элементы <code> carousel-control </code>, которые добавляют стрелки влево и вправо к слайд-шоу. </li> <li> <code> sr-only </code> классы предназначены для программ чтения с экрана. </li> <li> Дополнительные классы и атрибуты для компонента карусели можно найти по адресу: https://getbootstrap.com/docs/4.0/components/carousel/ </li> </ul> <p> </p> <h3><span class="ez-toc-section" id="i-345"> Джамботрон </span></h3> <ul> <li> Компонент jumbotron добавляет изображение главного героя в верхнюю часть вашего веб-сайта.Эта разметка относительно проста, но очень полезна, поскольку сегодня большинство веб-сайтов используют изображения-герои на своей домашней странице. </li> </ul><pre> <code> <div> <div> <h2><span class="ez-toc-section" id="i-346"> Жамботрон для жидкости </span></h2> <p> Это модифицированный джамботрон, который занимает все горизонтальное пространство своего родителя. </p> </div> </div> </code> </pre><h3><span class="ez-toc-section" id="i-347"> Карты Примеры кодов </span></h3> <ul> <li> Эта карточка будет отображаться во всю ширину, если вы не добавите в элемент карточки дополнительные стили или классы, например <code> col-sm-6 </code>.В предыдущем уроке мы рассмотрели классы на основе столбцов и то, как установить заданную ширину для элемента. </li> </ul><pre> <code> <div> <div> Рекомендуемые </div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> </div> </code> </pre><pre> <code> <div> <div> <h5><span class="ez-toc-section" id="i-348"> Название карточки </span></h5> <h6><span class="ez-toc-section" id="i-349"> Подзаголовок карточки </span></h6> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> <a href="#"> Ссылка на карту </a> <a href="#"> Другая ссылка </a> </div> </div> </code> </pre><h2><span class="ez-toc-section" id="_Toptal"> Простое руководство по начальной загрузке | Toptal </span></h2> <p> Если вы занимаетесь чем-то связанным с Интернетом, скорее всего, вы слышали о Bootstrap. Если к настоящему времени вы все еще не знаете, что такое Bootstrap, или просто хотите найти руководство по Bootstrap для начинающих, чтобы лучше понять, что это такое и что у него лучше всего получается, вы попали в нужное место. </p> <p> Bootstrap - это мощный набор инструментов, представляющий собой набор инструментов HTML, CSS и JavaScript для создания и построения веб-страниц и веб-приложений.Это бесплатный проект с открытым исходным кодом, размещенный на GitHub и изначально созданный (и для) Twitter. </p> <p> </p> <p> Итак, зачем изучать Boostrap? </p> <p> После выпуска с открытым исходным кодом в 2011 году Bootstrap очень быстро стал популярным, и не без причины. Веб-дизайнеры и веб-разработчики любят Bootstrap, потому что он гибок и с ним легко работать. Его основные преимущества заключаются в том, что он адаптивен по дизайну, поддерживает широкую совместимость с браузерами, предлагает согласованный дизайн с использованием повторно используемых компонентов, а также очень прост в использовании и быстро обучается.Он предлагает широкую расширяемость с использованием JavaScript, поставляется со встроенной поддержкой плагинов jQuery и программным API JavaScript. Bootstrap можно использовать с любой IDE или редактором, а также с любой серверной технологией и языком, от ASP.NET до PHP и Ruby on Rails. </p> <p> С помощью Bootstrap веб-разработчики могут сосредоточиться на разработке, не беспокоясь о дизайне, и быстро создать и запустить красивый веб-сайт. И наоборот, это дает веб-дизайнерам прочную основу для создания интересных тем Bootstrap.</p> <h3><span class="ez-toc-section" id="_Bootstrap_Basics"> Начало работы с Bootstrap Basics </span></h3> <p> Bootstrap доступен в двух формах; как предварительно скомпилированную версию, так и как версию исходного кода. Версия с исходным кодом использует препроцессор Less CSS, но если вам больше нравится Sass, также доступен официальный порт Sass для Bootstrap. Чтобы упростить использование префиксов поставщиков CSS, Bootstrap использует Autoprefixer. </p> <p> Версия исходного кода включает исходный код стилей, написанный на Less (или Sass), весь JavaScript и сопроводительную документацию.Это позволяет более амбициозным дизайнерам и разработчикам изменять и настраивать по своему усмотрению все предоставленные стили и создавать свою собственную версию Bootstrap. Но если вы не знакомы с Less (или Sass) или просто не заинтересованы в изменении исходного кода, не волнуйтесь. Вы можете просто использовать предварительно скомпилированный ванильный CSS. Позже все стили можно переопределить, используя собственные стили. </p> <h4><span class="ez-toc-section" id="i-350"> Структура файла </span></h4> <p> Мы сосредоточимся на предварительно скомпилированной версии, которую можно скачать здесь.Когда вы загружаете zip-архив и распаковываете его, основная файловая структура выглядит так: </p><pre> <code> бутстрап / ├── css / │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js / │ ├── bootstrap.js │ └── bootstrap.min.js └── шрифты / ├── глификоны-халфлинги-regular.eot ├── глификоны-халфлинги-regular.svg ├── глификоны-халфлинги-regular.ttf ├── глификоны-халфлинги-правильные.woff └── глификоны-халфлинги-regular.woff2 </code> </pre><p> Структура Bootstrap довольно проста и не требует пояснений. Он включает предварительно скомпилированные файлы, которые позволяют быстро использовать в любом веб-проекте. Помимо скомпилированных и минифицированных файлов CSS и JS, он также включает шрифты из Glyphicons и необязательную стартовую тему Bootstrap. </p> <p> Эту структуру можно легко включить в файловую структуру вашего собственного проекта, просто включив файлы Bootstrap в том виде, в котором они находятся в zip-архиве, или, если это лучше подходит для вашего проекта, вы можете изменить порядок этих файлов и разместить их в любом месте.Просто убедитесь, что папка шрифтов Glyphicons находится на том же уровне, что и папка CSS. </p> <h4><span class="ez-toc-section" id="_HTML"> Базовый HTML-шаблон начальной загрузки </span></h4> <p> Базовый HTML-шаблон Bootstrap должен выглядеть примерно так: </p><pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> <meta charset = "utf-8"> <meta http-Equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title> Шаблон начальной загрузки </title> <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей "> </head> <body> <h2><span class="ez-toc-section" id="i-351"> Привет, мир! </span></h2> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_c2fbc177cda523ba0411ff4d8002945e.js"></script></body> </html> </code> </pre><p> Важно начинать любой HTML с объявления HTML 5 Doctype, чтобы браузеры знали, какой документ им следует ожидать. Заголовок содержит три важных тега <code> <meta> </code>, которые должны быть объявлены первыми, а любые дополнительные теги заголовка должны быть добавлены после них.Если вы хотите поддерживать старые браузеры, такие как IE8, вы также можете включить прокладку HTML 5 в заголовок, которая позволит использовать элементы HTML5 в старых браузерах, и Respond.js, который будет выполнять полифиллинг CSS3 Media Queries в старых версиях Интернета. Исследователь. </p><pre> <code> <заголовок> ... <! - [если lt IE 9]> <! [endif] -> </head> </code> </pre><p> Хотя это не очень важно, если вы ориентируетесь только на современные браузеры.</p> <p> файлов JavaScript добавляются в конец тела, чтобы веб-страница загружалась визуально до того, как будет выполнен какой-либо JavaScript. jQuery необходим для плагинов Bootstrap, и его необходимо загрузить до <code> bootstrap.js </code>. Если вы не используете какие-либо интерактивные функции Bootstrap, вы также можете исключить эти файлы из источника. </p> <p> Это минимум, необходимый для запуска и запуска базовой разметки Bootstrap. Если вы разработчик, вы, вероятно, захотите взглянуть на более сложные примеры на странице примеров Bootstrap.Если вы дизайнер или просто ищете вдохновения, Bootstrap Expo демонстрирует сайты, созданные с использованием Bootstrap. Как мы увидим позже, каждую часть Bootstrap можно легко настроить с помощью CSS. Но если это не для вас, и вы ищете немного другой внешний вид по сравнению с предварительно упакованными темами Bootstrap, существует множество бесплатных тем с открытым исходным кодом и тем премиум-класса, доступных из таких источников, как Bootswatch и WrapBootstrap. </p> <h4><span class="ez-toc-section" id="i-352"> Шаблоны начальной загрузки и компоненты пользовательского интерфейса </span></h4> <p> Bootstrap поставляется в комплекте с базовыми шаблонами дизайна HTML и CSS, которые включают множество общих компонентов пользовательского интерфейса.К ним относятся типографика, таблицы, формы, кнопки, глификоны, раскрывающиеся списки, кнопки и группы ввода, навигация, разбиение на страницы, ярлыки и значки, оповещения, индикаторы выполнения, модальные окна, вкладки, аккордеоны, карусели и многие другие. </p> <p> Многие из них используют расширения JavaScript и плагины jQuery. </p> <p> Эти шаблоны Bootstrap доступны в виде хорошо продуманных классов CSS, которые вы можете применять к своему HTML для достижения различных эффектов. Это делает использование Bootstrap очень удобным. Используя имена семантических классов, например <code>.success </code>, <code> .warning </code> и <code> .info </code>, эти компоненты легко повторно использовать и расширять. Но в то время как Bootstrap использует описательные имена классов, которые имеют значение, в нем нет конкретных деталей реализации. Все классы можно переопределить с помощью настраиваемого стиля и цвета CSS, но при этом значение класса останется прежним. </p> <h4><span class="ez-toc-section" id="i-353"> Сеточная система начальной загрузки </span></h4> <p> Прежде чем мы углубимся в компоненты и шаблоны дизайна Bootstrap, важно упомянуть одну из основных функций, которые Bootstrap представил в версии 3: философию дизайна, ориентированную на мобильные устройства, результатом которой стал адаптивный дизайн Bootstrap.Конечным результатом является то, что Bootstrap легко и эффективно масштабируется с помощью единой базы кода, от телефонов, планшетов до настольных компьютеров. </p> <p> Эта отзывчивость достигается с помощью гибкой системы сеток Bootstrap, которую можно применять для соответствующего масштабирования до 12 столбцов в соответствии с размером устройства или области просмотра. Сетки обеспечивают структуру макета, определяя горизонтальные и вертикальные направляющие для размещения содержимого и обеспечения полей. Сетки также предлагают интуитивно понятную структуру для зрителей, потому что им легко следить за потоком контента слева направо или справа налево, перемещающимся вниз по странице.До появления сеток и до того, как CSS был настолько мощным, макеты на основе сеток создавались с помощью таблиц, в которых содержимое располагалось внутри ячеек таблицы. По мере того, как CSS становился более зрелым, начал появляться ряд CSS-фреймворков для макетов на основе сетки. К ним относятся сетки YUI, 960 GS и чертежи, и это лишь некоторые из них. </p> <p> Чтобы использовать систему сеток Bootstrap, необходимо соблюдать несколько правил. Элементы столбцов сетки размещаются внутри элементов строк, которые создают горизонтальные группы столбцов. На странице может быть столько строк, сколько нужно, но столбцы должны быть непосредственными дочерними элементами строк.В полной строке ширина столбца будет любой комбинацией, которая в сумме составляет 12, но не обязательно использовать все 12 доступных столбцов. </p> Строки <p> необходимо разместить либо в оболочке макета фиксированной ширины, которая имеет класс <code> .container </code> и ширину 1170 пикселей, либо в оболочку макета полной ширины, которая имеет класс <code> .container-fluid </code> и который включает отзывчивое поведение в этой строке. </p> <p> Сетка Bootstrap имеет четыре уровня классов: <strong> xs </strong> для телефонов (<768 пикселей), <strong> sm </strong> для планшетов (≥768 пикселей), <strong> md </strong> для настольных компьютеров (≥992 пикселей) и <strong> lg </strong> для больших настольных компьютеров (≥ 1200 пикселей).Они в основном определяют размеры, при которых столбцы будут сжиматься или распространяться по горизонтали. Уровни классов можно использовать в любой комбинации для получения динамических и гибких макетов. </p> <p> Например, если мы хотим получить две строки, одну с двумя столбцами и одну с четырьмя столбцами, мы могли бы написать: </p><pre> <code> <div> <div> Первый столбец </div> <div> Второй столбец </div> </div> <div> <div> Первый столбец </div> <div> Второй столбец </div> <div> Третий столбец </div> <div> Четвертый столбец </div> </div> </code> </pre><p> Мы также можем использовать столбцы различной ширины: </p><pre> <code> <div> <div> Более широкий столбец </div> <div> Меньший столбец </div> </div> </code> </pre><p> Мы можем даже сдвигать столбцы, используя смещение, например, для создания более узкого и центрированного содержимого: </p><pre> <code> <div> <div> Центрированный столбец </div> </div> </code> </pre><p> Столбцы могут быть вложенными.Может быть меньше 12 столбцов, и, как упоминалось выше, мы можем выбрать столбцы фиксированной или полной ширины, используя обертки <code> .container </code> или <code> .container-fluid </code> соответственно. </p><pre> <code> <div> <div> <div> Родительский столбец фиксированной ширины <div> <div> Вложенный столбец </div> <div> Вложенный столбец </div> </div> </div> </div> </div> <div> <div> <div> Жидкость.. </div> <div> .. и во всю ширину .. </div> <div> .. пример </div> </div> </div> </code> </pre><p> Если мы объединим разные уровни классов, мы получим разный вид на мобильных и настольных компьютерах. В приведенном ниже примере на рабочем столе будет 4 столбца в строке, а на мобильном устройстве они будут иметь полную ширину и располагаться друг над другом. </p><pre> <code> <div> <div> .col-xs-12 .col-md-3 </div> <div> .col-xs-12 .col-md-3 </div> <div>.col-xs-12 .col-md-3 </div> <div> .col-xs-12 .col-md-3 </div> </div> </code> </pre><p> </p> <p> Можно полностью отключить отзывчивость страницы. Это в основном отключит аспекты «мобильного сайта» Bootstrap. Просто имейте в виду, что если вы отключите отзывчивость, любой компонент фиксированной ширины, например фиксированная панель навигации, не будет виден, когда область просмотра станет уже, чем содержимое страницы. Для неотзывчивого контейнера это означает ширину 970 пикселей. Также в этом случае панели навигации не будут сворачиваться в мобильных представлениях, как описано ниже.</p> <p> Это только основные примеры. Чтобы увидеть весь потенциал сеток, ознакомьтесь с документацией Bootstrap's Grids. </p> <h4><span class="ez-toc-section" id="_Bootstrap-7"> Типография Bootstrap </span></h4> <p> Начинающие разработчики часто предполагают, что их чистый HTML без стиля будет выглядеть одинаково во всех браузерах. К сожалению, каждый браузер имеет свою собственную таблицу стилей «пользовательского агента» по умолчанию, которая применяется к HTML, и нет двух браузеров с одинаковыми значениями по умолчанию. Например, размеры шрифта заголовка не согласованы в браузерах, в некоторых неупорядоченных и упорядоченных списках оставлены поля, а в других - отступы, браузеры применяют настраиваемые границы и отступы к телу HTML, и даже кнопки отображаются в разных браузерах по-разному.Чтобы устранить все эти несоответствия, были созданы различные правила «сброса» CSS, которые определяют согласованные стили по умолчанию. </p> <p> Bootstrap, помимо чистого сброса CSS, предлагает еще несколько полезных вещей. Он поставляется с normalize.css, готовой для HTML5 альтернативой сбросу CSS, а также имеет несколько хорошо продуманных собственных значений по умолчанию. Например, Bootstrap устанавливает глобальный размер шрифта <code> по умолчанию </code> на 14 пикселей с высотой строки 1,428. Шрифт по умолчанию изменен на Helvetica / Arial с резервным шрифтом без засечек.Все эти стили применяются к <code> <body>, </code> и всем абзацам с добавлением того, что <code> <p> </code> (абзацы) получают нижнее поле, равное половине их вычисленной высоты строки (по умолчанию 10 пикселей). Помимо этих значений по умолчанию, существуют также настраиваемые стили для стандартных тегов HTML, которые обеспечивают большую согласованность текста, такие как выделенный текст (<code> <mark> </code>), удаленный текст (<code> <del> </code> и <code> <s> </code>), подчеркнутый текст (<code> <u> </code>), мелкий текст (<code> <small> </code>) и полужирный текст (<code> <strong> </code>).Классы выравнивания помогают упорядочить контент на странице с помощью классов <code> .text-left </code>, <code> .text-center </code>, <code> .text-right </code>, <code> .text-justify </code> и <code> .text-nowrap </code>. Существуют также предопределенные стили для блочных кавычек, неупорядоченный и упорядоченный список со встроенными параметрами, и это лишь некоторые из них. Чтобы получить полный список, перейдите на страницу Bootstrap Typography. </p> <p> Одна интересная вещь, которую также делает возможной Bootstrap, заключается в том, что вы можете использовать, например, стили заголовков, используя либо тег <code> <h2> </h2></code>, либо <code>.h2 </code> кл. Последний будет соответствовать стилю заголовка <code> <h2> </h2> </code>, но позволит отображать текст в строке. </p> <p> </p> <h4><span class="ez-toc-section" id="i-354"> Формы </span></h4> Формы <p> прошли долгий путь за долгие годы, и сегодня использование веб-форм является одним из наиболее распространенных действий, выполняемых при просмотре веб-страниц. В то время как HTML5 представил ряд новых атрибутов форм, типов ввода и других вспомогательных элементов, браузеры не сильно улучшили формы визуально. Это одна из областей, в которой Bootstrap действительно выделяется, потому что выравнивание и стилизация меток и входных данных, проверка форм и отображение сообщений об ошибках могут быть сложными без какой-либо помощи.</p> <p> Во-первых, Bootstrap устанавливает для всех текстовых элементов ввода, таких как <code> <input> </code>, <code> <textarea> </code> и <code> <select> </code>, ширину 100% родительского элемента формы. Это также дает вам возможность выбирать между встроенными формами, которые будут отображать несколько меток и полей ввода в одной строке, с использованием класса <code> .form-inline </code> или горизонтальных форм, которые используют сетки для выравнивания каждого ввода по отдельности. row, используя класс <code> .form-horizontal </code>.А если вам нужно разместить простой текст рядом с меткой формы, вместо поля ввода, вы можете присвоить ему класс <code> .form-control-static </code>, чтобы он соответствовал визуальному виду формы. </p> <p> Возможно, самая лучшая функция, которую Bootstrap привносит в формы, - это стили проверки ошибок, предупреждений и успешных состояний. Их можно применить с помощью классов <code> .has-warning </code>, <code> .has-error </code> и <code> .has-success </code> соответственно. Комбинируя это со значками, которые можно разместить внутри форм ввода, мы можем получить быстрые и эффективные эффекты проверки формы, даже без использования текстовых сообщений об ошибках.</p> <p> Следующий фрагмент кода сгенерирует поле ввода со знаком @, чтобы указать, что мы ищем электронное письмо, а также со значком предупреждения и желтым контуром, указывающим, что в поле ввода что-то не так. </p><pre> <code> <div> <label for = "inputWarning"> Поле ввода адреса электронной почты с предупреждением </label> <div> <span> @ </span> <input type = "text" aria-describeby = "inputGroupWarningStatus"> </div> <span aria-hidden = "true"> </span> <span> (предупреждение) </span> </div> </code> </pre><p> </p> <p> Опять же, здесь мы коснулись лишь поверхности.Дополнительные примеры см. В документации Bootstrap Forms. </p> <h4><span class="ez-toc-section" id="i-355"> Изображения и значки </span></h4> Изображения <p> в Bootstrap можно сделать адаптивными, просто присвоив им класс </code> .img-responsive </code>. Это применит <code> max-width: 100%; </code> <code> высота: авто; </code> и <code> дисплей: блок; </code> к рассматриваемому изображению, чтобы оно масштабировалось до родительского элемента. </p> <p> Помимо создания адаптивных изображений, мы можем легко добавлять различные эффекты. Например, у <code> используются закругленные углы.img-rounded </code>, и изображение может иметь форму круга с помощью <code> .img-circle </code> или эскиза с помощью класса <code> .img-thumbnail </code>. </p> <p> Bootstrap поставляется в комплекте с более чем 260 глифами в формате шрифта из набора Glyphicons Halflings. Ян Коваржик, автор и дизайнер Glyphicons, сделал их доступными для Bootstrap бесплатно и по той же лицензии, что и Bootstrap, и это здорово. Иконки шрифтов имеют много преимуществ по сравнению с обычными растровыми изображениями, главное из которых заключается в том, что они масштабируемы.Их также можно легко настроить, используя только CSS, поэтому изменение размера или цвета или даже добавление тени - это легкий ветерок. </p> <h4><span class="ez-toc-section" id="i-356"> Кнопки, группы кнопок и раскрывающиеся списки кнопок </span></h4> <p> Кнопки - это одна из вещей, которые каждый браузер отображает совершенно по-разному. Если вы хотите, чтобы дизайн во всех браузерах был единообразным, это может стать большой проблемой. К счастью, Bootstrap предлагает элегантное решение и для кнопок. И помимо того, что они единообразны, он предлагает множество вариаций.Вы можете применить класс <code> .btn </code> к элементам <code> <a> </code> и <code> <input> </code>. Вы можете сгруппировать серию кнопок в одну строку, используя класс <code> .btn-group </code> для родительского <code> <div> </code>. С небольшой помощью JavaScript вы можете создать для кнопок поведение в стиле радио и флажка. Или вы можете превратить свои кнопки в раскрывающиеся меню, поместив их в <code> .btn-group </code> и предоставив правильную разметку меню для неупорядоченного списка элементов.</p> <h4><span class="ez-toc-section" id="i-357"> Навбары </span></h4> <p> Панель навигации или панель навигации - это компонент Bootstrap, разработанный специально для создания основного меню навигации веб-сайта. На больших экранах он отображается горизонтально, а на маленьких и мобильных экранах (ниже 768 пикселей) он превращается в раскрывающееся меню «гамбургер». Под капотом панель навигации представляет собой неупорядоченный встроенный список пунктов меню с дополнительными элементами HTML, которые добавляются по желанию. Среди возможных дополнений - брендинг (текст или логотип), элементы формы, такие как панель поиска и раскрывающиеся меню.На выбор доступны два стиля: светлый и темный, перевернутый. Элементы на панели навигации можно выровнять влево или вправо, применив классы <code> .navbar-left </code> или <code> .navbar-right </code> соответственно. </p> <p> Навбары могут иметь 4 различных положения. Положение с плавающей запятой по умолчанию имеет вокруг себя буферное пространство; статическая навигационная панель во всю ширину прокручивается, когда пользователь прокручивает страницу вниз, а фиксированная навигационная панель, которая может быть либо вверху, либо внизу окна, всегда видна на странице, независимо от того, куда пользователь прокрутил страницу .</p> <h3><span class="ez-toc-section" id="i-358"> Заключение </span></h3> <p> Это охватывает лишь некоторые из замечательных компонентов Bootstrap, которые ставят Bootstrap впереди аналогичных фреймворков, библиотек и наборов инструментов. С Bootstrap всего несколько простых классов CSS - это все, что нужно для быстрого и легкого создания полностью адаптивного и красивого интерфейса. Это отличная отправная точка для вашего следующего большого проекта или стартапа. </p> <h2><span class="ez-toc-section" id="Bootstrap_Studio"> Bootstrap Studio - революционный инструмент веб-дизайна </span></h2> <i/> <h5><span class="ez-toc-section" id="_Bootstrap_3_4_5"> Создан для Bootstrap 3, 4 и 5 </span></h5> <p> Bootstrap Studio знает, как создать действительную страницу Bootstrap и автоматически записывает правильный HTML.Он поддерживает Bootstrap 3, Bootstrap 4 и Bootstrap 5 и может преобразовывать ваши проекты из одного в другой. </p> <i/> <h5><span class="ez-toc-section" id="i-359"> Публикация в один клик </span></h5> <p> Вы можете экспортировать свой дизайн как статический веб-сайт или опубликовать его одним щелчком мыши на нашей платформе хостинга следующего поколения. Он предлагает HTTPS, пользовательские домены, ключи доступа и абсолютно бесплатен! </p> <i/> <h5><span class="ez-toc-section" id="i-360"> Сеточные инструменты </span></h5> <p> В приложении есть специализированные инструменты для работы с сеткой Bootstrap.Легко создавайте, изменяйте размер и смещение столбцов, а также применяйте адаптивные классы видимости. </p> <i/> <h5><span class="ez-toc-section" id="i-361"> Плавная анимация </span></h5> <p> В нашем приложении вы можете создавать плавные CSS-анимации, которые запускаются при прокрутке или наведении курсора в браузере. У нас также есть специальный компонент Parallax для создания красивых фонов изображений. </p> <i/> <h5><span class="ez-toc-section" id="Google_Webfonts"> Google Webfonts </span></h5> <p> Bootstrap Studio интегрирован с Google Webfonts и дает вам простой способ импортировать шрифты и управлять ими.Имена семейств шрифтов даже автоматически предлагаются в нашем редакторе css. </p> <i/> <h5><span class="ez-toc-section" id="i-362"> Палитра команд </span></h5> <p> Ускорьте рабочий процесс с помощью нашей палитры команд! Нажмите <i> Ctrl / Cmd + P </i> и создайте / откройте файлы, вставьте компоненты с синтаксисом CSS, подобным Emmet, сгенерируйте текст Lorem ipsum и активируйте команды меню. </p> <i/> <h5><span class="ez-toc-section" id="i-363"> Темы и иконки </span></h5> <p> Приложение имеет ряд встроенных тем Bootstrap, шрифтов значков, шаблонов и компонентов, которые можно комбинировать в красивый и уникальный дизайн.</p> <i/> <h5><span class="ez-toc-section" id="i-364"> Всегда в курсе </span></h5> <p> Bootstrap Studio обновляется автоматически, поэтому у вас всегда будет последняя версия. Мы выпускаем обновления каждый месяц, наполненные новыми функциями, компонентами и улучшениями. </p> <h2><span class="ez-toc-section" id="css_-_html"> css - Как расположить эти элементы начальной загрузки на странице html </span></h2> css - Как расположить эти элементы начальной загрузки на странице html - qaru <p> <strong> Присоединяйтесь к Stack Overflow </strong>, чтобы учиться, делиться знаниями и строить свою карьеру.</p> <p> Спросил <time itemprop="dateCreated" datetime="2021-01-09T09:24:31"> 5 месяцев назад </time> </p> <p> Просмотрено 114 раз </p> <p> Я хочу создать веб-страницу с html и bootstrap 4, и у меня возникли проблемы с организацией моей страницы по этому шаблону.</p> <p> </p><pre> <code> <! Doctype html> <html lang = "ru"> <head> <title> Hepatrote с Bootstrap v4 </title> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> </head> <body> <заголовок> <p> Гепатроте </p> <nav> <a href="#"> Accueil </a> <a href="#"> Блог </a> <a href="#"> Симптомы </a> <a href="#"> Контакты </a> </nav> </header> <основной> <div> <! - Как расположить эти элементы: слева: Симптомы с текстом и кнопкой «Как защитить себя?» ; Правая сторона: Изображение болезни -> <! - Как расположить эти элементы: Симптомы с текстом и 4 бутстрап-карточками При таком расположении -> <div> </div> <нижний колонтитул> </footer> </main> </body> </html> </code> </pre><p> В моем коде вы можете увидеть структуру на основе: голова, тело, и я также добавил ссылку начальной загрузки.Моя проблема - расположить элементы так, как показано на картинке. </p> <p> Есть у кого-нибудь идеи? </p> <p> задан 9 янв в 9:24 </p> obela06obela06 <p> 229 22 серебряных знака 1010 бронзовых знаков </p> 1 <p> Вот базовая структура вашего образа, использующего bootstrap 4, это не реагирует, поэтому вам нужно немного поработать для отзывчивости.</p> <p> Код: </p><pre> <code> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <meta name = "description" content = ""> <title> Hepatrote с Bootstrap v4 </title> <! - Основной CSS начальной загрузки -> </head> <body> <заголовок> <p> Гепатроте </p> <nav> <a href="#"> Accueil </a> <a href="#"> Блог </a> <a href="#"> Симптомы </a> <a href="#"> Контакты </a> </nav> </header> <основной> <div> <div> <div> <h2><span class="ez-toc-section" id="i-365"> Симптомы </span></h2> <p> Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона De Finibus Bonorum et Malorum для использования в сборнике образцов шрифта. </p> </div> <div> <h2><span class="ez-toc-section" id="i-366"> Изображение диесов </span></h2> </div> </div> <div> <div> <h2><span class="ez-toc-section" id="i-367"> Симптомы </span></h2> <p> Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.</p> </div> <div> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="1"> Изображение1 </span></h5> </div> <div> <h5><span class="ez-toc-section" id="_1"> Признак 1 </span></h5> </div> </div> </div> </div> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="1-2"> Изображение1 </span></h5> </div> <div> <h5><span class="ez-toc-section" id="_1-2"> Признак 1 </span></h5> </div> </div> </div> </div> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="1-3"> Изображение1 </span></h5> </div> <div> <h5><span class="ez-toc-section" id="_1-3"> Признак 1 </span></h5> </div> </div> </div> </div> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="1-4"> Изображение1 </span></h5> </div> <div> <h5><span class="ez-toc-section" id="_1-4"> Признак 1 </span></h5> </div> </div> </div> </div> </div> </div> <нижний колонтитул> </footer> </main> </body> </html> </code> </pre><p> `</p> <time itemprop="dateCreated" datetime="2021-01-09T10:00:57"/> <p> ответ дан 9 янв в 10:00 </p> Пратик <p> 3111 серебряный знак77 бронзовых знаков </p> 2<pre> <code> основной { ширина: 90%; } #maincss { положение: относительное; высота: 100%; ширина: 100%; маржа: авто; } #maincol { положение: относительное; набивка: 1 бэр; маржа: авто; } #mainimg { положение: относительное; максимальная ширина: 100%; } # 3rdcss { положение: относительное; минимальная высота: 100%; } img { положение: относительное; ширина: 100%; } # 3rdcol { положение: относительное; минимальная высота: 100%; маржа: авто; } #cardzcol { положение: относительное; маржа: авто; отступ: 0.5рем; } </code> </pre><pre> <code> <! Doctype html> <html lang = "ru"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <meta name = "description" content = ""> <title> Hepatrote с Bootstrap v4 </title> <! - Основной CSS начальной загрузки -> </head> <body> <заголовок> <p> Гепатроте </p> <nav> <a href="#"> Accueil </a> <a href="#"> Блог </a> <a href="#"> Симптомы </a> <a href="#"> Контакты </a> </nav> </header> <основной> <div> <div> <div> <h3><span class="ez-toc-section" id="i-368"> Заголовок </span></h3> <p> относительный текст </p> <input type = "button" value = "button" /> </div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript><img class="lazyload lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/><noscript><img src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript> </div> </div> <div> <div> <div> <h3><span class="ez-toc-section" id="i-369"> Заголовок </span></h3> <p> еще текст, который будет показан </p> </div> <div> <div> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "https://tmladenov.tech/images/img-test.png" title = "img" /></noscript><img class="lazyload lazy lazy-hidden" src = "https://tmladenov.tech/images/img-test.png" title = "img" /><noscript><img src = "https://tmladenov.tech/images/img-test.png" title = "img" /></noscript> </div> <div> <h5><span class="ez-toc-section" id="-1"> [карточка-1] </span></h5> <p> здесь текст </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript><img class="lazyload lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/><noscript><img src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript> </div> <div> <h5><span class="ez-toc-section" id="-2"> [карточка-2] </span></h5> <p> здесь текст </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript><img class="lazyload lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/><noscript><img src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript> </div> <div> <h5><span class="ez-toc-section" id="-3"> [карточка-3] </span></h5> <p> здесь текст </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <div> <noscript><img class="lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript><img class="lazyload lazy lazy-hidden" src = "https: // tmladenov.tech / images / img-test.png "title =" img "/><noscript><img src = "https: // tmladenov.tech / images / img-test.png "title =" img "/></noscript> </div> <div> <h5><span class="ez-toc-section" id="-4"> [карточка-4] </span></h5> <p> здесь текст </p> </div> </div> </div> </div> </div> </div> </div> </div> <нижний колонтитул> [нижний колонтитул] </footer> </main> </body> </html> </code> </pre><time itemprop="dateCreated" datetime="2021-01-09T12:54:03"/> <p> Создан 09 янв. </p> Бурхэм Б.СолиманБурхэм Б. Солиман <p> 1,14811 золотых знаков66 серебряных знаков1212 бронзовых знаков </p> <p> lang-html </p> Stack Overflow лучше всего работает с включенным JavaScript <p> Ваша конфиденциальность </p> <p> Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/raznoe-2/bootstrap-elementy-komponenty-bootstrap-na-russkom.html" data-text="Bootstrap элементы: Компоненты · Bootstrap на русском" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/raznoe-2/bootstrap-elementy-komponenty-bootstrap-na-russkom.html" data-text="Bootstrap элементы: Компоненты · Bootstrap на русском" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/raznoe-2/bootstrap-elementy-komponenty-bootstrap-na-russkom.html" data-text="Bootstrap элементы: Компоненты · Bootstrap на русском" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/raznoe-2/bootstrap-elementy-komponenty-bootstrap-na-russkom.html" data-text="Bootstrap элементы: Компоненты · Bootstrap на русском" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/kak-v-fotoshope-sdelat-kontur-teksta-kak-sdelat-obvodku-teksta-v-fotoshope-3.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как в фотошопе сделать контур текста: Как сделать обводку текста в Фотошопе</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/never-korejskij-poiskovik-russko-korejskij-poiskovik-pochemu-on-populyaren.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Never корейский поисковик: русско корейский поисковик? Почему он популярен?</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/bootstrap-elementy-komponenty-bootstrap-na-russkom.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">
Имя *
Email *
Сайт

`.m-# / m-*-#`	margin on all sides
`.mt-# / mt-*-#`	margin top
`.mb-# / mb-*-#`	margin bottom
`.ml-# / ml-*-#`	margin left
`.mr-# / mr-*-#`	margin right
`.mx-# / mx-*-#`	margin left and right
`.my-# / my-*-#`	margin top and bottom
`.p-# / p-*-#`	padding on all sides
`.pt-# / pt-*-#`	padding top
`.pb-# / pb-*-#`	padding bottom
`.pl-# / pl-*-#`	padding left
`.pr-# / pr-*-#`	padding right
`.py-# / py-*-#`	padding top and bottom
`.px-# / px-*-#`	padding left and right