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

<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 3 · Иконки, меню, навигация, табы, сообщения предупреждений и др.

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

Включено 200 символов в формате шрифта из набора Glyphicon Halflings. Обычно Glyphicons Halflings недоступны бесплатно, но автор сделал их бесплатными специально для Bootstrap. Как благодарность, мы бы просили вас оставлять ссылку на Glyphicons, где есть такая возможность.

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

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

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

<span></span>

Примеры

<button type="button"><span></span> Star</button>

Пример

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

<div>
  <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
  <ul role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другое действие</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Что-то еще</a></li>
    <li role="presentation"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a></li>
  </ul>
</div>

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

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

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

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

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

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

<ul role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation">Название меню</li>
  ...
  <li role="presentation"></li>
  <li role="presentation">Название меню</li>
  ...
</ul>

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

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

<ul role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Обычная ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Заблокированая ссылка</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другая ссылка</a></li>
</ul>

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

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

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

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

Левая
Средняя
Правая

<div>
  <button type="button">Левая</button>
  <button type="button">Средняя</button>
  <button type="button">Правая</button>
</div>

Кнопка панели инструментов

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

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

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

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

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

Вложенность

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

<div>
  <button type="button">1</button>
  <button type="button">2</button>

  <div>
    <button type="button" data-toggle="dropdown">
        Dropdown
        <span></span>
      </button>
    <ul>
      <li><a href="#">Dropdown ссылка</a></li>
      <li><a href="#">Dropdown ссылка</a></li>
    </ul>
  </div>
</div>

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

Кнопка
Кнопка

<div>
  ...
</div>

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

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

С

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

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

<div>
  ...
</div>

С

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

Левая

Средняя

Правая

<div>
  <div>
    <button type="button">Левая</button>
  </div>
  <div>
    <button type="button">Средняя</button>
  </div>
  <div>
    <button type="button">Правая</button>
  </div>
</div>

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

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

<!-- Single button -->
<div>
  <button type="button" data-toggle="dropdown">Действие <span></span></button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

Расщепленная кнопка выпадающего меню

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

По умолчанию

Меню с переключением

Primary

Меню с переключением

Success

Меню с переключением

Info

Меню с переключением

Warning

Меню с переключением

Danger

Меню с переключением

<!-- Split button -->
<div>
  <button type="button">Действие</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul role="menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то иное</a></li>
    <li></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

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

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

<!-- Large button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Большая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div>
  <button type="button" data-toggle="dropdown">
 Очень малая кнопка <span></span>
 </button>
  <ul>
    ...
  </ul>
</div>

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

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

<div>
  <button type="button">Поднимающееся меню</button>
  <button type="button" data-toggle="dropdown">
 <span></span>
 <span>Меню с переключением</span>
 </button>
  <ul>
    <!-- Dropdown menu links -->
  </ul>
</div>

Разверните элементы управления формы добавив текст или кнопки до, после, с обеих сторон любого текстового поля формы. Используйте .input-group с .input-group-addon в начало или конец для одного элемента .form-control.

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

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

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

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

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

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

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

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <input type="text">
  <span>.00</span>
</div>

<div>
  <span>$</span>
  <input type="text">
  <span>.00</span>
</div>

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

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

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

<div>
  <span>@</span>
  <input type="text" placeholder="Username">
</div>

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

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

<div>
  <div>
    <div>
      <span>
        <input type="checkbox">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <span>
        <input type="radio">
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <div>
      <span>
        <button type="button">Go!</button>
      </span>
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <span>
        <button type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <div>
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div>
    <div>
      <input type="text">
      <div>
        <button type="button" data-toggle="dropdown">Действие <span></span></button>
        <ul>
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то иное</a></li>
          <li></li>
          <li><a href="#">Отдельная ссылка</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div>
  <div>
    <!-- Button and dropdown menu -->
  </div>
  <input type="text">
</div>

<div>
  <input type="text">
  <div>
    <!-- Button and dropdown menu -->
  </div>
</div>

Вкладки

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

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Необходимость в JavaScript-плагине

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

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

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

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

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

<ul>
  ...
</ul>

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

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

По состоянию на v7.0.1, Safari проявляется ошибка, в котором при изменение размера окна ваш браузер по горизонтали вызывает ошибки рендеринга нивигации по ширине, которые были удалены при обновлении. Эта ошибка проявляется также в пример justified nav.

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

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

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

<ul>
  ...
  <li><a href="#">Заблокированная ссылка</a></li>
  ...
</ul>

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

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

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

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul>
  ...
  <li>
    <a data-toggle="dropdown" href="#">
      Dropdown <span></span>
    </a>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

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

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

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

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

Необходимость в JavaScript

<nav role="navigation">
  <div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
      <a href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
      <form role="search">
        <div>
          <input type="text" placeholder="Search">
        </div>
        <button type="submit">Отправить</button>
      </form>
      <ul>
        <li><a href="#">Ссылка</a></li>
        <li>
          <a href="#" data-toggle="dropdown">Dropdown <b></b></a>
          <ul>
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще</a></li>
            <li></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Зависимость плагина

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

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

Убедитесь, что добавили role="navigation" в каждой навигационной панели для улучшения их доступности.

Формы

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

<form role="search">
  <div>
    <input type="text" placeholder="Search">
  </div>
  <button type="submit">Отправить</button>
</form>

Предостережения для мобильных устройств

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

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

Кнопки

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

<button type="button">Войти</button>

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

Текст

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

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

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

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

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

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

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

<nav role="navigation">
  <div>
    ...
  </div>
</nav>

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

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

body { padding-top: 70px; }

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

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

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

<nav role="navigation"> <div> ... </div> </nav>

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

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

body { padding-bottom: 70px; }

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

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

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

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

<nav role="navigation"> <div> ... </div> </nav>

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

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

<nav role="navigation"> ... </nav>

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

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

<ol> <li><a href="#">Главная</a></li> <li><a href="#">Библиотека</a></li> <li>Данные</li> </ol>

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

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

<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>

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

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

<ul> <li><a href="#">«</a></li> <li><a href="#">1 <span>(current)</span></a></li> ... </ul>

Дополнительно вы можете изменять активные или заблокированы anchors для <span> удалив возможность нажатия, при сохранении целевых стилей.

<ul> <li><span>«</span></li> <li><span>1 <span>(current)</span></span></li> ... </ul>

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

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

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

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

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

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

<ul> <li><a href="#">Предыдущая</a></li> <li><a href="#">Следующая</a></li> </ul>

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

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

<ul> <li><a href="#">← Старая</a></li> <li><a href="#">Новая →</a></li> </ul>

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

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

<ul> <li><a href="#">← Старая</a></li> <li><a href="#">Новая →</a></li> </ul>

Пример

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

<h4>Пример заголовка <span>Новый</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>

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

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

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

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

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

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

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

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

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

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

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

Узнать больше

<div> <h2>Привет, мир!</h2> <p>...</p> <p><a role="button">Узнать больше</a></p> </div>

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

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

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

<div> <h2>Пример заголовка страницы <small>Дополнительный текст</small></h2> </div>

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

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

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

<div> <div> <a href="#"> <img data-src="holder.js/100%x180" alt="..."> </a> </div> ... </div>

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

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

Ярлык эскиза

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.

Кнопка Кнопка

Ярлык эскиза

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.

Кнопка Кнопка

Ярлык эскиза

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.

Кнопка Кнопка

<div> <div> <div> <img data-src="holder.js/300x200" alt="..."> <div> <h4>Ярлык эскиза</h4> <p>...</p> <p><a href="#" role="button">Кнопка</a> <a href="#" role="button">Кнопка</a></p> </div> </div> </div> </div>

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

Примеры

Для базовых замечаний, оберните любой текст и опциональную кнопку при помощи .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>...</div> <div>...</div> <div>...</div> <div>...</div>

Замечания, которые можно закрыть

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

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

<div> <button type="button" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>

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

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

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

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

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

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

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

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

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

Индикатор выполнения по умолчанию.

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

С меткой

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

<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> 60% </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</span> </div> </div>

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

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

<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-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> <a href="#"> <img src="..." alt="..."> </a> <div> <h5>Заголовок медиа</h5> ... </div> </div>

Список медиа

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

<ul> <li> <a href="#"> <img src="..." alt="..."> </a> <div> <h5>Заголовок медиа</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>

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

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

<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>Заголовок пункта списка группы</h5> <p>...</p> </a> </div>

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

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

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

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

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

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

Panel heading without title

Panel content

Название панели

Panel content

<div> <div>Panel heading without title</div> <div> Panel content </div> </div> <div> <div> <h4>Название панели</h4> </div> <div> Panel content </div> </div>

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

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

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

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

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

Название панели

Panel content

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

С таблицами

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

Panel heading

Здесь произвольный текст. 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

Здесь произвольный текст. 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.

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>

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

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

<div>...</div>

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

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

Look, I’m in a large well!

<div>...</div>

Look, I’m in a small well!

<div>...</div>

Используя Bootstrap, как мне расположить элементы горизонтально?

У меня есть ниже, что я пытаюсь воспроизвести этот макет ->

Я застрял на том, как сделать так, чтобы мои элементы отображались горизонтально? Нужно ли мне составить список или еще один «table»? Мне удалось сделать это с помощью style , но, похоже, мне это не нужно.

Вот что у меня есть до сих пор … >

<div> <div > <div> <span>1</span> <h4>RE031159</h4> <span></span> </div> <div> <ul> <li> 12315 Carregeenan WG-16 4000 lbs </li> <li> 1063545 Carp meal spread 1042 lbs </li> </ul> </div> </div> <div> <span>2</span> </div> <div> <span>3</span> </div> <div> <span>4</span> </div> <div> <span>5</span> </div>

<div> <div> <span>6</span> </div> <div> <span>7</span> </div> <div> <span>8</span> </div> <div> <span>9</span> </div> <div> <span>10</span> </div> </div>

Для большей картины я использую Bootstrap 3 в приложении MVC 5. Я буду заполнять информацию в макете из SQL DB с помощью EF6. Я представляю себе, что буду использовать несколько циклов @foreach для построения каждого «card».

html

css

asp.net-mvc

twitter-bootstrap

Поделиться

Источник

Refracted Paladin

13 ноября 2013 в 16:03

5 ответов

Как расположить формы горизонтально на странице HTML?

У меня есть две формы, и по умолчанию они будут отображаться на странице HTML вертикально. Однако из-за ограниченности пространства страницы их лучше расположить горизонтально, с помощью CSS. Формы следующим образом: <form>Form A</form> <form>Form B</form> Какая-нибудь…

wpf: как расположить элементы горизонтально и равномерно?

Какой элемент управления может расположить дочерние элементы по горизонтали, а также равномерно изменить размер элементов, чтобы они соответствовали доступному горизонтальному пространству? Я заменяю ItemsPanelTemplate в шаблоне treeview, и stackpanel будет выкладывать элементы в правильной…

4

Как уже упоминалось в куче других комментариев, все ваши столбцы в строке должны составлять до 12. Есть несколько способов исправить это. Ответ, предложенный Роббом, помещает пустой столбец на каждом конце строки, чтобы сделать это. Вы также можете ограничить 4 «doors» в строке и увеличить размер каждого столбца до 3. Наконец, вы могли бы придумать систему из 10 столбцов, но это может быть немного экстремально, учитывая два других решения.

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

Мои изменения таковы

<div> <span>1</span> <span ></span> <h4>RE031159</h4> <div>Some text here</div> </div>

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

Поделиться

Scott

13 ноября 2013 в 17:50

2

Не уверен, что это именно то, что вы ищете, но я бы поработал над тем, чтобы иметь одну строку и заставить мои панели просто повторяться внутри строки. Что-то вроде этого:

<div> <div> <div> <span>01</span> <h4>Panel Title</h4> </div> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> </div>

Пример работы Bootply с адаптивными панелями

Поделиться

TheBlueDog

13 ноября 2013 в 16:44

1

Если вы ищете полностью решение out-of-the-box, я бы рекомендовал использовать 4 двери в строке с col-lg-3 , чтобы вы могли легко сопоставить макет сетки из 12 столбцов, который наследуется в Bootstrap. В противном случае вам придется добавить некоторые пользовательские CSS, чтобы включить макет из 10 столбцов.

Вы в значительной степени уже имеете представление о том, как создавать горизонтальные строки — просто сделайте div с классом row , за которым следует больше элементов div с суммированием их размеров до 12.

Я сделал быстрое обновление вашего fiddle здесь , которое в основном просто исправляет некоторые из HTML, которые у вас были изначально, и преобразовало их в col-lg-3 .

Если вы хотите получить более точные измерения в сетке, обязательно посмотрите col-xs , col-sm и col-md на их веб- сайте .

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

Поделиться

Eric Hotinger

13 ноября 2013 в 16:13

1

Для статического решения

 <div> <div></div> <div > <div> <span>1</span> <h4>RE031159</h4> <span></span> </div> <div> <ul> <li> 12315 Carregeenan WG-16 4000 lbs </li> <li> 1063545 Carp meal spread 1042 lbs </li> </ul> </div> </div> <div> <span>2</span> </div> <div> <span>3</span> </div> <div> <span>4</span> </div> <div> <span>5</span> </div> <div></div> </div>  <div> <div></div> <div > </div> <div> <span>2</span> </div> <div> <span>3</span> </div> <div> <span>4</span> </div> <div> <span>5</span> </div> <div></div> </div>

Поделиться

Robb

13 ноября 2013 в 16:18

0

col-lg — должно быть в общей сложности 12 для каждой строки

вы можете найти эту и многие другие сведения в документе: http://getbootstrap.com/2.3.2/строительные леса.html

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

width:20% height:250px; display:block; float:left;

Поделиться

Stefan

13 ноября 2013 в 16:13

Похожие вопросы:

Как расположить div горизонтально на основе значения?

Как расположить div горизонтально? Я использовал Float:left, который работает. что мне нужно, так это позиционировать этот div на основе значения (например, margin) , которое представляет собой…

Как расположить элементы списка горизонтально в winforms

У меня есть пользовательский элемент управления, который я инициализирую вручную [без помощи дизайнера]: // Form1.cs private byte totalControls; private List<MyControl> controls; public…

GWT: как мне расположить виджеты горизонтально?

Я использую GWT 2.4. У меня возникли проблемы с размещением виджетов горизонтально на панели моего TabLayoutPanel. Как мне расположить панели горизонтально, а затем перенести виджеты на следующую…

Как расположить формы горизонтально на странице HTML?

У меня есть две формы, и по умолчанию они будут отображаться на странице HTML вертикально. Однако из-за ограниченности пространства страницы их лучше расположить горизонтально, с помощью CSS. Формы…

wpf: как расположить элементы горизонтально и равномерно?

Какой элемент управления может расположить дочерние элементы по горизонтали, а также равномерно изменить размер элементов, чтобы они соответствовали доступному горизонтальному пространству? Я…

Как расположить надпись горизонтально в код-позади Windows форм

У меня есть форма Windows, которой я хочу манипулировать из кода — behind.In других слов: Я могу делать такие вещи: myForm.TheLableThatIWantToPosition.Text = Some text!;…

Bootstrap: как расположить элемент горизонтально в любом месте сетки?

Я учусь Бутстрапу. Я использую Bootstrap для дизайна с фиксированной шириной. Из онлайн-документации я знаю, что легко расположить элементы, начиная с столбца. Например: <!DOCTYPE html>…

Как вручную расположить легенду диаграммы ASP.Net?

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

Как горизонтально центрировать элементы сетки Bootstrap Twitter

Я работаю над сайтом, полностью построенным на Twitter Bootstrap 3. Я использую сеточную систему по всему сайту, но у меня есть конкретный вариант использования на одной странице. Он будет…

Как расположить <paper-input> s горизонтально

Я бы хотел расположить два <paper-input> s горизонтально вот так: Как мне это сделать?

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 – База знаний Timeweb Community

Введение

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

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

Релиз состоялся в 2011 году, затем в 2012 вышла вторая версия, в 2013 — третья и, наконец, в 2018 — четвертая. Каждая из версий имеет существенные изменения.

Изначально Bootstrap носил название Twitter Blueprint, так как создавался компанией Twitter. Это отличный пример того, как разрабатываемый для внутреннего использования инструмент становится в итоге востребованным по всему миру.

Основатели Bootstrap — сотрудники компании Twitter Марк Отто (Mark Otto) и Якоб Торнтон (Jacob Thornton) — по мере разработки поняли, что проект может стать чем-то бОльшим, чем просто одним из внутренних инструментов компании:

Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.

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

Официальный сайт: https://getbootstrap.com/

Преимущества Bootstrap

Уменьшение количества времени, затрачиваемого на разработку

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

Адаптивность

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

Кросс-браузерность

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

Легкость в использовании и быстрота в освоении

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

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

Понятный код

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

Единство стилей

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

Недостатки Bootstrap

Шаблонность

Сайты, разработанные при помощи Bootstrap, похожи друг на друга: одинаковая структура, навигация, кнопки. Каждый новый сайт похож на множество уже созданных — и это не очень хорошо. Решить проблему можно — надо отказаться от использования готовых решений и максимально изменять шаблон в зависимости от пожеланий заказчика и идей дизайнеров. По этой причине важно разобраться во всех инструментах, предлагаемых Bootstrap, для того, чтобы максимально использовать их при разработке.

Отсутствие гибкости

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

Старые браузеры

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

Вывод

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

Bootstrap отлично подходит для маленьких проектов, где нужно быстро собрать верстку, но в целом он используется на сайтах разного масштаба: на сентябрь 2018 года Bootstrap используют 17,8% сайтов в сети (и их количество постоянно растет).

Bootstrap сетка за 15 минут

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

Любой человек который знает, хотя бы в общих чертах, HTML и CSS может начать использовать данный фреймворк уже сейчас.

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)

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

Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета

 <div> Ваш контент </div>  <div> <div>Правильно размещенный контент</div> </div>

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.

<div> <div>Вся ширина ряда</div> </div> <div> <div>25%</div> <div>25%</div> <div>50%</div> </div>

3. Обертывание колонок

Всегда нужно иметь ввиду тот факт, что в ряду есть только 12 свободных колонок. Если разместить в ряде элементы, которые суммарно превышают 12, то последние неуместившиеся колонки будут перенесены на следующую строку.

В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

<div> <div></div> <div></div> <div>Эта колонка шириной 9 будет перенесена на следующую строчку</div> </div>

4. Классы для размеров экрана

Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер

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

<div> <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div> <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div> </div>

5. Clearfix

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

<div> <div>Эта колонка выше чем все остальныне</div> <div></div> <div></div> <div></div> </div>

6. Offsets (Смещения) — ваши друзья

Изначально все колонки выравнены по левому краю и следуют строго друг за другом. Если количество колонок будет меньше 12, то справа останется свободное место.

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .

7. Классы Push и Pull

Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

<div> <div>На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева</div> <div><img src="city.jpg"></div> </div>

Заключение

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

Но помимо данных правил существует еще ряд других, более расширенных,которые также часто используются.. Для их изучение посмотрите на русскоязычный портал о bootstrap http://bootstrap-3.ru/

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Размер экрана Классы

Скрыть на всех .d-none

Скрыть только на xs .d-none .d-sm-block

Скрыть только на sm .d-sm-none .d-md-block

Скрыть только на md .d-md-none .d-lg-block

Скрыть только на lg .d-lg-none .d-xl-block

Скрыть только на xl .d-xl-none

Показать на всех .d-block

Показать только на xs .d-block .d-sm-none

Показать только на sm .d-none .d-sm-block .d-md-none

Показать только на md .d-none .d-md-block .d-lg-none

Показать только на lg .d-none .d-lg-block .d-xl-none

Показать только на xl .d-none .d-xl-block

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block hidden-sm-down = d-none d-md-block hidden-md-down = d-none d-lg-block hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden) hidden-xs-up = d-none (same as hidden) hidden-sm-up = d-sm-none hidden-md-up = d-md-none hidden-lg-up = d-lg-none hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down) hidden-sm (only) = d-block d-sm-none d-md-block hidden-md (only) = d-block d-md-none d-lg-block hidden-lg (only) = d-block d-lg-none d-xl-block hidden-xl (only) = d-block d-xl-none visible-xs (only) = d-block d-sm-none visible-sm (only) = d-none d-sm-block d-md-none visible-md (only) = d-none d-md-block d-lg-none visible-lg (only) = d-none d-lg-block d-xl-none visible-xl (only) = d-none d-xl-block

компонентов · 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>` элемент прокручиваемым

Размер экрана	Классы
Скрыть на всех	`.d-none`
Скрыть только на xs	`.d-none .d-sm-block`
Скрыть только на sm	`.d-sm-none .d-md-block`
Скрыть только на md	`.d-md-none .d-lg-block`
Скрыть только на lg	`.d-lg-none .d-xl-block`
Скрыть только на xl	`.d-xl-none`
Показать на всех	`.d-block`
Показать только на xs	`.d-block .d-sm-none`
Показать только на sm	`.d-none .d-sm-block .d-md-none`
Показать только на md	`.d-none .d-md-block .d-lg-none`
Показать только на lg	`.d-none .d-lg-block .d-xl-none`
Показать только на xl	`.d-none .d-xl-block`

Объедините наборы
в
для более сложных компонентов.

... ... ...

Калибровка

Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .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="%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8_%D0%B8_%D0%B2%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5_%D0%BE%D0%BA%D0%BD%D0%B0_%D0%B2_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B0%D1%85_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D1%82%D1%80%D0%B5%D0%B1%D1%83%D1%8E%D1%82_%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8"></span> Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки <span class="ez-toc-section-end"></span></h5> <p> При использовании всплывающих подсказок или всплывающих окон для элементов в пределах <code> .input-group </code> вам необходимо указать опцию <code> container: 'body' </code>, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря округления углы при срабатывании всплывающей подсказки или всплывающего окна). </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5_%D1%81%D0%BC%D0%B5%D1%88%D0%B8%D0%B2%D0%B0%D1%82%D1%8C_%D1%81_%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%BC%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8-2"></span> Не смешивать с другими компонентами <span class="ez-toc-section-end"></span></h5> <p> Не смешивайте группы форм или классы столбцов сетки напрямую с группами ввода.Вместо этого вложите группу ввода внутрь группы формы или связанного с сеткой элемента. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D0%B5%D0%B3%D0%B4%D0%B0_%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D1%82%D1%8C_%D1%8F%D1%80%D0%BB%D1%8B%D0%BA%D0%B8"></span> Всегда добавлять ярлыки <span class="ez-toc-section-end"></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-definedby </code>, <code> title </code> или <code> placeholder </code> attribute) и то, какая дополнительная информация должна быть передана, будет варьироваться в зависимости от точный тип реализуемого вами виджета интерфейса. Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-2"></span> Базовый пример <span class="ez-toc-section-end"></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-descriptionby = "basic-addon3"> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80%D0%BE%D0%B2%D0%BA%D0%B0-3"></span> Калибровка <span class="ez-toc-section-end"></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="%D0%A4%D0%BB%D0%B0%D0%B6%D0%BA%D0%B8_%D0%B8_%D1%80%D0%B0%D0%B4%D0%B8%D0%BE-%D0%BD%D0%B0%D0%B4%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8"></span> Флажки и радио-надстройки <span class="ez-toc-section-end"></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="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></span> Дополнения для кнопок <span class="ez-toc-section-end"></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="%D0%9A%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8_%D1%81_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Кнопки с раскрывающимися списками <span class="ez-toc-section-end"></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="%D0%A1%D0%B5%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-3"></span> Сегментированные кнопки <span class="ez-toc-section-end"></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="%D0%9D%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA-2"></span> Несколько кнопок <span class="ez-toc-section-end"></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="%D0%94%D0%BB%D1%8F_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B5%D0%B9_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA_%D1%82%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD_JavaScript_%D0%B4%D0%BB%D1%8F_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA"></span> Для использования навигации для панелей вкладок требуется плагин JavaScript для вкладок. <span class="ez-toc-section-end"></span></h5> <p> Для вкладок с областями, допускающими вкладки, необходимо использовать плагин JavaScript для вкладок. Для разметки также потребуются дополнительные атрибуты <code> role, </code> и ARIA — подробности см. В примере разметки плагина. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%8B_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%BC%D0%B8_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Сделать навигационные системы доступными для навигации <span class="ez-toc-section-end"></span></h5> <p> Если вы используете навигацию для предоставления панели навигации, обязательно добавьте <code> role = "navigation" </code> в наиболее логичный родительский контейнер <code> </p> <ul> </code> или оберните элемент <code> </p> <nav> </code> вокруг всего навигация.Не добавляйте роль к самому <code> </p> <ul> </code>, так как это помешает тому, чтобы вспомогательные технологии объявили его реальным списком. </p> <h3><span class="ez-toc-section" id="%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8-3"></span> Вкладки <span class="ez-toc-section-end"></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="%D0%A2%D0%B0%D0%B1%D0%BB%D0%B5%D1%82%D0%BA%D0%B8"></span> Таблетки <span class="ez-toc-section-end"></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="%D0%9E%D0%B1%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D0%BE"></span> Обосновано <span class="ez-toc-section-end"></span></h3> <p> Легко делайте вкладки или пилюли равной ширине их родительской на экранах шире 768 пикселей с <code>.навигационное оправдание </code>. На экранах меньшего размера навигационные ссылки складываются. </p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="Safari_%D0%B8_%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B0%D1%8F_%D0%BE%D0%BF%D1%80%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D0%B0%D1%8F_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F"></span> Safari и адаптивная оправданная навигация <span class="ez-toc-section-end"></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="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Отключенные ссылки <span class="ez-toc-section-end"></span></h3> <p> Для любого компонента навигации (вкладки или таблетки) добавьте <code> .disabled </code> для <strong> серых ссылок и отсутствия эффектов наведения </strong>. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5_%D0%B2%D0%BB%D0%B8%D1%8F%D0%B5%D1%82_%D0%BD%D0%B0_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Не влияет на функциональность ссылки <span class="ez-toc-section-end"></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="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D1%85%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2"></span> Использование раскрывающихся списков <span class="ez-toc-section-end"></span></h3> <p> Добавьте раскрывающиеся меню с небольшим дополнительным HTML и подключаемым модулем раскрывающегося списка JavaScript. </p> <h4><span class="ez-toc-section" id="%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8_%D1%81_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Вкладки с раскрывающимися списками <span class="ez-toc-section-end"></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="%D0%A2%D0%B0%D0%B1%D0%BB%D0%B5%D1%82%D0%BA%D0%B8_%D1%81_%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8%D1%81%D1%8F_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%D0%BC%D0%B8"></span> Таблетки с раскрывающимися списками <span class="ez-toc-section-end"></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="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Панель навигации по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Панели навигации — это адаптивные мета-компоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.</p> <p> <strong> Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются. </strong> </p> <h5><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D1%8F"></span> Переполнение содержания <span class="ez-toc-section-end"></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="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C_JavaScript"></span> Требуется подключаемый модуль JavaScript <span class="ez-toc-section-end"></span></h5> <p> Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах <code> .navbar-collapse </code>. </p> <p> Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания. </p> <h5><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D0%BE%D0%B9_%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D0%BE%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Изменение свернутой точки останова мобильной панели навигации <span class="ez-toc-section-end"></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="%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%BC%D0%B8_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Сделать доступными панели навигации <span class="ez-toc-section-end"></span></h5> <p> Обязательно используйте элемент <code> </p> <nav> </code> или, если вы используете более общий элемент, такой как <code> </p> <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="%D0%98%D0%BC%D0%B8%D0%B4%D0%B6_%D0%B1%D1%80%D0%B5%D0%BD%D0%B4%D0%B0"></span> Имидж бренда <span class="ez-toc-section-end"></span></h3> <p> Замените марку навигационной панели своим собственным изображением, заменив текст на <code> <img> </code>. Поскольку <code> .navbar-brand </code> имеет собственное заполнение и высоту, вам может потребоваться переопределить некоторые CSS в зависимости от вашего изображения. </p> <pre> <code data-lang="html"> <nav> <div> <div> <a href="#"> <img class="lazy lazy-hidden" alt = "Бренд" src = "..."><noscript><img alt = "Бренд" src = "..."></noscript> </a> </div> </div> </nav> </code> </pre> <h3><span class="ez-toc-section" id="%D0%A4%D0%BE%D1%80%D0%BC%D1%8B-3"></span> Формы <span class="ez-toc-section-end"></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="%D0%9F%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE_%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D1%85_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%D1%85"></span> Предупреждения о мобильных устройствах <span class="ez-toc-section-end"></span></h5> <p> Есть некоторые предостережения относительно использования элементов управления формы в фиксированных элементах на мобильных устройствах.См. Дополнительную информацию в нашей документации по поддержке браузера. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%81%D0%B5%D0%B3%D0%B4%D0%B0_%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D1%82%D1%8C_%D1%8F%D1%80%D0%BB%D1%8B%D0%BA%D0%B8-2"></span> Всегда добавлять ярлыки <span class="ez-toc-section-end"></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="%D0%9A%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-3"></span> Кнопки <span class="ez-toc-section-end"></span></h3> <p> Добавьте класс <code> .navbar-btn </code> к элементам <code> <button> </code>, не находящимся в <code> </p> <form> </code>, чтобы центрировать их по вертикали на панели навигации. </p> <pre> <code data-lang="html"> <button type = "button"> Войти </button> </code> </pre> <h5><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8_%D0%BE%D1%82_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Использование в зависимости от контекста <span class="ez-toc-section-end"></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="%D0%A2%D0%B5%D0%BA%D1%81%D1%82-3"></span> Текст <span class="ez-toc-section-end"></span></h3> <p> Обернуть строки текста в элемент с <code> .navbar-text </code>, обычно в тег <code> </p> <p> </code> для правильного интерлиньяжа и цвета. </p> <pre> <code data-lang="html"> <p> Вы вошли как Марк Отто </p> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9D%D0%B5_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Не навигационные ссылки <span class="ez-toc-section-end"></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="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2"></span> Выравнивание компонентов <span class="ez-toc-section-end"></span></h3> <p> Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов <code> .navbar-left </code> или <code> .navbar-right </code>. Оба класса добавят поплавок CSS в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их в отдельный <code> </p> <ul> </code> с применением соответствующего служебного класса.</p> <p> Эти классы представляют собой смешанные версии <code> .pull-left </code> и <code> .pull-right </code>, но они ограничены медиа-запросами для упрощения обработки компонентов навигационной панели на разных размерах устройств. </p> <h5><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%B8%D1%85_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BF%D0%BE_%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D0%BC%D1%83_%D0%BA%D1%80%D0%B0%D1%8E"></span> Выравнивание нескольких компонентов по правому краю <span class="ez-toc-section-end"></span></h5> <p> Навбары в настоящее время имеют ограничение: несколько классов <code> .navbar-right </code>. Чтобы правильно разместить контент, мы используем отрицательное поле на последнем элементе <code> .navbar-right </code>. Когда есть несколько элементов, использующих этот класс, эти поля не работают должным образом.</p> <p> Мы вернемся к этому, когда сможем переписать этот компонент в v4. </p> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D1%84%D0%B8%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BE_%D0%BD%D0%B0%D0%B2%D0%B5%D1%80%D1%85%D1%83"></span> Зафиксировано наверху <span class="ez-toc-section-end"></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="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BE%D0%B1%D0%B8%D0%B2%D0%BA%D0%B0_%D0%BA%D0%BE%D1%80%D0%BF%D1%83%D1%81%D0%B0"></span> Требуется обивка корпуса <span class="ez-toc-section-end"></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="%D0%9A%D1%80%D0%B5%D0%BF%D0%B8%D1%82%D1%81%D1%8F_%D0%BA_%D0%B4%D0%BD%D1%83"></span> Крепится к дну <span class="ez-toc-section-end"></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="%D0%A2%D1%80%D0%B5%D0%B1%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BE%D0%B1%D0%B8%D0%B2%D0%BA%D0%B0_%D0%BA%D0%BE%D1%80%D0%BF%D1%83%D1%81%D0%B0-2"></span> Требуется обивка корпуса <span class="ez-toc-section-end"></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="%D0%A1%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B2%D0%B5%D1%80%D1%85-3"></span> Статический верх <span class="ez-toc-section-end"></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="%D0%9F%D0%B5%D1%80%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D0%B0%D1%8F_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Перевернутая панель навигации <span class="ez-toc-section-end"></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="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D0%B8_%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F"></span> Отключенное и активное состояния <span class="ez-toc-section-end"></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="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80"></span> Калибр <span class="ez-toc-section-end"></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="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Пример по умолчанию <span class="ez-toc-section-end"></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="%D0%92%D1%8B%D1%80%D0%BE%D0%B2%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B7%D0%B2%D0%B5%D0%BD%D1%8C%D1%8F"></span> Выровненные звенья <span class="ez-toc-section-end"></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="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BE%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5"></span> Дополнительное отключенное состояние <span class="ez-toc-section-end"></span></h4> <p> Ссылки на пейджер </p> <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="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-42"></span> Пример <span class="ez-toc-section-end"></span></h3> <p><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-6"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h3> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-7"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h4> <h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-8"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h5> <h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-9"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9-10"></span> Пример заголовка Новый <span class="ez-toc-section-end"></span></h6> </p> <pre> <code data-lang="html"> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0"></span> Пример заголовка <span class="ez-toc-section-end"></span></h4><span> Новое</span> </h4> </code> </pre> <h3><span class="ez-toc-section" id="%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B-3"></span> Доступные варианты <span class="ez-toc-section-end"></span></h3> <p> Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид метки.</p> <p> По умолчанию<br /> Начальный<br /> Успех<br /> Информация<br /> Предупреждение<br /> Опасность </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="%D0%95%D1%81%D1%82%D1%8C_%D1%82%D0%BE%D0%BD%D0%BD%D1%8B_%D1%8D%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BE%D0%BA"></span> Есть тонны этикеток? <span class="ez-toc-section-end"></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="%D0%A1%D0%B0%D0%BC%D0%BE%D1%81%D0%B2%D0%B5%D1%80%D1%82%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-3"></span> Самосвертывание <span class="ez-toc-section-end"></span></h5> <p> Когда нет новых или непрочитанных элементов, значки просто сворачиваются (с помощью CSS-селектора <code>: пустой </code>), если в них нет содержимого.</p> <h5><span class="ez-toc-section" id="%D0%9A%D1%80%D0%BE%D1%81%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%8C"></span> Кроссбраузерность <span class="ez-toc-section-end"></span></h5> <p> Значки </p> <p> не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: empty </code>. </p> <h5><span class="ez-toc-section" id="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D1%80%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D0%BA_%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%BC_%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F%D0%BC_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8"></span> Адаптируется к активным состояниям навигации <span class="ez-toc-section-end"></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="%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82_%D0%BC%D0%B8%D1%80"></span> Привет, мир! <span class="ez-toc-section-end"></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="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Пример заголовка страницы <span class="ez-toc-section-end"></span></h2><small> Подтекст для заголовка </small> </h2> </div> </code> </pre> <p> Расширьте сеточную систему Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и т. Д.</p> <p> Если вы ищете представление эскизов разной высоты и / или ширины в стиле Pinterest, вам потребуется сторонний плагин, например Masonry, Isotope или Salvattore. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-2"></span> Пример по умолчанию <span class="ez-toc-section-end"></span></h3> <p> По умолчанию эскизы Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой. </p> <pre> <code data-lang="html"> <div> <div> <a href="#"> <img class="lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> ... </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82"></span> Пользовательский контент <span class="ez-toc-section-end"></span></h3> <p> С небольшой дополнительной разметкой можно добавить в эскизы любой HTML-контент, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="%D0%AF%D1%80%D0%BB%D1%8B%D0%BA_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-4"></span> Ярлык эскиза <span class="ez-toc-section-end"></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="%D0%AF%D1%80%D0%BB%D1%8B%D0%BA_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-5"></span> Ярлык эскиза <span class="ez-toc-section-end"></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="%D0%AF%D1%80%D0%BB%D1%8B%D0%BA_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-6"></span> Ярлык эскиза <span class="ez-toc-section-end"></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> <img class="lazy lazy-hidden" src = "... "alt =" ... "><noscript><img src = "... "alt =" ... "></noscript> <div> <h4><span class="ez-toc-section" id="%D0%AF%D1%80%D0%BB%D1%8B%D0%BA_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-7"></span> Ярлык эскиза <span class="ez-toc-section-end"></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="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B-6"></span> Примеры <span class="ez-toc-section-end"></span></h3> <p> Оберните любой текст и дополнительную кнопку закрытия в <code>.alert </code> и один из четырех контекстных классов (например, <code> .alert-success </code>) для основных предупреждающих сообщений. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B5%D1%82_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Нет класса по умолчанию <span class="ez-toc-section-end"></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="%D0%9E%D1%82%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F"></span> Отключаемые оповещения <span class="ez-toc-section-end"></span></h3> <p> Создавайте любые оповещения, добавляя необязательный <code> .alert-dismiss </code> и кнопку закрытия. </p> <p> ×<br /> <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="%D0%9E%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B8%D1%82%D1%8C_%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BF%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%B2%D1%81%D0%B5%D1%85_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%D1%85"></span> Обеспечить правильное поведение на всех устройствах <span class="ez-toc-section-end"></span></h5> <p> Обязательно используйте элемент <code> <button> </code> с атрибутом данных <code> data-dismiss = "alert" </code>. </p> <h3><span class="ez-toc-section" id="%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D0%B2_%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F%D1%85"></span> Ссылки в оповещениях <span class="ez-toc-section-end"></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="%D0%9A%D1%80%D0%BE%D1%81%D1%81%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%8C-2"></span> Кроссбраузерность <span class="ez-toc-section-end"></span></h5> <p> Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых своих эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox.Opera 12 не поддерживает анимацию. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D1%81_%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%BE%D0%B9_%D0%B1%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0_CSP"></span> Совместимость с политикой безопасности контента (CSP) <span class="ez-toc-section-end"></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="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-3"></span> Базовый пример <span class="ez-toc-section-end"></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="%D0%A1_%D1%8D%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%BE%D0%B9"></span> С этикеткой <span class="ez-toc-section-end"></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="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B-5"></span> Контекстные альтернативы <span class="ez-toc-section-end"></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="%D0%92_%D0%BF%D0%BE%D0%BB%D0%BE%D1%81%D0%BA%D1%83"></span> В полоску <span class="ez-toc-section-end"></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="%D0%90%D0%BD%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9"></span> Анимированный <span class="ez-toc-section-end"></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="%D0%A1_%D0%BD%D0%B0%D0%BA%D0%BE%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC"></span> С накоплением <span class="ez-toc-section-end"></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="#"> <img class="lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Медиа-заголовок <span class="ez-toc-section-end"></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="#"> <img class="lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0_%D1%81_%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC_%D0%BF%D0%BE_%D1%86%D0%B5%D0%BD%D1%82%D1%80%D1%83"></span> Медиа с выравниванием по центру <span class="ez-toc-section-end"></span></h5> ... </div> </div> </code> </pre> <p> С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для цепочек комментариев или списков статей). </p> <pre> <code data-lang="html"> <ul> <li> <div> <a href="#"> <img class="lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%D0%9C%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-2"></span> Медиа-заголовок <span class="ez-toc-section-end"></span></h5> ... </div> </li> </ul> </code> </pre> <p> Группы списков — это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.</p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-4"></span> Базовый пример <span class="ez-toc-section-end"></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="%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8-3"></span> Значки <span class="ez-toc-section-end"></span></h3> <p> Добавьте компонент значков к любому элементу группы списка, и он будет автоматически расположен справа.</p> <ul> <li> 14<br /> Cras Justo Odio </li> <li> 2<br /> Dapibus ac facilisis в </li> <li> 1<br /> 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="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B-3"></span> Связанные элементы <span class="ez-toc-section-end"></span></h3> <p> Свяжите элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский <code> </p> <div> </code> вместо <code> </p> <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="%D0%9A%D0%BD%D0%BE%D0%BF%D0%BE%D1%87%D0%BD%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> Кнопочные элементы <span class="ez-toc-section-end"></span></h3> <p> Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родительский <code> </p> <div> </code> вместо <code> </p> <ul> </code>).Нет необходимости в отдельных родителях для каждого элемента. <strong> Не используйте здесь стандартные классы <code> .btn </code>. </strong> </p> <p> Cras Justo Odio<br /> Dapibus ac facilisis в<br /> Morbi leo risus<br /> Porta ac Concectetur AC<br /> Вестибулум на эросе </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="%D0%9D%D0%B5%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5_%D0%BF%D1%80%D0%B5%D0%B4%D0%BC%D0%B5%D1%82%D1%8B"></span> Неактивные предметы <span class="ez-toc-section-end"></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="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-3"></span> Контекстные классы <span class="ez-toc-section-end"></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="%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82-2"></span> Пользовательский контент <span class="ez-toc-section-end"></span></h3> <p> Добавьте практически любой HTML-код внутри, даже для групп связанных списков, подобных приведенной ниже.</p> <pre> <code data-lang="html"> <div> <a href="#"> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <p> ... </p> </a> </div> </code> </pre> <p> Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. В таких ситуациях попробуйте компонент панели. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-5"></span> Базовый пример <span class="ez-toc-section-end"></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="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D1%81_%D1%80%D1%83%D0%B1%D1%80%D0%B8%D0%BA%D0%BE%D0%B9"></span> Панель с рубрикой <span class="ez-toc-section-end"></span></h3> <p> С легкостью добавьте контейнер заголовка на панель с помощью <code>.панельная товарная позиция </code>. Вы также можете включить любой <code> </p> <h2> </h2> <p></code>–<code> </p> <h6> </h6> <p></code> с классом <code> .panel-title </code>, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <code> </p> <h2> </h2> <p></code> — <code> </p> <h6> </h6> <p></code> заменяются <code> .panel-heading </code>. </p> <p> Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках в пределах <code> .panel-title </code>. </p> <p> Заголовок панели без названия </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-7"></span> Название панели <span class="ez-toc-section-end"></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="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8"></span> Заголовок панели <span class="ez-toc-section-end"></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="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B-6"></span> Контекстные альтернативы <span class="ez-toc-section-end"></span></h3> <p> Как и другие компоненты, легко сделать панель более значимой для конкретного контекста, добавив любой из классов контекстного состояния. </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-8"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-9"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-10"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-11"></span> Название панели <span class="ez-toc-section-end"></span></h4> </p> <p> Содержание панели </p> <p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8-12"></span> Название панели <span class="ez-toc-section-end"></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="%D0%A1_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0%D0%BC%D0%B8-3"></span> С таблицами <span class="ez-toc-section-end"></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="%D0%A1_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B0%D0%BC%D0%B8_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2"></span> С группами списков <span class="ez-toc-section-end"></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="%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%B4%D0%B5%D1%86"></span> Стандартный колодец <span class="ez-toc-section-end"></span></h3> <p> Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки. </p> <pre> <code data-lang="html"> <div> ... </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-3"></span> Дополнительные классы <span class="ez-toc-section-end"></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="%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%C2%B7_Bootstrap_v50"></span> Введение · Bootstrap v5.0 <span class="ez-toc-section-end"></span></h2> <h3><span class="ez-toc-section" id="%D0%91%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9_%D1%81%D1%82%D0%B0%D1%80%D1%82"></span> Быстрый старт <span class="ez-toc-section-end"></span></h3> <p> Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок. </p> <h4><span class="ez-toc-section" id="CSS"></span> CSS <span class="ez-toc-section-end"></span></h4> <p> Скопируйте и вставьте таблицу стилей <code> <link> </code> в свой <code> <head> </code> перед всеми другими таблицами стилей для загрузки нашего CSS.</p> <pre> <code data-lang="html"> <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integration = "sha384-EVSTQN3 / azprG1Anm3QDgpJLIm9Naoc0Yz1zt = "анонимный"> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A1%D0%9F"></span> СП <span class="ez-toc-section-end"></span></h4> <p> Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите <strong> один из следующих <code> <script> </code> s </strong> в конце ваших страниц, прямо перед закрывающим тегом <code> </body> </code>, чтобы включить их.</p> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%BA%D0%B0"></span> Связка <span class="ez-toc-section-end"></span></h5> <p> Включите каждый плагин и зависимости Bootstrap JavaScript в один из двух наших пакетов. И <code> bootstrap.bundle.js, </code> и <code> bootstrap.bundle.min.js </code> включают Popper для наших всплывающих подсказок и всплывающих окон. Для получения дополнительной информации о том, что входит в Bootstrap, см. Наш раздел содержания. </p> <pre> <code data-lang="html"> <скрипт src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" целостность = "sha384-MrcW6ZMFYlzcLA8Nl + NtUVF0sA7MycLA8Nl + NtUVF0sA7MsXNXp1 / crossorigin = "анонимный"> </script> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9E%D1%82%D0%B4%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE"></span> Отдельно <span class="ez-toc-section-end"></span></h5> <p> Если вы решите использовать отдельные сценарии, сначала должен быть Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.</p> <pre> <code data-lang="html"> <скрипт src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" целостность = "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DTWgDA9i + tQ8Zj3i" crossover " анонимный "> </script> <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" Integrity = "sha384-cVKIPhGWiC2Al4u + LWgxfKTRIcfu0JTxR + EQdoJEyl / bgQindexR + EQdoJeil / bgQinfo. "> </script> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D0%B8"></span> Модули <span class="ez-toc-section-end"></span></h5> <p> Если вы используете <code> <script type = "module"> </code>, обратитесь к разделу, посвященному использованию Bootstrap в качестве модуля.</p> <h5><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B"></span> Компоненты <span class="ez-toc-section-end"></span></h5> <p> Интересно, какие компоненты явно требуют нашего JavaScript и Popper? Щелкните ссылку "Показать компоненты" ниже. Если вы вообще не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы. </p> <p>Показать компоненты, требующие JavaScript </p> <ul> <li> Предупреждения об отклонении </li> <li> Кнопки для переключения состояний и функции флажка / радио </li> <li> Карусель для любого поведения слайдов, элементов управления и индикаторов </li> <li> Свернуть для переключения видимости содержимого </li> <li> Выпадающие списки для отображения и позиционирования (также требуется Поппер) </li> <li> Модальные окна для отображения, позиционирования и прокрутки </li> <li> Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения </li> <li> Тосты за отображение и отклонение </li> <li> Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper) </li> <li> Scrollspy для поведения прокрутки и обновлений навигации </li> </ul> <h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B0%D1%80%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD"></span> Стартовый шаблон <span class="ez-toc-section-end"></span></h3> <p> Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки.Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Сложите все вместе, и ваши страницы должны выглядеть так: </p> <pre> <code data-lang="html"> <! Doctype html> <html lang = "ru"> <head> <! - Обязательные метатеги -> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Загрузочный CSS -> <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css "rel =" stylesheet "integration =" sha384-EVSTQN3 / azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC "crossorigin =" anonymous "> <title> Привет, мир! </title> </head> <body> <h2><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82_%D0%BC%D0%B8%D1%80-2"></span> Привет, мир! <span class="ez-toc-section-end"></span></h2> <! - Необязательный JavaScript; выберите одно из двух! -> <! - Вариант 1. Пакет начальной загрузки с Popper -> <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" Integльность = "sha384-MrcW6ZMFYlzcLA8Nl + NtUVF0sA7MsXsP4UYWI / tUVF0sA7MsXsP4UYWI / tUVF0sA7MsXsP1UyJoJojs "анонимный"> </script> <! - Вариант 2: Разделить Popper и Bootstrap JS -> <! - <script src = "https: // cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js "Integrity =" sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i + tQ8Zj3iwWAwPtgFTxbJ8NT4GN1 = "кросс-скрипт" <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" Integrity = "sha384-cVKIPhGWiC2Al4u + LWgxfKTRIcfu0JTxR + EQdoJEyl / bgQindexR + EQdoJeil / bgQinfo. "> </script> -> </body> </html> </code> </pre> <p> Чтобы узнать о следующих шагах, посетите документацию по макету или наши официальные примеры, чтобы начать макет содержания и компонентов вашего сайта.</p> <h3><span class="ez-toc-section" id="%D0%92%D0%B0%D0%B6%D0%BD%D1%8B%D0%B5_%D0%B3%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8B"></span> Важные глобалы <span class="ez-toc-section-end"></span></h3> <p> Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании. Все они почти исключительно ориентированы на нормализацию <em> </em> кроссбраузерных стилей. Давайте нырнем. </p> <h4><span class="ez-toc-section" id="HTML5_doctype"></span> HTML5 doctype <span class="ez-toc-section-end"></span></h4> <p> Bootstrap требует использования документа типа HTML5. Без него вы увидите несколько забавных незавершенных стилей, но его включение не должно вызывать каких-либо серьезных сбоев. </p> <pre> <code data-lang="html"> <! Doctype html> <html lang = "ru"> ... </html> </code> </pre> <h4><span class="ez-toc-section" id="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B5%D1%82%D0%B0%D1%82%D0%B5%D0%B3"></span> Адаптивный метатег <span class="ez-toc-section-end"></span></h4> <p> Bootstrap разработан <em> mobile first </em>, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, <strong> добавьте метатег </strong> адаптивного окна просмотра к вашему <code> <head> </code>. </p> <pre> <code data-lang="html"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> </code> </pre> <p> Вы можете увидеть пример этого в действии в начальном шаблоне.</p> <h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80_%D0%BA%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B8"></span> Размер коробки <span class="ez-toc-section-end"></span></h4> <p> Для более простого изменения размера в CSS, мы переключаем глобальное значение </code> box-sizing </code> с <code> content-box </code> на <code> border-box </code>. Это гарантирует, что заполнение <code> </code> не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine. </p> <p> В редких случаях, когда вам нужно отменить его, используйте что-то вроде следующего: </p> <pre> <code data-lang="css">.selector-for-some-widget { размер коробки: коробка содержимого; } </code> </pre> <p> В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент через <code> :: before </code> и <code> :: after </code>, будут унаследовать указанный <code> размер блока </code> для этого <code> .selector-for-some-widget </code>. </p> <p> Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks. </p> <h4><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0"></span> Перезагрузка <span class="ez-toc-section-end"></span></h4> <p> Для улучшения кроссбраузерного рендеринга мы используем Reboot, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более упорный сброс общих элементов HTML.</p> <p> Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов. </p> <ul> <li> Прочтите официальный блог Bootstrap и подпишитесь на него. </li> <li> Присоединяйтесь к официальной комнате Slack. </li> <li> Общайтесь с другими Bootstrappers в IRC. На сервере <code> irc.libera.chat </code> в канале <code> #bootstrap </code>. </li> <li> Справку по реализации можно найти на сайте Stack Overflow (помечено как <code> bootstrap-5 </code>). </li> <li> Разработчики должны использовать ключевое слово <code> bootstrap </code> в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.</li> </ul> <p> Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами. </p> <h2><span class="ez-toc-section" id="Navbar_%C2%B7_Bootstrap"></span> Navbar · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Документация и примеры мощного адаптивного навигационного заголовка Bootstrap - панели навигации. Включает поддержку брендинга, навигации и т. Д., Включая поддержку нашего плагина свертывания. </p> <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D1%8D%D1%82%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82"></span> Как это работает <span class="ez-toc-section-end"></span></h3> <p> Вот что вам нужно знать перед началом работы с навигационной панелью: </p> <ul> <li> Навбары требуют упаковки <code>.navbar </code> с <code> .navbar-expand {-sm | -md | -lg | -xl} </code> для гибкого сворачивания и классов цветовой схемы. </li> <li> Навигационные панели и их содержимое по умолчанию плавно. Используйте дополнительные контейнеры, чтобы ограничить их горизонтальную ширину. </li> <li> Используйте наши служебные классы spacing и flex для управления интервалом и выравниванием внутри навигационных панелей. </li> <li> Навигационные панели по умолчанию реагируют, но вы можете легко изменить их, чтобы это изменить. Адаптивное поведение зависит от нашего плагина Collapse JavaScript.</li> <li> Навигационные панели по умолчанию скрыты при печати. Принудительно напечатайте их, добавив <code> .d-print </code> к <code> .navbar </code>. См. Служебный класс дисплея. </li> <li> Обеспечьте доступность с помощью элемента <code><br /> <nav> </code> или, при использовании более общего элемента, такого как <code> </p> <div> </code>, добавьте <code> role = "navigation" </code> на каждую панель навигации, чтобы явно идентифицировать ее как область ориентира для пользователи вспомогательных технологий. </li> </ul> <p> Прочтите пример и список поддерживаемых подкомпонентов.</p> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5"></span> Поддерживаемое содержимое <span class="ez-toc-section-end"></span></h3> <p> Navbars имеют встроенную поддержку нескольких подкомпонентов. При необходимости выберите из следующего: </p> <ul> <li> <code> .navbar-brand </code> для названия вашей компании, продукта или проекта. </li> <li> <code> .navbar-nav </code> для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков). </li> <li> <code> .navbar-toggler </code> для использования с нашим плагином сворачивания и другими режимами переключения навигации. </li> <li> <code>.form-inline </code> для любых элементов управления и действий формы. </li> <li> <code> .navbar-text </code> для добавления вертикально центрированных строк текста. </li> <li> <code> .collapse.navbar-collapse </code> для группировки и скрытия содержимого навигационной панели по родительской точке останова. </li> </ul> <p> Вот пример всех подкомпонентов, включенных в адаптивную световую навигационную панель, которая автоматически сворачивается в точке останова <code> lg </code> (большой). </p> <pre> <code data-lang="html"> <nav> <a href="#"> Navbar </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-extended = "false" aria-label = "Переключить навигацию"> <span> </span> </button> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Падать </a> <div aria-labelledby = "navbarDropdown"> <a href="#"> Действие </a> <a href="#"> Другое действие </a> <div> </div> <a href="#"> Здесь что-то еще </a> </div> </li> <li> <a href="#"> Отключено </a> </li> </ul> <форма> <input type = "search" placeholder = "Search" aria-label = "Search"> <button type = "submit"> Поиск </button> </form> </div> </nav> </code> </pre> <p> В этом примере используются служебные классы цвета (<code> bg-light </code>) и интервалов (<code> my-2 </code>, <code> my-lg-0 </code>, <code> mr-sm-0 </code>, <code> my-sm-0 </code>).</p> <h4><span class="ez-toc-section" id="%D0%9C%D0%B0%D1%80%D0%BA%D0%B0"></span> Марка <span class="ez-toc-section-end"></span></h4> <p> <code> .navbar-brand </code> можно применить к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили. </p> <pre> <code data-lang="html"> <! - По ссылке -> <nav> <a href="#"> Navbar </a> </nav> <! - Как заголовок -> <nav> <span> Навбар </span> </nav> </code> </pre> <p> Добавление изображений в <code> .navbar-brand </code>, скорее всего, всегда потребует настраиваемых стилей или утилит для правильного размера.Вот несколько примеров для демонстрации. </p> <pre> <code data-lang="html"> <! - Просто изображение -> <nav> <a href="#"> <img class="lazy lazy-hidden" src = "/ docs / 4.0 / assets / brand / bootstrap-solid.svg" alt = ""><noscript><img src = "/ docs / 4.0 / assets / brand / bootstrap-solid.svg" alt = ""></noscript> </a> </nav> </code> </pre> <pre> <code data-lang="html"> <! - Изображение и текст -> <nav> <a href="#"> <img class="lazy lazy-hidden" src = "/ docs / 4.0 / assets / brand / bootstrap-solid.svg" alt = ""><noscript><img src = "/ docs / 4.0 / assets / brand / bootstrap-solid.svg" alt = ""></noscript> Бутстрап </a> </nav> </code> </pre> <h4><span class="ez-toc-section" id="Nav"></span> Nav <span class="ez-toc-section-end"></span></h4> <p> Навигационные ссылки на панели навигации основаны на <code>.nav </code> с собственным классом модификатора и требует использования классов переключателей для правильного адаптивного стиля. <strong> Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства. </strong> для обеспечения надежного выравнивания содержимого навигационной панели. </p> <p> Активные состояния - с <code> .active </code> - для обозначения текущей страницы могут быть применены непосредственно к <code> .nav-link </code> s или их непосредственному родительскому <code> .nav-item </code> s. </p> <pre> <code data-lang="html"> <nav> <a href="#"> Navbar </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarNav" aria-controls = "navbarNav" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Возможности </a> </li> <li> <a href="#"> Цены </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> </div> </nav> </code> </pre> <p> И поскольку мы используем классы для нашей навигации, вы можете полностью отказаться от подхода на основе списков, если хотите.</p> <pre> <code data-lang="html"> <nav> <a href="#"> Navbar </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarNavAltMarkup" aria-controls = "navbarNavAltMarkup" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <div> <div> <a href="#"> Главная <span> (текущая) </span> </a> <a href="#"> Возможности </a> <a href="#"> Цены </a> <a href="#"> Отключено </a> </div> </div> </nav> </code> </pre> <p> Вы также можете использовать выпадающие списки на панели навигации.Выпадающие меню требуют элемента обертывания для позиционирования, поэтому обязательно используйте отдельные и вложенные элементы для <code> .nav-item </code> и <code> .nav-link </code>, как показано ниже. </p> <pre> <code data-lang="html"> <nav> <a href="#"> Navbar </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarNavDropdown" aria-controls = "navbarNavDropdown" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Возможности </a> </li> <li> <a href="#"> Цены </a> </li> <li> <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Выпадающая ссылка </a> <div aria-labelledby = "navbarDropdownMenuLink"> <a href="#"> Действие </a> <a href="#"> Другое действие </a> <a href="#"> Здесь что-то еще </a> </div> </li> </ul> </div> </nav> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A4%D0%BE%D1%80%D0%BC%D1%8B-4"></span> Формы <span class="ez-toc-section-end"></span></h4> <p> Разместите различные элементы управления и компоненты формы на панели навигации с помощью <code>.форма встроенная </code>. </p> <pre> <code data-lang="html"> <nav> <форма> <input type = "search" placeholder = "Search" aria-label = "Search"> <button type = "submit"> Поиск </button> </form> </nav> </code> </pre> <p> При необходимости выровняйте содержимое встроенных форм с утилитами. </p> <pre> <code data-lang="html"> <nav> <a> Навбар </a> <форма> <input type = "search" placeholder = "Search" aria-label = "Search"> <button type = "submit"> Поиск </button> </form> </nav> </code> </pre> <p> Группы ввода тоже работают: </p> <pre> <code data-lang="html"> <nav> <форма> <div> <div> <span> @ </span> </div> <input type = "text" placeholder = "Имя пользователя" aria-label = "Имя пользователя" aria-descriptionby = "basic-addon1"> </div> </form> </nav> </code> </pre> <p> Различные кнопки также поддерживаются как часть этих форм навигационной панели.Это также отличное напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов разного размера. </p> <p> Главная кнопка<br /> Меньшая кнопка</p> <pre> <code data-lang="html"> <nav> <форма> <button type = "button"> Главная кнопка </button> <button type = "button"> Меньшая кнопка </button> </form> </nav> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%BA%D1%81%D1%82-4"></span> Текст <span class="ez-toc-section-end"></span></h4> <p> Навбары могут содержать фрагменты текста с помощью <code> .navbar-text </code>. Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.</p> <p> Текст на панели навигации со встроенным элементом</p> <pre> <code data-lang="html"> <nav> <span> Текст на панели навигации со встроенным элементом </span> </nav> </code> </pre> <p> При необходимости комбинируйте с другими компонентами и утилитами. </p> <pre> <code data-lang="html"> <nav> <a href="#"> Навигационная панель с текстом </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarText" aria-controls = "navbarText" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Возможности </a> </li> <li> <a href="#"> Цены </a> </li> </ul> <span> Текст на панели навигации со встроенным элементом </span> </div> </nav> </code> </pre> <h3><span class="ez-toc-section" id="%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D1%81%D1%85%D0%B5%D0%BC%D1%8B"></span> Цветовые схемы <span class="ez-toc-section-end"></span></h3> <p> Создание тем для навигационной панели еще никогда не было таким простым благодаря комбинации классов тем и <code> утилит </code> цвета фона.Выберите <code> .navbar-light </code> для использования со светлыми фоновыми цветами или <code> .navbar-dark </code> для темных фоновых цветов. Затем выполните настройку с помощью утилит <code> .bg- * </code>. </p> <pre> <code data-lang="html"> <nav> <! - Содержимое панели навигации -> </nav> <nav> <! - Содержимое панели навигации -> </nav> <nav> <! - Содержимое панели навигации -> </nav> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D1%8B"></span> Контейнеры <span class="ez-toc-section-end"></span></h3> <p> Хотя это не обязательно, вы можете обернуть панель навигации в <code> .container </code>, чтобы центрировать ее на странице, или добавить ее внутри, чтобы центрировать только содержимое фиксированной или статической верхней панели навигации.</p> <pre> <code data-lang="html"> <div> <nav> <a href="#"> Navbar </a> </nav> </div> </code> </pre> <p> Когда контейнер находится внутри вашей навигационной панели, его горизонтальное заполнение удаляется в точках останова ниже указанного вами <code> .navbar-expand {-sm | -md | -lg | -xl} </code> class. Это гарантирует, что мы не будем излишне удваивать отступы на нижних окнах просмотра, когда ваша панель навигации свернута. </p> <pre> <code data-lang="html"> <nav> <div> <a href="#"> Navbar </a> </div> </nav> </code> </pre> <h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5"></span> Размещение <span class="ez-toc-section-end"></span></h3> <p> Используйте наши служебные программы для размещения навигационных панелей в нестатических положениях.Выберите фиксированный вверху, закрепленный внизу или прикрепленный к вершине (прокручивается вместе со страницей, пока не достигнет вершины, а затем остается там). Фиксированные панели навигации используют позицию <code>: фиксированный </code>, что означает, что они извлекаются из обычного потока DOM и могут потребовать настраиваемого CSS (например, <code> padding-top </code> на <code> <body> </code>) для предотвращения перекрытия с другими элементами. </p> <p> Также обратите внимание, что <strong> <code> .sticky-top </code> использует позицию <code>: sticky </code>, которая не полностью поддерживается в каждом браузере </strong>.</p> <pre> <code data-lang="html"> <nav> <a href="#"> По умолчанию </a> </nav> </code> </pre> <pre> <code data-lang="html"> <nav> <a href="#"> Фиксированный верх </a> </nav> </code> </pre> <pre> <code data-lang="html"> <nav> <a href="#"> Фиксированное дно </a> </nav> </code> </pre> <pre> <code data-lang="html"> <nav> <a href="#"> Липкий верх </a> </nav> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9E%D1%82%D0%B7%D1%8B%D0%B2%D1%87%D0%B8%D0%B2%D0%BE%D0%B5_%D0%BF%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5"></span> Отзывчивое поведение <span class="ez-toc-section-end"></span></h3> <p> Navbar может использовать <code> .navbar-toggler </code>, <code> .navbar-collapse </code> и <code>.navbar-expand {-sm | -md | -lg | -xl} </code> классы для изменения, когда их содержимое сворачивается за кнопкой. В сочетании с другими утилитами вы можете легко выбрать, когда показывать или скрывать определенные элементы. </p> <p> Для панелей навигации, которые никогда не сворачиваются, добавьте на панель навигации класс <code> .navbar-expand </code>. Для панелей навигации, которые всегда сворачиваются, не добавляйте класс <code> .navbar-expand </code>. </p> <h4><span class="ez-toc-section" id="%D0%A2%D1%83%D0%BC%D0%B1%D0%BB%D0%B5%D1%80"></span> Тумблер <span class="ez-toc-section-end"></span></h4> <p> Переключатели панели навигации по умолчанию выровнены по левому краю, но должны следовать за родственным элементом, таким как <code>.navbar-brand </code>, они автоматически выровняются по крайнему правому краю. Изменение разметки изменит положение переключателя на противоположное. Ниже приведены примеры различных стилей переключения. </p> <p> Без <code> .navbar-brand </code>, показанного в самой низкой точке останова: </p> <pre> <code data-lang="html"> <nav> <button type = "button" data-toggle = "collapse" data-target = "# navbarTogglerDemo01" aria-controls = "navbarTogglerDemo01" aria-extended = "false" aria-label = "Переключить навигацию"> <span> </span> </button> <div> <a href="#"> Скрытый бренд </a> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> <форма> <input type = "search" placeholder = "Search" aria-label = "Search"> <button type = "submit"> Поиск </button> </form> </div> </nav> </code> </pre> <p> С названием бренда слева и переключателем справа: </p> <pre> <code data-lang="html"> <nav> <a href="#"> Navbar </a> <button type = "button" data-toggle = "collapse" data-target = "# navbarTogglerDemo02" aria-controls = "navbarTogglerDemo02" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> <форма> <input type = "search" placeholder = "Search"> <button type = "submit"> Поиск </button> </form> </div> </nav> </code> </pre> <p> С переключателем слева и торговой маркой справа: </p> <pre> <code data-lang="html"> <nav> <button type = "button" data-toggle = "collapse" data-target = "# navbarTogglerDemo03" aria-controls = "navbarTogglerDemo03" aria-extended = "false" aria-label = "Toggle navigation"> <span> </span> </button> <a href="#"> Navbar </a> <div> <ul> <li> <a href="#"> Главная <span> (текущая) </span> </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> <форма> <input type = "search" placeholder = "Search" aria-label = "Search"> <button type = "submit"> Поиск </button> </form> </div> </nav> </code> </pre> <h4><span class="ez-toc-section" id="%D0%92%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82"></span> Внешний контент <span class="ez-toc-section-end"></span></h4> <p> Иногда вы хотите использовать плагин свертывания, чтобы активировать скрытый контент в другом месте страницы.Поскольку наш плагин работает с сопоставлением <code> id </code> и <code> data-target </code>, это легко сделать! </p> <p><h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5"></span> Свернутое содержимое <span class="ez-toc-section-end"></span></h5> <p> Переключаемый через марку навигационной панели. </p> <pre> <code data-lang="html"> <div> <div> <div> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D0%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5-2"></span> Свернутое содержимое <span class="ez-toc-section-end"></span></h5> <span> Можно переключать с помощью бренда на панели навигации. </span> </div> </div> <nav> <button type = "button" data-toggle = "collapse" data-target = "# navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-extended = "false" aria-label = "Переключить навигацию"> <span> </span> </button> </nav> </div> </code> </pre> <h2><span class="ez-toc-section" id="%D0%BA%D0%B0%D1%80%D1%82_%C2%B7_Bootstrap"></span> карт · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Карты </p> <p> Bootstrap предоставляют гибкий и расширяемый контейнер контента с множеством вариантов и опций.</p> <h3><span class="ez-toc-section" id="%D0%9E%D0%BA%D0%BE%D0%BB%D0%BE"></span> Около <span class="ez-toc-section-end"></span></h3> <p> Карта <strong> </strong> - это гибкий и расширяемый контейнер содержимого. Он включает в себя варианты верхних и нижних колонтитулов, широкий спектр контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, лунки и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов-модификаторов для карточек. </p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-43"></span> Пример <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> построены с минимальным количеством разметки и стилей, но все же обеспечивают тонну контроля и настройки.Созданные с помощью flexbox, они легко выравниваются и хорошо сочетаются с другими компонентами Bootstrap. По умолчанию у них нет поля <code>, поля </code>, поэтому при необходимости используйте служебные программы для определения интервалов. </p> <p> Ниже приведен пример базовой карточки со смешанным содержимым и фиксированной шириной. У карточек нет фиксированной ширины для начала, поэтому они естественным образом заполняют всю ширину родительского элемента. Это легко настроить с помощью наших различных вариантов размеров. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%A2%D0%B8%D0%BF%D1%8B_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0"></span> Типы контента <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается.</p> <h4><span class="ez-toc-section" id="%D0%9A%D1%83%D0%B7%D0%BE%D0%B2"></span> Кузов <span class="ez-toc-section-end"></span></h4> <p> Строительным блоком карты является <code> .card-body </code>. Используйте его всякий раз, когда вам нужен раздел на карточке с мягкой подкладкой. </p> <p> Это текст в теле карты. </p> <pre> <code data-lang="html"> <div> <div> Это текст в теле карты. </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8_%D1%82%D0%B5%D0%BA%D1%81%D1%82_%D0%B8_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Заголовки, текст и ссылки <span class="ez-toc-section-end"></span></h4> <p> Заголовки карточек используются путем добавления <code> .card-title </code> к тегу <code> <h *> </code>. Таким же образом добавляются ссылки и размещаются рядом друг с другом путем добавления <code>.card-link </code> с тегом <code> <a> </code>. </p> <p> Субтитры используются путем добавления <code> .card-subtitle </code> к тегу <code> <h *> </code>. Если элементы <code> .card-title </code> и <code> .card-subtitle </code> помещаются в элемент <code> .card-body </code>, заголовок и подзаголовок карты хорошо выравниваются. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название карты <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Подзаголовок карты <span class="ez-toc-section-end"></span></h6> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <p> Ссылка на карту<br /> Другая ссылка</p> <pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <h6><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Подзаголовок карточки <span class="ez-toc-section-end"></span></h6> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> <a href="#"> Ссылка на карту </a> <a href="#"> Другая ссылка </a> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Изображения <span class="ez-toc-section-end"></span></h4> <p> <code> .card-img-top </code> помещает изображение в верхнюю часть карточки.С <code> .card-text </code>, текст может быть добавлен к карточке. Текст в <code> .card-text </code> также можно стилизовать с помощью стандартных тегов HTML. </p> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <pre> <code data-lang="html"> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%B3%D1%80%D1%83%D0%BF%D0%BF"></span> Список групп <span class="ez-toc-section-end"></span></h4> <p> Создайте списки содержимого на карточке с группой скрытого списка.</p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> <pre> <code data-lang="html"> <div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> </div> </code> </pre> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> <pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%9A%D1%83%D1%85%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B9%D0%BA%D0%B0"></span> Кухонная мойка <span class="ez-toc-section-end"></span></h4> <p> Комбинируйте несколько типов контента, чтобы создать нужную вам карточку, или добавьте туда все.Ниже показаны стили изображения, блоки, стили текста и группа списков - все они заключены в карточку фиксированной ширины. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-3"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> <pre> <code data-lang="html"> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-3"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis в </li> <li> Вестибулум на Эросе </li> </ul> <div> <a href="#"> Ссылка на карту </a> <a href="#"> Другая ссылка </a> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%92%D0%B5%D1%80%D1%85%D0%BD%D0%B8%D0%B9_%D0%B8_%D0%BD%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B"></span> Верхний и нижний колонтитулы <span class="ez-toc-section-end"></span></h4> <p> Добавьте дополнительный верхний и / или нижний колонтитул в карточку. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <p> Заголовки карточек можно стилизовать, добавив <code> .card-header </code> к элементам <code> <h *> </code>. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-2"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <h5><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D0%BC%D0%BE%D0%B5"></span> Рекомендуемое <span class="ez-toc-section-end"></span></h5> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-2"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> </blockquote> <pre> <code data-lang="html"> <div> <div> Цитировать </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте. </p> <footer> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </footer> </blockquote> </div> </div> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-3"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> Рекомендуемые </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-3"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> <div> 2 дня назад </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80%D0%BE%D0%B2%D0%BA%D0%B0-4"></span> Калибровка <span class="ez-toc-section-end"></span></h3> <p> Карты не предполагают никакой определенной ширины <code> </code> для начала, поэтому они будут иметь ширину 100%, если не указано иное. Вы можете изменить это по мере необходимости с помощью настраиваемого CSS, классов сетки, миксинов Sass сетки или утилит. </p> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D1%81%D0%B5%D1%82%D0%BA%D0%B8"></span> Использование разметки сетки <span class="ez-toc-section-end"></span></h4> <p> Используя сетку, расположите карточки по столбцам и рядам по мере необходимости. </p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-4"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-5"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-4"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </div> <div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-5"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82"></span> Использование утилит <span class="ez-toc-section-end"></span></h4> <p> Воспользуйтесь нашим набором доступных утилит для изменения размера, чтобы быстро установить ширину карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-4"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Кнопка</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-5"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <p> Кнопка</p> <pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-4"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> Кнопка </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-5"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> Кнопка </a> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE_CSS"></span> Использование собственного CSS <span class="ez-toc-section-end"></span></h4> <p> Используйте собственный CSS в таблицах стилей или как встроенные стили для установки ширины.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-6"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-6"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Выравнивание текста <span class="ez-toc-section-end"></span></h3> <p> Вы можете быстро изменить выравнивание текста любой карточки - целиком или в отдельных частях - с помощью наших классов выравнивания текста.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-7"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-8"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-9"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-7"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-8"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-9"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F"></span> Навигация <span class="ez-toc-section-end"></span></h3> <p> Добавьте элементы навигации к заголовку (или блоку) карточки с помощью компонентов навигации Bootstrap.</p> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-10"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> <ul> <li> <a href="#"> Активно </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-10"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B9_%D1%82%D0%B8%D1%82%D1%83%D0%BB-11"></span> Особый титул <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. </p> <p> Иди куда-нибудь</p> <pre> <code data-lang="html"> <div> <div> <ul> <li> <a href="#"> Активно </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Отключено </a> </li> </ul> </div> <div> <h5><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BE%D0%B1%D1%8B%D0%B5_%D1%82%D0%B8%D1%82%D1%83%D0%BB%D1%8B-11"></span> Особые титулы <span class="ez-toc-section-end"></span></h5> <p> С вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.</p> <a href="#"> куда-нибудь </a> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-2"></span> Изображения <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> включают несколько опций для работы с изображениями. Выберите добавление «колпачков изображений» на любом конце карточки, наложение изображений с содержимым карточки или просто встраивание изображения в карточку. </p> <h4><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D1%88%D0%B0%D0%BF%D0%BA%D0%B8"></span> Изображения шапки <span class="ez-toc-section-end"></span></h4> <p> Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижние «колонтитулы» - изображения вверху или внизу карточки. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-6"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-7"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <pre> <code data-lang="html"> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-6"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-7"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9"></span> Наложение изображений <span class="ez-toc-section-end"></span></h4> <p> Превратите изображение в фон карты и наложите на нее текст.В зависимости от изображения вам могут потребоваться дополнительные стили или утилиты, а могут и не потребоваться. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-8"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> Последнее обновление 3 мин. Назад </p> <pre> <code data-lang="html"> <div> <img class="lazy lazy-hidden" src = "..." alt = "Изображение карточки"><noscript><img src = "..." alt = "Изображение карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-8"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> Последнее обновление 3 мин. назад </p> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B8%D0%BB%D0%B8_%D0%BA%D0%B0%D1%80%D1%82"></span> Стили карт <span class="ez-toc-section-end"></span></h3> <p> Карты </p> <p> содержат различные параметры для настройки фона, границ и цвета. </p> <h4><span class="ez-toc-section" id="%D0%A4%D0%BE%D0%BD_%D0%B8_%D1%86%D0%B2%D0%B5%D1%82"></span> Фон и цвет <span class="ez-toc-section-end"></span></h4> <p> Используйте текстовые и фоновые утилиты, чтобы изменить внешний вид карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название основной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название дополнительной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название предупреждающей карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Название световой карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Заголовок темной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название основной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Название дополнительной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-2"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%81_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC"></span> Заголовок карточки с предупреждением <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Светлый заголовок карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8"></span> Заголовок темной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D0%B0_%D1%81%D0%BC%D1%8B%D1%81%D0%BB%D0%B0_%D0%B2%D1%81%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC_%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F%D0%BC"></span> Передача смысла вспомогательным технологиям <span class="ez-toc-section-end"></span></h5> <p> Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса <code> .sr-only </code>. </p> <h4><span class="ez-toc-section" id="%D0%93%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0"></span> Граница <span class="ez-toc-section-end"></span></h4> <p> Используйте утилиты рамки, чтобы изменить только цвет рамки <code> </code> карточки. Обратите внимание, что вы можете поместить классы <code> .text- {color} </code> в родительский <code> .card </code> или подмножество содержимого карты, как показано ниже. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название основной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название дополнительной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-2"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-3"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название предупреждающей карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-3"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Название световой карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-2"></span> Заголовок темной карты <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты. </p> <pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название основной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Название дополнительной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-2"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D0%B8-4"></span> Название карты опасности <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%81_%D0%BF%D1%80%D0%B5%D0%B4%D1%83%D0%BF%D1%80%D0%B5%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-2"></span> Заголовок карточки с предупреждением <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-4"></span> Заголовок информационной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Светлый заголовок карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p> </div> </div> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%82%D0%B5%D0%BC%D0%BD%D0%BE%D0%B9_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-2"></span> Заголовок темной карточки <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="Mixins_%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82%D1%8B"></span> Mixins утилиты <span class="ez-toc-section-end"></span></h4> <p> Вы также можете изменить границы верхнего и нижнего колонтитула карточки по мере необходимости и даже удалить их <code> background-color </code> с <code> .bg-transparent </code>. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-3"></span> Название карты успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.</p> <pre> <code data-lang="html"> <div> <div> Заголовок </div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D1%83%D1%81%D0%BF%D0%B5%D1%85%D0%B0-3"></span> Название карточки успеха <span class="ez-toc-section-end"></span></h5> <p> Небольшой пример текста, который должен основываться на заголовке карточки и составлять основную часть содержимого карточки. </p> </div> <div> Нижний колонтитул </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9C%D0%B0%D0%BA%D0%B5%D1%82_%D0%BA%D0%B0%D1%80%D1%82%D1%8B"></span> Макет карты <span class="ez-toc-section-end"></span></h3> <p> Помимо стилизации содержимого карточек, Bootstrap включает несколько опций для размещения серий карточек. В настоящее время <strong> эти параметры макета еще не работают </strong>.</p> <h4><span class="ez-toc-section" id="%D0%93%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D0%BA%D0%B0%D1%80%D1%82"></span> Группы карт <span class="ez-toc-section-end"></span></h4> <p> Используйте группы карточек для визуализации карточек как одного присоединенного элемента с столбцами одинаковой ширины и высоты. Группы карт используют <code> дисплей: гибкий; </code>, чтобы добиться их однородного размера. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-9"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-10"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию.</p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-11"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <pre> <code data-lang="html"> <div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-9"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-10"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-11"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Содержание этой карточки даже больше, чем у первой, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre> <p> При использовании групп карточек с нижними колонтитулами их содержимое автоматически выравнивается.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-12"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-13"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-14"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <pre> <code data-lang="html"> <div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-12"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-13"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-14"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Содержание этой карточки даже больше, чем у первой, чтобы показать действие одинаковой высоты. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BB%D0%BE%D0%B4%D1%8B_%D0%BA%D0%B0%D1%80%D1%82"></span> Колоды карт <span class="ez-toc-section-end"></span></h4> <p> Нужен набор карточек одинаковой ширины и высоты, которые не прикреплены друг к другу? Используйте колоды карт. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-15"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному содержанию.Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-16"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-17"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <pre> <code data-lang="html"> <div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-15"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже, которая естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-16"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-17"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Содержание этой карточки даже больше, чем у первой, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre> <p> Как и в случае с группами карточек, нижние колонтитулы карточек в колодах автоматически выстраиваются в линию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-18"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Этот контент немного длиннее.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-19"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-20"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <pre> <code data-lang="html"> <div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-18"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Этот контент немного длиннее. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-19"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> <div> <img class="lazy lazy-hidden" src = "... "alt =" Крышка изображения карточки "><noscript><img src = "... "alt =" Крышка изображения карточки "></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-20"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию. Содержание этой карточки даже больше, чем у первой, чтобы показать действие одинаковой высоты. </p> </div> <div> <small> Последнее обновление 3 мин. назад </small> </div> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A1%D1%82%D0%BE%D0%BB%D0%B1%D1%86%D1%8B_%D0%B4%D0%BB%D1%8F_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%B5%D0%BA"></span> Столбцы для карточек <span class="ez-toc-section-end"></span></h4> <p> Карточки </p> <p> можно организовать в столбцы, подобные масонству, с помощью простого CSS, заключив их в <code>.карточки-столбики </code>. Карточки построены со свойствами CSS <code> column </code> вместо flexbox для упрощения выравнивания. Карты располагаются сверху вниз и слева направо. </p> <p> <strong> Внимание! </strong> Ваш пробег с карточными столбцами может отличаться. Чтобы карточки не разбивались по столбцам, мы должны установить для них значение <code> display: inline-block </code> как <code> column-break-inside: избегайте </code> еще не является пуленепробиваемым решением. </p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D0%BE%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F_%D0%BD%D0%B0_%D0%BD%D0%BE%D0%B2%D1%83%D1%8E_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83"></span> Название карты, которое переносится на новую строку <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже как естественный ввод к дополнительному содержанию.Этот контент немного длиннее. </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-21"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат.</p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-22"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> У этой карточки есть вспомогательный текст ниже, как естественный ввод к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <blockquote> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> </blockquote> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D1%8B-23"></span> Название карты <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному содержанию.Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. Назад </small> </p> <pre> <code data-lang="html"> <div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D0%BE%D0%B5_%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F_%D0%BD%D0%B0_%D0%BD%D0%BE%D0%B2%D1%83%D1%8E_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83"></span> Название карточки, которое переносится на новую строку <span class="ez-toc-section-end"></span></h5> <p> Это более длинная карточка с вспомогательным текстом ниже, которая естественным образом ведет к дополнительному содержанию. Этот контент немного длиннее. </p> </div> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <img class="lazy lazy-hidden" src = "..." alt = "Заголовок изображения карточки"><noscript><img src = "..." alt = "Заголовок изображения карточки"></noscript> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-21"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число посуере эрат. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-22"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Под этой карточкой есть вспомогательный текст, который естественным образом ведет к дополнительному содержанию. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> <div> <img class="lazy lazy-hidden" src = "... "alt =" Изображение карточки "><noscript><img src = "... "alt =" Изображение карточки "></noscript> </div> <div> <цитата> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте. </p> <нижний колонтитул> <маленький> Кто-то, известный в <cite title = "Source Title"> Source Title </cite> </small> </footer> </blockquote> </div> <div> <div> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8-23"></span> Название карточки <span class="ez-toc-section-end"></span></h5> <p> Это более широкая карточка с вспомогательным текстом ниже, который естественным образом ведет к дополнительному содержанию.Содержание этой карточки даже больше, чем у первой, чтобы показать действие одинаковой высоты. </p> <p> <small> Последнее обновление 3 мин. назад </small> </p> </div> </div> </div> </code> </pre> <p> Столбцы карты также могут быть расширены и настроены с помощью некоторого дополнительного кода. Ниже показано расширение класса <code> .card-columns </code>, использующее тот же CSS-код, который мы используем, - CSS-столбцы - для создания набора реагирующих уровней для изменения количества столбцов. </p> <pre> <code data-lang="scss">.card-columns { @include media-breakpoint-only (lg) { количество столбцов: 4; } @include media-breakpoint-only (xl) { количество столбцов: 5; } } </code> </pre> <h2><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%B7%D0%BE%D1%80_%C2%B7_Bootstrap"></span> Обзор · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Компоненты и опции для компоновки вашего проекта Bootstrap, включая упаковку контейнеров, мощную систему сеток, гибкий медиа-объект и адаптивные служебные классы. </p> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D1%8B-2"></span> Контейнеры <span class="ez-toc-section-end"></span></h3> <p> Контейнеры - это самый базовый элемент макета в Bootstrap, и они требуются <strong> при использовании нашей сеточной системы по умолчанию </strong>.Выберите из адаптивного контейнера фиксированной ширины (это означает, что его максимальная ширина <code> </code> изменяется в каждой точке останова) или гибкой ширины (что означает, что он всегда имеет ширину <code> 100% и </code>). </p> <p> Хотя контейнеры <em> могут быть </em> вложенными, для большинства макетов вложенный контейнер не требуется. </p> <pre> <code data-lang="html"> <div> <! - Содержимое здесь -> </div> </code> </pre> <p> Используйте <code> .container-fluid </code> для контейнера полной ширины, охватывающего всю ширину области просмотра. </p> <pre> <code data-lang="html"> <div> ... </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5_%D1%82%D0%BE%D1%87%D0%BA%D0%B8_%D0%BE%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0"></span> Адаптивные точки останова <span class="ez-toc-section-end"></span></h3> <p> Поскольку Bootstrap разработан в первую очередь для мобильных устройств, мы используем несколько медиа-запросов для создания разумных точек останова для наших макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют нам масштабировать элементы по мере изменения области просмотра. </p> <p> Bootstrap в основном использует следующие диапазоны медиа-запросов - или точки останова - в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов. </p> <pre> <code data-lang="scss"> // Очень маленькие устройства (портретные телефоны, менее 576 пикселей) // Нет медиа-запроса, так как это значение по умолчанию в Bootstrap // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) @media (минимальная ширина: 576 пикселей) {...} // Средние устройства (планшеты, 768 пикселей и выше) @media (min-width: 768 пикселей) {...} // Большие устройства (настольные компьютеры, 992 пикселей и выше) @media (min-width: 992px) {...} // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) @media (min-width: 1200px) {...} </code> </pre> <p> Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass: </p> <pre> <code data-lang="scss"> @include media-breakpoint-up (xs) {...} @include media-breakpoint-up (sm) {...} @include media-breakpoint-up (md) {...} @include media-breakpoint-up (lg) {...} @include media-breakpoint-up (xl) {...} // Пример использования: @include media-breakpoint-up (sm) { .some-class { дисплей: блок; } } </code> </pre> <p> Иногда мы используем медиа-запросы, которые идут в другом направлении (данный размер экрана <em> или меньше </em>): </p> <pre> <code data-lang="scss"> // Очень маленькие устройства (портретные телефоны, менее 576 пикселей) @media (max-width: 575,98 пикселей) {...} // Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей) @media (максимальная ширина: 767.98px) {...} // Средние устройства (планшеты, менее 992 пикселей) @media (max-width: 991.98px) {...} // Большие устройства (рабочие столы, менее 1200 пикселей) @media (max-width: 1199,98 пикселей) {...} // Очень большие устройства (большие рабочие столы) // Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы по ширине </code> </pre> <p> Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают запросы контекста диапазона, мы обходим ограничения префиксов <code> min- </code> и <code> max- </code> и области просмотра с дробной шириной (что может происходить при определенных условиях, например, на устройствах с высоким разрешением) за счет использования значений с более высокой точностью для этих сравнений.</p> <p> Еще раз, эти медиа-запросы также доступны через миксины Sass: </p> <pre> <code data-lang="scss"> @include media-breakpoint-down (xs) {...} @include media-breakpoint-down (sm) {...} @include media-breakpoint-down (md) {...} @include media-breakpoint-down (lg) {...} </code> </pre> <p> Существуют также медиа-запросы и миксины для нацеливания на один сегмент размеров экрана с использованием минимальной и максимальной ширины точки останова. </p> <pre> <code data-lang="scss"> // Очень маленькие устройства (портретные телефоны, менее 576 пикселей) @media (максимальная ширина: 575.98px) {...} // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) @media (min-width: 576px) и (max-width: 767,98px) {...} // Средние устройства (планшеты, 768 пикселей и выше) @media (min-width: 768px) и (max-width: 991.98px) {...} // Большие устройства (настольные компьютеры, 992 пикселей и выше) @media (min-width: 992px) и (max-width: 1199.98px) {...} // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) @media (min-width: 1200px) {...} </code> </pre> <p> Эти медиа-запросы также доступны через миксины Sass: </p> <pre> <code data-lang="scss"> @include media-breakpoint-only (xs) {...} @include media-breakpoint-only (sm) {...} @include media-breakpoint-only (md) {...} @include media-breakpoint-only (lg) {...} @include media-breakpoint-only (xl) {...} </code> </pre> <p> Точно так же медиа-запросы могут охватывать несколько значений ширины точки останова: </p> <pre> <code data-lang="scss"> // Пример // Применяем стили, начиная со средних и заканчивая очень большими устройствами @media (min-width: 768px) и (max-width: 1199.98px) {...} </code> </pre> <p> Миксин Sass для таргетинга на тот же диапазон размеров экрана будет: </p> <pre> <code data-lang="scss"> @include media-breakpoint-between (md, xl) {...} </code> </pre> <h3><span class="ez-toc-section" id="Z-%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81"></span> Z-индекс <span class="ez-toc-section-end"></span></h3> <p> Некоторые компоненты Bootstrap используют <code> z-index </code>, свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочивания содержимого. Мы используем шкалу z-индекса по умолчанию в Bootstrap, которая была разработана для правильного размещения элементов навигации, всплывающих и всплывающих подсказок, модальных окон и т. Д. </p> <p> Эти более высокие значения начинаются с произвольного числа, достаточно большого и достаточно конкретного, чтобы в идеале избежать конфликтов. Нам нужен стандартный набор этих элементов для наших многоуровневых компонентов - всплывающие подсказки, всплывающие окна, панели навигации, раскрывающиеся списки, модальные окна - чтобы мы могли быть достаточно последовательными в поведении.Нет причин, по которым мы не могли использовать <code> 100 </code> + или <code> 500 </code> +. </p> <p> Мы не поощряем настройку этих индивидуальных значений; если вы измените один, вам, вероятно, придется изменить их все. </p> <pre> <code data-lang="scss"> $ zindex-dropdown: 1000! По умолчанию; $ zindex-sticky: 1020! по умолчанию; $ zindex-fixed: 1030! по умолчанию; $ zindex-modal-backdrop: 1040! по умолчанию; $ zindex-modal: 1050! по умолчанию; $ zindex-popover: 1060! по умолчанию; $ zindex-tooltip: 1070! по умолчанию; </code> </pre> <p> Для обработки перекрывающихся границ внутри компонентов (например,g., кнопки и входы в группах ввода), мы используем младшие одноразрядные значения <code> z-index </code> из <code> 1 </code>, <code> 2 </code> и <code> 3 </code> для состояний по умолчанию, при наведении курсора и активного состояния. При наведении / фокусе / активном мы выводим конкретный элемент на передний план с более высоким значением <code> z-index </code>, чтобы показать их границу над соседними элементами. </p> <h2><span class="ez-toc-section" id="%D0%93%D1%80%D1%83%D0%BF%D0%BF%D0%B0_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2_%C2%B7_Bootstrap"></span> Группа списков · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Группы списков - это гибкий и мощный компонент для отображения серии содержимого.Измените и расширьте их, чтобы поддерживать практически любой контент внутри. </p> <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-6"></span> Базовый пример <span class="ez-toc-section-end"></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="%D0%90%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5_%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%B8"></span> Активные позиции <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code>.active </code> - <code> .list-group-item </code>, чтобы указать текущий активный выбор. </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="%D0%98%D0%BD%D0%B2%D0%B0%D0%BB%D0%B8%D0%B4%D1%8B"></span> Инвалиды <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code>.отключил </code> до <code> .list-group-item </code>, чтобы <em> выглядел как </em> отключенным. Обратите внимание, что для некоторых элементов с <code> .disabled </code> также потребуется специальный JavaScript, чтобы полностью отключить их события щелчка (например, ссылки). </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="%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D0%B8_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8"></span> Ссылки и кнопки <span class="ez-toc-section-end"></span></h3> <p> Используйте <code> <a> </code> s или <code> <button> </code> s, чтобы создать <em> активных элементов группы списков </em> с состояниями наведения, отключено и активное, добавив <code>.список-группа-элемент-действие </code>. Мы разделяем эти псевдоклассы, чтобы группы списков, состоящие из неинтерактивных элементов (например, <code> </p> <li> </code> s или <code> <div> </code> s), не обеспечивали доступность щелчка или касания. </p> <p> Убедитесь, что <strong> не использует стандартные классы <code> .btn </code>, здесь </strong>. </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> <p> С помощью <code> <button> </code> s вы также можете использовать атрибут <code> disabled </code> вместо <code>.инвалиды </code> кл. К сожалению, <code> <a> </code> не поддерживают атрибут disabled. </p> <p> Cras Justo Odio</p> <p> Dapibus ac facilisis в<br /> Morbi leo risus<br /> Porta ac Concectetur AC<br /> Вестибулум на эросе </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" disabled> Вестибулум на Эросе </button> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D0%BC%D1%8B%D0%B2%D0%BA%D0%B0"></span> Промывка <span class="ez-toc-section-end"></span></h3> <p> Добавьте <code>.list-group-flush </code> для удаления некоторых границ и закругленных углов для рендеринга элементов группы списков от края до края в родительском контейнере (например, в карточках). </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="%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B-4"></span> Контекстные классы <span class="ez-toc-section-end"></span></h3> <p> Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.</p> <ul> <li> Dapibus ac facilisis в </li> <li> Это основной элемент группы списка </li> <li> Это дополнительный элемент группы списка </li> <li> Это элемент группы успешного списка </li> <li> Это элемент группы списка опасностей </li> <li> Это элемент группы списка предупреждений </li> <li> Это элемент группы информационного списка </li> <li> Это элемент группы светового списка </li> <li> Это элемент группы темного списка </li> </ul> <pre> <code data-lang="html"> <ul> <li> Dapibus ac facilisis в </li> <li> Это основной элемент группы списка. </li> <li> Это дополнительный элемент группы списка. </li> <li> Это элемент группы успешного списка. </li> <li> Это элемент группы списка опасностей. </li> <li> Это элемент группы списка предупреждений. </li> <li> Это элемент группы информационного списка. </li> <li> Это элемент группы облегченного списка. </li> <li> Это элемент группы темного списка. </li> </ul> </code> </pre> <p> Контекстные классы также работают с <code>.список-группа-элемент-действие </code>. Обратите внимание на добавление стилей наведения, которых не было в предыдущем примере. Также поддерживается состояние <code> .активное </code>; примените его, чтобы указать активный выбор в элементе группы контекстного списка. </p> <pre> <code data-lang="html"> <div> <a href="#"> Dapibus ac facilisis в </a> <a href="#"> Это основной элемент группы списка </a> <a href="#"> Это дополнительный элемент группы списка </a> <a href="#"> Это успешный элемент группы списка </a> <a href="#"> Это элемент группы списка опасности </a> <a href="#"> Это элемент группы списка предупреждений </a> <a href="#"> Это элемент группы информационного списка </a> <a href="#"> Это элемент группы облегченного списка </a> <a href="#"> Это элемент группы темного списка </a> </div> </code> </pre> <h5><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D0%B0_%D1%81%D0%BC%D1%8B%D1%81%D0%BB%D0%B0_%D0%B2%D1%81%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC_%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F%D0%BC-2"></span> Передача смысла вспомогательным технологиям <span class="ez-toc-section-end"></span></h5> <p> Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса <code> .sr-only </code>. </p> <h3><span class="ez-toc-section" id="%D1%81%D0%BE_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B0%D0%BC%D0%B8"></span> со значками <span class="ez-toc-section-end"></span></h3> <p> Добавьте значки к любому элементу группы списка, чтобы отображать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит. </p> <ul> <li> Cras Justo Odio<br /> 14 </li> <li> Dapibus ac facilisis в<br /> 2 </li> <li> Morbi leo risus<br /> 1 </li> </ul> <pre> <code data-lang="html"> <ul> <li> Cras Justo Odio <span> 14 </span> </li> <li> Dapibus ac facilisis в <span> 2 </span> </li> <li> Morbi leo risus <span> 1 </span> </li> </ul> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82-3"></span> Пользовательский контент <span class="ez-toc-section-end"></span></h3> <p> Добавьте практически любой HTML-код внутри, даже для групп связанных списков, подобных приведенной ниже, с помощью утилит flexbox.</p> <pre> <code data-lang="html"> <div> <a href="#"> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0-2"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <small> 3 дня назад </small> </div> <p> Готово, чтобы пройти элит без порта беременных в Эгет Метус. Maecenas sed diam eget risus varius blandit. </p> <small> Donec id elit non mi porta. </small> </a> <a href="#"> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0-3"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <small> 3 дня назад </small> </div> <p> Готово, чтобы пройти элит без порта беременных в Эгет Метус.Maecenas sed diam eget risus varius blandit. </p> <small> Donec id elit non mi porta. </small> </a> <a href="#"> <div> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0-4"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <small> 3 дня назад </small> </div> <p> Готово, чтобы пройти элит без порта беременных в Эгет Метус. Maecenas sed diam eget risus varius blandit. </p> <small> Donec id elit non mi porta. </small> </a> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_JavaScript"></span> Поведение JavaScript <span class="ez-toc-section-end"></span></h3> <p> Используйте подключаемый модуль JavaScript вкладки - включите его отдельно или через скомпилированный загрузочный файл <code>.js </code> - чтобы расширить нашу группу списков для создания вкладок локального содержимого. </p> <p> Velit aute mollit ipsum ad dolor conctetur nulla officia culpa adipisicing упражнения fugiat tempor. Сладострастный deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate PRPRESSENDERIT occaecat nisi ad non Minimum tempor sunt Voluptate Conctetur Exercise id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt conctetur culpa aliquip eiusmod dolor.Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim. </p> <p> Cupidatat quis ad sint excepteur Laborum in esse qui. Et excepteur conctetur ex nisi eu do cillum ad Laborum. Mollit et eu officia dolore sunt Lorem culpa qui normo velit ex amet id ex. Officia anim incididunt labouris deserunt anim aute dolor incididunt veniam aute dolore делать упражнения. Dolor nisi culpa ex ad irure in elit eu dolore. Ad labouris ipsum REPREHENDERIT irure non Commodo enim culpa Commodo Veniam incididunt veniam ad.</p> <p> Выполнение упражнений pariatur aliquip aliqua aliquip не имеет смысла. Irure Lorem et labouris nostrud amet cupidatat cupidat anim do ut velit mollit consquat enim tempor. Consectetur est minim nostrud nostrudconctetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla Laborum elit adipisicing pariatur cillum.</p> <p> Irure enim occaecat labore sit qui aliquip REPREHENDERIT Amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat labouris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut упражнение iruremodo non amet conctetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p> <pre> <code data-lang="html"> <div> <div> <div role = "tablist"> <a data-toggle="list" href="#list-home" role="tab" aria-controls="home"> Главная страница </a> <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile"> Профиль </a> <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages"> Сообщения </a> <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings"> Настройки </a> </div> </div> <div> <div> <div role = "tabpanel" aria-labelledby = "list-home-list">... </div> <div role = "tabpanel" aria-labelledby = "list-profile-list"> ... </div> <div role = "tabpanel" aria-labelledby = "list-messages-list"> ... </div> <div role = "tabpanel" aria-labelledby = "list-settings-list"> ... </div> </div> </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%BE%D0%B2_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85"></span> Использование атрибутов данных <span class="ez-toc-section-end"></span></h4> <p> Вы можете активировать навигацию по группе списков без написания кода JavaScript, просто указав <code> data-toggle = "list" </code> или для элемента.Используйте эти атрибуты данных в <code> .list-group-item </code>. </p> <pre> <code data-lang="html"> <! - Группа списка -> <div role = "tablist"> <a data-toggle="list" href="#home" role="tab"> Главная страница </a> <a data-toggle="list" href="#profile" role="tab"> Профиль </a> <a data-toggle="list" href="#messages" role="tab"> Сообщения </a> <a data-toggle="list" href="#settings" role="tab"> Настройки </a> </div> <! - Панели вкладок -> <div> <div role = "tabpanel">... </div> <div role = "tabpanel"> ... </div> <div role = "tabpanel"> ... </div> <div role = "tabpanel"> ... </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%80%D0%B5%D0%B7_JavaScript"></span> Через JavaScript <span class="ez-toc-section-end"></span></h4> <p> Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать индивидуально): </p> <pre> <code data-lang="js"> $ ('# myList a'). On ('click', function (e) { e.preventDefault () $ (это) .tab ('показать') }) </code> </pre> <p> Отдельный элемент списка можно активировать несколькими способами: </p> <pre> <code data-lang="js"> $ ('# myList a [href = "# profile"]').tab ('show') // Выбираем вкладку по имени $ ('# myList a: first-child'). tab ('show') // Выбрать первую вкладку $ ('# myList a: last-child'). tab ('show') // Выбрать последнюю вкладку $ ('# myList a: nth-child (3)'). tab ('show') // Выбрать третью вкладку </code> </pre> <h4><span class="ez-toc-section" id="%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82_%D0%B7%D0%B0%D1%82%D1%83%D1%85%D0%B0%D0%BD%D0%B8%D1%8F"></span> Эффект затухания <span class="ez-toc-section-end"></span></h4> <p> Чтобы панель вкладок постепенно увеличивалась, добавьте <code> .fade </code> к каждой <code> .tab-pane </code>. На первой панели вкладок также должно быть <code> .show </code>, чтобы исходное содержимое было видимым. </p> <pre> <code data-lang="html"> <div> <div role = "tabpanel"> ... </div> <div role = "tabpanel">... </div> <div role = "tabpanel"> ... </div> <div role = "tabpanel"> ... </div> </div> </code> </pre> <h4><span class="ez-toc-section" id="%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D1%8B"></span> Методы <span class="ez-toc-section-end"></span></h4> <h5><span class="ez-toc-section" id="_%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0"></span> $ (). Вкладка <span class="ez-toc-section-end"></span></h5> <p> Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь цель <code> data-target </code> или <code> href </code>, нацеленную на узел контейнера в DOM. </p> <pre> <code data-lang="html"> <div role = "tablist"> <a data-toggle="list" href="#home" role="tab"> Главная страница </a> <a data-toggle="list" href="#profile" role="tab"> Профиль </a> <a data-toggle="list" href="#messages" role="tab"> Сообщения </a> <a data-toggle="list" href="#settings" role="tab"> Настройки </a> </div> <div> <div role = "tabpanel">... </div> <div role = "tabpanel"> ... </div> <div role = "tabpanel"> ... </div> <div role = "tabpanel"> ... </div> </div> <сценарий> $ (function () { $ ('# myList a: last-child'). tab ('показать') }) </script> </code> </pre> <h5><span class="ez-toc-section" id="tab_%22%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C%22"></span> .tab ("показать") <span class="ez-toc-section-end"></span></h5> <p> Выбирает указанный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был ранее выбран, становится невыделенным, а связанная с ним панель скрывается. <strong> Возврат к вызывающему абоненту до фактического отображения панели вкладок </strong> (например, до отображения <code>.bs.tab </code> происходит событие). </p> <pre> <code data-lang="js"> $ ('# someListItem'). Tab ('show') </code> </pre> <h4><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F"></span> События <span class="ez-toc-section-end"></span></h4> <p> При отображении новой вкладки события запускаются в следующем порядке: </p> <ol> <li> <code> hide.bs.tab </code> (на текущей активной вкладке) </li> <li> <code> show.bs.tab </code> (на вкладке для показа) </li> <li> <code> hidden.bs.tab </code> (на предыдущей активной вкладке та же, что и для события <code> hide.bs.tab </code>) </li> <li> <code> shown.bs.tab </code> (на только что активной только что показанной вкладке та же, что и для шоу <code>.bs.tab </code> событие) </li> </ol> <p> Если ни одна вкладка еще не была активной, события <code> hide.bs.tab </code> и <code> hidden.bs.tab </code> запускаться не будут. </p> <table> <thead> <tr> <th> Тип события </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> show.bs.tab </td> <td> Это событие возникает при отображении вкладки, но до отображения новой вкладки. Используйте <code> event.target </code> и <code> event.relatedTarget </code> для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.</td> <p> Показано </tr> <tr> <td>.bs.tab </td> <td> Это событие запускается при отображении вкладок после того, как вкладка была показана. Используйте <code> event.target </code> и <code> event.relatedTarget </code> для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно. </td> </tr> <tr> <td> hide.bs.tab </td> <td> Это событие возникает, когда должна быть показана новая вкладка (и, таким образом, предыдущая активная вкладка должна быть скрыта). Используйте <code> event.target </code> и <code> event.relatedTarget </code> для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.</td> </tr> <tr> <td> hidden.bs.tab </td> <td> Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте <code> event.target </code> и <code> event.relatedTarget </code> для нацеливания на предыдущую активную вкладку и новую активную вкладку соответственно. </td> </tr> </tbody> </table> <pre> <code data-lang="js"> $ ('a [data-toggle = "list"]'). On ('shown.bs.tab', function (e) { e.target // недавно активированная вкладка e.relatedTarget // предыдущая активная вкладка }) </code> </pre> <h2><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D1%80%D0%BD%D1%83%D1%82%D1%8C_%C2%B7_Bootstrap"></span> Свернуть · Bootstrap <span class="ez-toc-section-end"></span></h2> <p> Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.</p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-44"></span> Пример <span class="ez-toc-section-end"></span></h3> <p> Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса: </p> <ul> <li> <code> .collapse </code> скрывает содержимое </li> <li> <code> .collapsing </code> применяется во время переходов </li> <li> <code> .collapse.show </code> показывает содержимое </li> </ul> <p> Вы можете использовать ссылку с атрибутом <code> href </code> или кнопку с атрибутом <code> data-target </code>. В обоих случаях требуется <code> data-toggle = "collapse" </code>.</p> <p> Ссылка на href</p> <p> Кнопка с целью данных</p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </p> <pre> <code data-lang="html"> <p> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Ссылка на href </a> <button type = "button" data-toggle = "collapse" data-target = "# collapseExample" aria-extended = "false" aria-controls = "collapseExample"> Кнопка с целью данных </button> </p> <div> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9D%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D1%86%D0%B5%D0%BB%D0%B5%D0%B9"></span> Несколько целей <span class="ez-toc-section-end"></span></h3> <p> <code> <button> </code> или <code> <a> </code> могут отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора JQuery в своем атрибуте <code> href </code> или <code> data-target </code>.<br /> Несколько <code> <button> </code> или <code> <a> </code> могут отображать и скрывать элемент, если каждый из них ссылается на свой <code> href </code> или <code> data-target </code> атрибут </p> <p> Переключить первый элемент<br /> Переключить второй элемент<br /> Переключить оба элемента </p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </p> <pre> <code data-lang="html"> <p> <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1"> Переключить первый элемент </a> <button type = "button" data-toggle = "collapse" data-target = "# multiCollapseExample2" aria-extended = "false" aria-controls = "multiCollapseExample2"> Переключить второй элемент </button> <button type = "button" data-toggle = "collapse" data-target = ".multi-collapse "aria-extended =" false "aria-controls =" multiCollapseExample1 multiCollapseExample2 "> Переключить оба элемента </button> </p> <div> <div> <div> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </div> </div> </div> <div> <div> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. </div> </div> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B0%D0%BA%D0%BA%D0%BE%D1%80%D0%B4%D0%B5%D0%BE%D0%BD%D0%B0"></span> Пример аккордеона <span class="ez-toc-section-end"></span></h3> <p> Используя компонент карты, вы можете расширить стандартное поведение сворачивания для создания аккордеона. </p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS. </p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.</p> <p> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS. </p> <pre> <code data-lang="html"> <div> <div> <div> <h5> </h5><button data-toggle = "collapse" data-target = "# collapseOne" aria-extended = "true" aria-controls = "collapseOne"> Элемент складной группы №1 </button> </h5> </div> <div aria-labelledby = "headingOne" data-parent = "# аккордеон"> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.</div> </div> </div> <div> <div> <h5> </h5><button data-toggle = "collapse" data-target = "# collapseTwo" aria-extended = "false" aria-controls = "collapseTwo"> Элемент складной группы №2 </button> </h5> </div> <div aria-labelledby = "headingTwo" data-parent = "# accordion"> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.</div> </div> </div> <div> <div> <h5> </h5><button data-toggle = "collapse" data-target = "# collapseThree" aria-extended = "false" aria-controls = "collapseThree"> Элемент складной группы № 3 </button> </h5> </div> <div aria-labelledby = "headingThree" data-parent = "# accordion"> <div> Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.</div> </div> </div> </div> </code> </pre> <h3><span class="ez-toc-section" id="%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C"></span> Доступность <span class="ez-toc-section-end"></span></h3> <p> Не забудьте добавить <code> aria-extended </code> к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение <code> aria-extended = "false" </code>. Если вы настроили открывать складной элемент по умолчанию с использованием класса <code> show </code>, вместо этого установите <code> aria-extended = "true" </code> в элементе управления.Плагин автоматически переключает этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же элементу collapsbile). Если элемент HTML элемента управления не является кнопкой (например, <code> <a> </code> или <code> </p> <div> </code>), к элементу следует добавить атрибут <code> role = "button" </code>. </p> <p> Если ваш элемент управления нацелен на единственный складной элемент - i.е. атрибут <code> data-target </code> указывает на селектор <code> id </code> - вы должны добавить атрибут <code> aria-controls </code> к элементу управления, содержащий <code> id </code> сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу. </p> <p> Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 шаблон аккордеона - вам нужно будет включить их самостоятельно в собственный JavaScript. </p> <h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></span> Использование <span class="ez-toc-section-end"></span></h3> <p> Плагин коллапса использует несколько классов для работы с тяжелыми грузами: </p> <ul> <li> <code> .collapse </code> скрывает содержимое </li> <li> <code> .collapse.show </code> показывает содержимое </li> <li> <code> .collapsing </code> добавляется при запуске перехода и удаляется после его завершения </li> </ul> <p> Эти классы можно найти в <code> _transitions.scss </code>.</p> <h4><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%80%D0%B5%D0%B7_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85"></span> Через атрибуты данных <span class="ez-toc-section-end"></span></h4> <p> Просто добавьте <code> data-toggle = "collapse" </code> и <code> data-target </code> к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут <code> data-target </code> принимает селектор CSS для применения коллапса. Обязательно добавьте к разборному элементу класс <code> collapse </code>. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс <code> show </code>. </p> <p> Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных <code> data-parent = "# selector" </code>.Обратитесь к демонстрации, чтобы увидеть это в действии. </p> <h4><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%80%D0%B5%D0%B7_JavaScript-2"></span> Через JavaScript <span class="ez-toc-section-end"></span></h4> <p> Включить вручную с помощью: </p> <pre> <code data-lang="js"> $ ('. Collapse'). Collapse () </code> </pre> <h4><span class="ez-toc-section" id="%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B"></span> Параметры <span class="ez-toc-section-end"></span></h4> <p> Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к <code> data- </code>, как в <code> data-parent = "" </code>. </p> <table> <thead> <tr> <th> Имя </th> <th> Тип </th> <th> По умолчанию </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> родитель </td> <td> селектор | объект jQuery | Элемент DOM </td> <td> ложь </td> <td> Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента.(аналогично традиционному поведению аккордеона - это зависит от карты <code> класса </code>). Атрибут должен быть установлен в целевой складной области. </td> </tr> <tr> <td> переключатель </td> <td> логический </td> <td> правда </td> <td> Переключает сворачиваемый элемент при вызове </td> </tr> </tbody> </table> <h4><span class="ez-toc-section" id="%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-2"></span> Методы <span class="ez-toc-section-end"></span></h4> <h5><span class="ez-toc-section" id="%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D1%8B_%D0%B8_%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4%D1%8B"></span> Асинхронные методы и переходы <span class="ez-toc-section-end"></span></h5> <p> Все методы API <strong> являются асинхронными </strong> и запускают переход <strong> </strong>.Они возвращаются к вызывающей стороне, как только переход начинается, но <strong> до его завершения </strong>. Кроме того, вызов метода переходного компонента <strong> будет проигнорирован </strong>. </p> <p> См. Нашу документацию по JavaScript для получения дополнительной информации. </p> <h5> </h5> <p><code>. Свернуть (опции) </code> </h5> <p> Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры <code> объект </code>. </p> <pre> <code data-lang="js"> $ ('# myCollapsible'). Collapse ({ toggle: false }) </code> </pre> <h5> </h5> <p><code>.свернуть ('переключить') </code> </h5> <p> Переключает складной элемент на отображение или скрытие. <strong> Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт </strong> (то есть до того, как произойдет событие <code> shown.bs.collapse </code> или <code> hidden.bs.collapse </code>). </p> <h5> </h5> <p><code>. Свернуть ('показать') </code> </h5> <p> Показывает складной элемент. <strong> Возврат к вызывающей стороне до того, как складной элемент будет фактически показан </strong> (то есть до показанного <code>.bs.collapse </code> происходит событие). </p> <h5> </h5> <p><code>. Свернуть ('скрыть') </code> </h5> <p> Скрывает складной элемент. <strong> Возвращается к вызывающей стороне до того, как складной элемент был фактически скрыт. </strong> (т.е. до того, как произойдет событие <code> hidden.bs.collapse </code>). </p> <h5> </h5> <p><code> .collapse ('утилизировать') </code> </h5> <p> Разрушает обрушение элемента. </p> <h4><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F-2"></span> События <span class="ez-toc-section-end"></span></h4> <p> Класс collapse </p> <p> Bootstrap предоставляет несколько событий для подключения к функциональности свертывания.</p> <table> <thead> <tr> <th> Тип события </th> <th> Описание </th> </tr> </thead> <tbody> <tr> <td> show.bs.collapse </td> <td> Это событие возникает сразу после вызова метода экземпляра <code> show </code>. </td> <p> Показано </tr> <tr> <td>.bs.collapse </td> <td> Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS). </td> </tr> <tr> <td> hide.bs.</p> <div id="comments" class="comments-area"> <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/bootstrap-elementy-komponenty-bootstrap-na-russkom.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/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 * Сайт

Навигация по записям Previous PostJs цикл for: Циклы while и for Next PostПланшет что такое и как им пользоваться: Для чего нужен планшет? Как им пользоваться и какой лучше купить?