Panel bootstrap 3: Bootstrap 3 — Панели — ИТ Шеф

Содержание

Bootstrap 3 — Панели — ИТ Шеф

В этой статье вы узнаете, как создать панели с помощью Twitter Bootstrap.

Создание панели с помощью Twitter Bootstrap 3

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

Для создания панели необходимо заключить текст в блочный элемент <div> с классом .panel-body. Который в свою очередь заключить в ещё один блочный элемент <div> с классами .panel и .panel-default.


<div>
  <div>Пример простой панели</div>
</div>

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap — Панель

Создание панели с заголовком

Чтобы добавить заголовок в панель, его необходимо поместить в контейнер <div> с классом .panel-heading.


<div>
  <div>Панель с заголовком</div>
  <div>
    Содержимое панели
  </div>
</div>

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

Вы также можете заключить текст заголовка в элементы от <h2> до <h6> и применить к нему стили с помощью класса . panel-title.


<div>
  <div>
    <h4>Панель с h4 заголовком</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

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

Панель с футером

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


<div>
  <div>
    Содержимое панели
  </div>
  <div>Панель подвала</div>
</div>

Bootstrap — Панель с футером

Классы, акцентирующие состояние контекста панели

К панелям, как и к большинству других компонентов Bootstrap, можно применять дополнительные классы (.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger), которые выделяют её с помощью цвета. Таким образом, можно привлечь внимание пользователей.


<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>
<div>
  <div>
    <h4>Заголовок панели</h4>
  </div>
  <div>
    Содержимое панели
  </div>
</div>

Bootstrap — Панели с акцентными классами

Размещение таблиц и групповых списков внутри панелей

В панелях Twitter Bootstrap 3 можно размещать любые таблицы следующим образом:


<!-- Панель 1 -->
<div>
  <div>Заголовок панели</div>
  <div>
    <p>. ..</p>
  </div>
  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая текст и таблицу

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


<div>
  <!-- Обычное содержимое панели -->
  <div>Panel heading</div>

  <!-- Таблица -->
  <table>
    ...
  </table>
</div>

Bootstrap — Панель, содержащая таблицу

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


<div>
  <!-- Обычное содержимое панели -->
  <div>Товары</div>
  <div>
    Список наименований товаров, доступных в магазине.
  </div>
  <!-- Групповой список -->
  <div>
    <a href="#">Смартфоны <span>32</span></a>
    <a href="#">Ноутбуки <span>204</span></a>
    <a href="#">Планшеты <span>517</span></a>  
    <a href="#">Компьютеры <span>71</span></a>
  </div>
</div>

Bootstrap — Панель, содержащая список

Демострация компонента Panel

Bootstrap Бутстрап Панели

Панели

Панель в Bootstrap представляет собой рамку с некоторой обивкой вокруг ее содержимого:

Панели создаются с помощью . panel класса, а содержимое внутри панели имеет .panel-body класс:

Пример

<div>
<div>A Basic Panel</div>
</div>

.panel-default класс используется для стиля цвета панели. Смотрите последний пример на этой странице для более контекстуальных классов.

Panel Heading

Panel Content

.panel-heading класс добавляет заголовок на панель:

Пример

<div>
<div>Panel Heading</div>
<div>Panel Content</div>
</div>

Нижний колонтитул панели

.panel-footer класс добавляет нижний колонтитул на панель:

Пример

<div>
<div>Panel Content</div>
<div>Panel Footer</div>
</div>

Группа панелей

Чтобы сгруппировать много панелей вместе, оберните <div> с классом . panel-group вокруг них.

.panel-group класс очищает нижний край каждой панели:

Пример

<div>
<div>
<div>Panel Content</div>
</div>
<div>
<div>Panel Content</div>
</div>
</div>

Панели с контекстными классами

Чтобы раскрасить панель, используйте контекстные классы (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning или .panel-danger):

Пример

Panel with panel-default class

Panel Content

Panel with panel-primary class

Panel Content

Panel with panel-success class

Panel Content

Panel with panel-info class

Panel Content

Panel with panel-warning class

Panel Content

Panel with panel-danger class

Panel Content

Web-разработка • HTML и CSS

Для удобного выделения блоков с текстом предусмотрен компонент «Панель». Чтобы создать панель, необходимо заключить текст в блочный элемент div с классом panel-body. Который, в свою очередь, заключить в ещё один блочный элемент div с классами panel и panel-default.

<div>
    <div>Содержимое панели</div>
</div>

Чтобы добавить заголовок:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>

<div>
    <div>
        <h4>Заголовок панели</h4>
    </div>
    <div>
        Содержимое панели
    </div>
</div>

Чтобы добавить подвал:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
    <div>Подвал панели</div>
</div>

К панелям, как и к большинству других компонентов, можно применять дополнительные классы, которые выделяют её с помощью цвета:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>

В панелях можно размещать таблицы:

<div>
    <div>Заголовок панели</div>
    <div>
        <p>. ..</p>
    </div>
    <table>
        ...
    </table>
</div>

При отсутствии содержимого панели, таблица примыкает к заголовку без отступа:

<div>
    <div>Заголовок панели</div>
    <table>
        ...
    </table>
</div>

Внутри панели можно размещать групповые списки:

<div>
    <div>Товары</div>
    <div>
        Список наименований товаров, доступных в магазине.
    </div>
    <div>
        <a href="#">Смартфоны <span>32</span></a>
        <a href="#">Ноутбуки <span>93</span></a>
        <a href="#">Планшеты <span>127</span></a>  
        <a href="#">Компьютеры <span>71</span></a>
    </div>
</div>

Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк

Bootstrap 3 / CSS: Как правильно выровнять по вертикали заголовок панели

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

Я пробовал разные подходы (добавление class="clearfix" , добавление style="vertical-align:middle !important;" , добавление style="overflow:hidden !important;" и т. д.), Но все они либо игнорируются, либо увеличивают высоту заголовка панели по умолчанию.

Я предполагаю, что это связано с классом «pull-right», но поскольку это официальный класс начальной загрузки, я надеюсь, что для этого есть какой-то обходной путь.

Как я могу этого достичь? (Изображение, которое я использую в ссылке, имеет размер всего 32×32, поэтому его высота меньше высоты заголовка панели.)

Пример панели :

<div>
    <div>
        Categories
        <span><a href="#"><img src='images/icons/myImage.png' alt='' /></a></span>
    </div>
    <div>
        // ...
    </div>
</div>

html

css

twitter-bootstrap

twitter-bootstrap-3

vertical-alignment

DEMO: http://jsbin. com/yowis/2/edit

<div>

Это позволит устранить проблему поплавка. Вот в чем проблема.

Если вы хотите и текст и изображение:

<div>

а CSS-это:

.panel-heading {line-height:32px;}

Если вы не хотите добавлять clearfix, поместите это в любом месте вашего css:

.panel-heading:before {
  content: " ";
  display: table;
}
.panel-heading:after {
  clear: both;
}

У меня есть рабочий fiddle этого и не могу найти вашу проблему.
Не могли бы вы посмотреть на это и проверить, что результат-это то, что вы намеревались, пожалуйста.

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

Посетите http://jsfiddle.net/showcaseimagery/jbvbojy0/

html

<div>
    <div>
        Categories
        <span><a href="#"><img src="http://placehold. it/32x32"></a></span>
    </div>
    <div>
        this is panel body
    </div>
</div>

css

 img {
    height:32px;
    width:32px;
    margin-top:-7px;
  }

Bootstrap 3 · Иконки, меню, навигация, табы, сообщения предупреждений и др.

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

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

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

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

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

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

<span></span>

Примеры

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

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

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

Пример

Оберните кнопку выпадающего меню и список с помощью класса .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>

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

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

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

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

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

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

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

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

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

При использовании подсказок или информеров (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>

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

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

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

<div>
  ...
</div>

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

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

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

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

С

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

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

<div>
  ...
</div>

С

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

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

Левая

Средняя

Правая

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

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

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

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

<!-- 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 браузерах.

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

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

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

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

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

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

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

Мы не поддерживаем несколько 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 -->

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

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

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

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

Вкладки

Заметьте, что класс .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>

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

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

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

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

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

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

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

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

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

<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

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

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

Как ведущий, класс .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>

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

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

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

Добавьте .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="#">&laquo;</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="#">&raquo;</a></li>
</ul>

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

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

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

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

<ul>
  <li><span>&laquo;</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="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</a></li>
</ul>

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

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

<ul>
  <li><a href="#">&larr; Старая</a></li>
  <li><a href="#">Новая &rarr;</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">&times;</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>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

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

Panel heading

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

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>

  <!-- Table -->
  <table>
    ...
  </table>
</div>

Со списком групп

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

Panel heading

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

<div>
  <!-- Default panel contents -->
  <div>Panel heading</div>
  <div>
    <p>...</p>
  </div>

  <!-- List group -->
  <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 3 для начинающих. Урок №11

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать вертикальное боковое меню для веб-страницы, используя компонент «Bootstrap панель». Панель резиновая и имеет свойства растягиваться.
Для создания вертикального меню, в <div> с классом «panel-body» нужно вставить текст либо меню.
Скажу простыми словами: Bootstrap панель можно использовать для отображения текста с полем (админ-панель для управления сайтом, управления товаром для интернет магазина и т.д.):

Или же для красивого оформления меню.
Сейчас вы все увидите:

Создание простой панели для меню


<div>
<div>Пример простой панели</div>
</div>

Результат:

Создание простой панели для меню с заголовком


<div>
<div>Заголовок</div>
<div>
Содержимое панели
</div>
</div>

Результат:

Можно заголовок прописать через теги <h2> — <h6>, применяя к тегу класс «panel-title».


<div>
<div>
<h4>Панель с h4 заголовком</h4>
</div>
<div>
Содержимое панели
</div>
</div>

Результат:

Акцентирующие панели

Панель можно выделить различным цветом, при этом создать не только красивый вид меню, но и привлечь внимание пользователей.
Дополнительные классы: «panel-primary», «panel-success», «panel-info», «panel-warning», «panel-danger».


<div>
<div>
<h4>Заголовок панели 1</h4>
</div>
<div>
Содержимое панели
</div>
</div>
<div>
<div>
<h4>Заголовок панели 2</h4>
</div>
<div>
Содержимое панели
</div>
</div>
<div>
<div>
<h4>Заголовок панели 3</h4>
</div>
<div>
Содержимое панели
</div>
</div>
<div>
<div>
<h4>Заголовок панели 4</h4>
</div>
<div>
Содержимое панели
</div>
</div>
<div>
<div>
<h4>Заголовок панели 5</h4>
</div>
<div>
Содержимое панели
</div>
</div>

Результат:

Теперь попробуем создать полноценное меню, используя компоненты Bootstrap панель:


<div>
<!-- Обычное содержимое панели -->
<div>Товары</div>
<div>
Список товаров в нашем магазине.
</div>
<!-- Групповой список -->
<div>
<a href="#">Смартфоны <span>22</span></a>
<a href="#">Ноутбуки <span>24</span></a>
<a href="#">Планшеты <span>17</span></a>
<a href="#">Компьютеры <span>1</span></a>
</div>
</div>

Результат:

Можно вот так:


<div>
<div>
<h4>Заголовок панели</h4>
</div>
<div>
<ul>
<a href="#"><li>Главная</li></a>
<a href="#"><li>Портфолио</li></a>
<a href="#"><li>Автор</li></a>
<a href="#"><li>Контакты</li></a>
</ul>
</div>
</div>

Результат:

Вот так вот! Сегодня вы снова почерпнули новые знания. Жду вас на следующих уроках.

Предыдущая запись
Горизонтальное меню. Основы bootstrap 3 для начинающих. Урок №10
Следующая запись
Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12

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

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

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

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

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

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

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

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

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

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>

Пример

Оберните кнопку выпадающего меню и список с помощью класса .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>

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

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

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

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

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

Обеспечить правильное

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>

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

Button
Button

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

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

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

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> элементами

<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 атрибута не будут уважать в некоторых случаях.

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

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

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

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

Точный метод будет использоваться (видимых <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><!-- /.строки -->

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

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

Использование навигации для вкладки панели требует плагин 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>

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

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

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

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

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

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

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

<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 плагин

Адаптивная навигационная панель в вашей версии 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>

Формы

<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-text, обычно с тегом <p>, для правильного выравнивания и цвета.

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

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

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

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

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

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

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

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

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

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

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

body { padding-top: 70px; }

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

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

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

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

body { padding-bottom: 70px; }

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

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

В отличие от классов .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>

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

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

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

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

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

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

Значки не будут самозгортатись в 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>

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

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

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

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

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

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

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

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

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>

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

Примеры

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

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

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

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

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

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>

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

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>

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

По умолчанию, все .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>

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

С таблицами

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>

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

Look, I’m in a large well!

<div>...</div>

Look, I’m in a small well!

<div>...</div>

Загрузочные панели

Панели

Панель в bootstrap — это рамка с рамкой и некоторым отступом вокруг ее содержимого:

Панели

создаются с помощью класса .panel , а содержимое внутри панели имеет
.панель-кузов класс:

Пример

Базовая панель

Попробуй сам »

Класс .panel-default используется для стилизации цвета
панель.См. Последний пример на этой странице для получения дополнительных контекстных классов.

Заголовок панели

Заголовок панели

Содержание панели

Класс .panel-heading добавляет заголовок к панели:

Пример

Заголовок панели

Содержимое панели

Попробуй сам »

Нижний колонтитул панели

Модель .Panel-footer класс добавляет нижний колонтитул к панели:

Пример

Содержимое панели

Нижний колонтитул панели

Попробуй сам »

Группа панелей

Чтобы сгруппировать несколько панелей вместе, оберните

с классом .panel-group вокруг них.
Класс .panel-group очищает нижнее поле каждой панели:
Пример
Содержимое панели
Содержимое панели
Попробуй сам »
Панели с контекстными классами
Чтобы раскрасить панель, используйте контекстные классы (.Panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning или .panel-dangerous ):
Пример
Панель с классом по умолчанию
Содержание панели
Панель с панелью-первичный класс
Содержание панели
Панель с панелью класса успешности
Содержание панели
Панель с классом информации панели
Содержание панели
Панель с панелью-предупреждением класса
Содержание панели
Панель с панелью класса опасности
Содержание панели
Попробуй сам »
Компоненты · 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 в пределах обычного потока документа. Это означает, что выпадающие списки могут быть обрезаны родителями с определенными свойствами overflow или отображаться за пределами области просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.
Не рекомендуется
.pull-right alignment
Начиная с v3.1.0 мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right . Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left .
...
Добавьте заголовок, чтобы пометить разделы действий в любом раскрывающемся меню.
... Раскрывающийся заголовок ...
Разделитель
Добавьте разделитель для разделения последовательностей ссылок в раскрывающемся меню.
... ...
Отключенные пункты меню
Добавьте .disabled к
в раскрывающемся списке, чтобы отключить ссылку.
Обычная ссылка Отключенная ссылка Другая ссылка
Сгруппируйте серию кнопок вместе в одну строку с группой кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок.
Обеспечьте правильную роль
и предоставьте метку
Чтобы вспомогательные технологии, такие как программы чтения с экрана, передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут роли . Для групп кнопок это будет role = "group" , а панели инструментов должны иметь role = "toolbar" .
Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами

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

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

Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового .Используйте .input-group с .input-group-addon или .input-group-btn для добавления или добавления элементов к одному .form-control .
Текстовый
только s
Избегайте использования здесь элементов </code>, поскольку их атрибут <code> строк </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>, вам нужно будет указать контейнер option <code>: '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%D0%B9%D1%82%D0%B5_%D0%BC%D0%B5%D1%82%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>, или использование <code> aria-label </code>, <code> aria-labelledby </code>, <code> aria, описанный </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%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-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%B0%D0%B4%D0%B4%D0%BE%D0%BD%D1%8B"></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%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> Навигаторы, доступные в 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_%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA_JavaScript"></span> Для использования навигации для панелей вкладок требуется плагин вкладок JavaScript <span class="ez-toc-section-end"></span></h5> <p> Для вкладок с областями вкладок необходимо использовать плагин JavaScript вкладок.Для разметки также потребуются дополнительные атрибуты <code>, роль, </code> и ARIA — подробности см. В примере разметки плагина. </p> <h5><span class="ez-toc-section" id="%D0%A1%D0%B4%D0%B5%D0%BB%D0%B0%D0%B9%D1%82%D0%B5_%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8E_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D0%B9_%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="Tabs"></span> Tabs <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="Pills"></span> Pills <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%9F%D0%BE_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D0%B5"></span> По ширине <span class="ez-toc-section-end"></span></h3> <p> С легкостью сделайте вкладки или таблетки равной ширине их родительской на экранах шире 768 пикселей с <code>. </code> с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются. </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%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D0%B5"></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_%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8_%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%B8%D0%BC%D0%BE%D0%B3%D0%BE"></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%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%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%D0%B9%D1%82%D0%B5_%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_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%BC%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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%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="#"> <noscript><img class="lazy lazy-hidden" alt = "Бренд" src = "..."></noscript><img class="lazyload lazy lazy-hidden" alt = "Бренд" src = "..."><noscript><img alt = "Бренд" src = "..."></noscript> </a> </div> </div> </nav> </code> </pre><h3><span class="ez-toc-section" id="Forms"></span> Forms <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%D0%BE%D1%81%D1%82%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_%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-3"></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%D0%B9%D1%82%D0%B5_%D0%BC%D0%B5%D1%82%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> attribute. Если ни один из них не присутствует, программы чтения с экрана могут прибегнуть к использованию атрибута <code> заполнителя </code>, если он присутствует, но обратите внимание, что использование заполнителя <code> </code> в качестве замены для других методов маркировки не рекомендуется.</p> <h3><span class="ez-toc-section" id="Buttons"></span> Buttons <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>. -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="Fixed_to_top"></span> Fixed to top <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%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE_%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Требуется заполнение основного текста <span class="ez-toc-section-end"></span></h5> <p> Фиксированная панель навигации будет перекрывать другое содержимое, если вы не добавите заполнение <code> </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="Fixed_to_bottom"></span> Fixed to bottom <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%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BB%D0%B0"></span> Требуется заполнение тела <span class="ez-toc-section-end"></span></h5> <p> Фиксированная панель навигации будет перекрывать другой контент, если вы не добавите заполнение <code> </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="Static_top"></span> Static top <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%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-4"></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_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></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%9D%D0%B5%D0%BE%D0%B1%D1%8F%D0%B7%D0%B0%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> Ссылки на пейджер также используют общий служебный класс <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-16"></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> По умолчанию Первичная информация об успехе Предупреждение Опасность </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%D1%82%D0%BE%D1%8F%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%81%D0%B2%D0%BE%D1%80%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5"></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%B0%D1%8F_%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C"></span> Кроссбраузерная совместимость <span class="ez-toc-section-end"></span></h5> <p> Значки не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: пустой </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> small </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="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%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%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> С небольшой дополнительной разметкой можно добавить в эскизы любой вид HTML-содержимого, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BC%D0%B8%D0%BD%D0%B8%D0%B0%D1%82%D1%8E%D1%80"></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%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0"></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%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-2"></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> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> <div> <h4><span class="ez-toc-section" id="%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> ... </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>.предупреждение-отключение </code> и кнопка закрытия. </p> <p> × <strong> Внимание! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </p><pre> <code data-lang="html"> <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "Close"> <span aria-hidden = "true"> & times; </span> </button> <strong> Предупреждение! </strong> Лучше проверьте себя, вы не очень хорошо выглядите. </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D1%8C%D1%82%D0%B5_%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-3"></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%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%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%B0%D1%8F_%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%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> element.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%9F%D0%BE%D0%BB%D0%BE%D1%81%D0%B0%D1%82%D1%8B%D0%B9"></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%B5"></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="Stacked"></span> Stacked <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="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%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="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%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="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> </div> <div> <h5><span class="ez-toc-section" id="%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 in </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur ac </li> <li> Vestibulum at Eros </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 Cras justo odio </li> <li> 2 Dapibus ac facilisis в </li> <li> 1 Morbi leo risus </li> </ul><pre> <code data-lang="html"> <ul> <li> <span> 14 </span> Cras Justo Odio </li> </ul> </code> </pre><h3><span class="ez-toc-section" id="%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%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></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 Dapibus ac facilisis in Morbi leo risus Porta ac Concectetur ac Vestibulum at Eros </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_%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>.отключил </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%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></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_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%BC-3"></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-2"></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><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> Otto </td> <td> @mdo </td> </tr> <p> 916 916 916 916 916 916 916 916 916 916 Thin </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> Otto </td> <td>161625 916 932 916 916 916 916 Thin Якоба 916 932 916 Thu </p> <td> @fat </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 in </li> <li> Morbi leo risus </li> <li> Porta ac Concectetur ac </li> <li> Vestibulum at eros </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> Правила </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="//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%9B%D1%83%D0%BD%D0%BA%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></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="css_-_%D0%9A%D0%B0%D0%BA_%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C_%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_bootstrap_3_%D0%BE%D1%82%D0%B7%D1%8B%D0%B2%D1%87%D0%B8%D0%B2%D1%8B%D0%BC"></span> css — Как сделать горизонтальный список панели bootstrap 3 отзывчивым? <span class="ez-toc-section-end"></span></h2> <p> Я использую Bootstrap 3 и изо всех сил пытаюсь сделать горизонтальный список отзывчивых панелей. Мой HTML-код приведен ниже. Он отлично отображается во всех браузерах, но в мобильном разрешении текст не реагирует. Любые идеи, что мне не хватает? </p><pre> <code> <body> <div> <div> <div> <div> <div> <h4><span class="ez-toc-section" id="%D0%A1%D0%BF%D1%80%D0%B8%D0%BD%D0%BA%D0%BB%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0"></span> Спринклерная система <span class="ez-toc-section-end"></span></h4><br /> Проверка и осмотр </h4> </div> <div> Lorem ipsum dolor sit amet, qui ne iudicabit chronicatis.Cu utroque adversarium usu, ius ut autem consulatu. </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-3"></span> Заголовок панели <span class="ez-toc-section-end"></span></h4> </div> <div> Lorem ipsum dolor sit amet, qui ne iudicabit chronicatis. Cu utroque adversarium usu, ius ut autem consulatu. </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-4"></span> Заголовок панели <span class="ez-toc-section-end"></span></h4> </div> <div> Lorem ipsum dolor sit amet, qui ne iudicabit chronicatis.Cu utroque adversarium usu, ius ut autem consulatu. </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-5"></span> Заголовок панели <span class="ez-toc-section-end"></span></h4> </div> <div> Lorem ipsum dolor sit amet, qui ne iudicabit chronicatis. Cu utroque adversarium usu, ius ut autem consulatu. </div> </div> </div> </div> </div> <script defer src="https://pyobjc.ru/wp-content/cache/autoptimize/js/autoptimize_ef168a56c108700d7c1be3004e004d98.js"></script></body> </code> </pre><h2><span class="ez-toc-section" id="html_-_Bootstrap_3_-_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%80%D0%B0%D0%BD%D1%81%D1%82%D0%B2%D0%BE_%D0%B2%D0%BE%D0%BA%D1%80%D1%83%D0%B3_%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8"></span> html — Bootstrap 3 — пространство вокруг панели <span class="ez-toc-section-end"></span></h2> <p> html — Bootstrap 3 — пространство вокруг панели — qaru</p> <p> <strong> Присоединяйтесь к Stack Overflow </strong>, чтобы учиться, делиться знаниями и строить свою карьеру.</p> <p> Спросил<br /> <time itemprop="dateCreated" datetime="2017-03-17T13:14:21"> 4 года, 2 месяца назад </time> </p> <p> Просмотрено<br /> 1к раз </p> <p> Я создал форму внутри Panel в начальной загрузке </p><pre> <code> <форма> <div> <div> Поиск </div> <div> <div> <div> <label> Label1 </label> <input type = "text" /> </div> <div> <label> Label2 </label> <input type = "text" /> </div> <div> <label> Label3 </label> <input type = "text" /> </div> <div> <label> Label4 </label> <input type = "text" /> </div> <div> <button> Поиск </button> </div> </div> </div> </div> </form> </code> </pre><p> Когда я запускаю его, панель простирается от крайнего левого до крайнего правого угла.Как я могу получить некоторый интервал слева и справа, чтобы границу панели можно было легко отличить от границы браузера. </p> </p> <p> неофит</p> <p> 6,1642 золотых знака2222 серебряных знака4242 бронзовых знака </p> <p> Создан 17 мар. </p> <p> Swatiswati</p> <p> 99722 золотых знака1313 серебряных знаков2323 бронзовых знака </p> <p> 2</p> <p> Просто заверните панель в контейнер для жидкости класса </p> <p> <strong> пример фрагмента </strong> </p><pre> <code> <форма> <div> <div> <div> Поиск </div> <div> <div> <div> <label> Label1 </label> <input type = "text" /> </div> <div> <label> Label2 </label> <input type = "text" /> </div> <div> <label> Label3 </label> <input type = "text" /> </div> <div> <label> Label4 </label> <input type = "text" /> </div> <div> <button> Поиск </button> </div> </div> </div> </div> </div> </form> </code> </pre><p> С кастомным CSS — </p><pre> <code>.wrapper { маржа слева: 2%; маржа-право: 2%; } </code> </pre><pre> <code> <форма> <div> <div> <div> Поиск </div> <div> <div> <div> <label> Label1 </label> <input type = "text" /> </div> <div> <label> Label2 </label> <input type = "text" /> </div> <div> <label> Label3 </label> <input type = "text" /> </div> <div> <label> Label4 </label> <input type = "text" /> </div> <div> <button> Поиск </button> </div> </div> </div> </div> </div> </form> </code> </pre><p> <time itemprop="dateCreated" datetime="2017-03-17T13:28:19"/></p> <p> Создан 17 мар. </p> <p> неофитенеофит</p> <p> 6,1642 золотых знака2222 серебряных знака4242 бронзовых знака </p> <p> 3</p> <p> Просто добавьте немного запаса к <code>.панель </code> </p><pre> <code> .panel {margin-left: 10px; маржа справа: 10 пикселей; } </code> </pre><pre> <code> <форма> <div> <div> Поиск </div> <div> <div> <div> <label> Label1 </label> <input type = "text" /> </div> <div> <label> Label2 </label> <input type = "text" /> </div> <div> <label> Label3 </label> <input type = "text" /> </div> <div> <label> Label4 </label> <input type = "text" /> </div> <div> <button> Поиск </button> </div> </div> </div> </div> </form> </code> </pre><p> <time itemprop="dateCreated" datetime="2017-03-17T13:48:47"/></p> <p> Создан 17 марта ’17 в 16: 482017-03-17 16:48 </p> <p> lang-html </p> <p> Stack Overflow лучше всего работает с включенным JavaScript</p> <p> Ваша конфиденциальность </p> <p> Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.</p> <p> Принимать все файлы cookie</p> <p> Настроить параметры</p> </p> <h2><span class="ez-toc-section" id="Bootstrap_4_Panels_-_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D0%B8_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B5_%D0%B8_%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%BD%D0%BE%D0%B5_%D0%B8%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> Bootstrap 4 Panels — примеры и руководство. Базовое и расширенное использование <span class="ez-toc-section-end"></span></h2> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F_%D0%B8_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0"></span> Компиляция и настройка<br /> <span class="ez-toc-section-end"></span></h3> <p> Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только<br /> эти компоненты и<br /> функции, которые вам нужны.</p> <p> Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке. </p> <p> Руководство по компиляции и настройке</p> <p> Карта зависимостей файлов SCSS в MDBootstrap: </p><pre> <code> Легенда: '->' означает 'требуется' Все бесплатные и профессиональные файлы требуют файлов из каталога 'core' 'none' означает 'этот компонент не требует ничего, кроме файлов ядра' Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы. Все компоненты PRO требуют 'pro / _variables.scss 'файл scss / | | - ядро / | | | | - бутстрап / | | | - _functions.scss | | | - _variables.scss | | | | - _colors.scss | | - _global.scss | | - _helpers.scss | | - _masks.scss | | - _mixins.scss | | - _typography.scss | | - _variables.scss | | - _waves.scss | | - бесплатно / | | - _animations-basic.scss -> нет | | - _animations-extended.scss -> _animations-basic.scss | | - _buttons.scss -> нет | | - _cards.scss -> нет | | - _dropdowns.scss -> нет | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss | | - _navbars.scss -> нет | | - _pagination.scss -> нет | | - _badges.scss -> нет | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss) | | - _carousels.scss -> | | - _forms.scss -> нет | | - _msc.scss -> нет | | - _footers.scss нет (PRO :) | | - _list-group.scss -> нет | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss ) | | - _depreciated.scss | | - pro / | | | | - сборщик / | | | - _default.scss -> нет | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss | | | | - разделы / | | | - _templates.scss -> _sidenav.scss | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss, | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss | | | - _magazine.scss -> _badges.scss | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss | | | | - _variables.scss | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss | | - _tabs.scss -> _cards.scss | | - _cards.scss -> бесплатно / _cards.scss | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :) | | - _scrollspy.scss -> нет | | - _lightbox.scss -> нет | | - _chips.scss -> нет | | - _msc.scss -> нет | | - _forms.scss -> нет | | - _radio.scss -> нет | | - _checkbox.scss -> нет | | - _material-select.scss -> нет | | - _switch.scss -> нет | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss | | - _range.scss -> нет | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss | | - _autocomplete.scss -> бесплатно / _forms.scss | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss | | - _parallax.scss -> нет | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss | | - _steppers.scss -> бесплатно / _buttons.scss | | - _blog.scss -> нет | | - _toasts.scss -> бесплатно / _buttons.scss | | - _animations.scss -> нет | | - _charts.scss -> нет | | - _progress.scss -> нет | | - _scrollbar.scss -> нет | | - _skins.scss -> нет | | - _устарело.scss | `- _custom-skin.scss `- _custom-styles.scss `- _custom-variables.scss `- mdb.scss </code> </pre><p> Карта зависимостей модулей JavaScript в MDBootstrap: </p><pre> <code> Легенда: '->' означает 'требуется' Все файлы требуют jQuery и bootstrap.js js / ├── dist / │ ├── buttons.js │ ├── cards.js │ ├── character-counter.js │ ├── chip.js │ ├── collapsible.js -> vendor / velocity.js │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js │ ├── file-input.js │ ├── forms-free.js │ ├── material-select.js -> dropdown.js │ ├── mdb-autocomplete.js │ ├── preloading.js │ ├── range-input.js -> vendor / velocity.js │ ├── scrolling-navbar.js │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js │ └── smooth-scroll.js ├── _intro-mdb-pro.js ├── modules.js ├── src / │ ├── buttons.js │ ├── карты.js │ ├── character-counter.js │ ├── chip.js │ ├── collapsible.js -> vendor / velocity.js │ ├── dropdown.js -> Popper.js, jquery.easing.js │ ├── file-input.js │ ├── forms-free.js │ ├── material-select.js -> dropdown.js │ ├── mdb-autocomplete.js │ ├── preloading.js │ ├── range-input.js -> vendor / velocity.js │ ├── scrolling-navbar.js │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js │ └── smooth-scroll.js └── продавец / ├── аддоны / │ ├── datatables.js │ └── datatables.min.js ├── chart.js ├── extended-modals.js ├── hammer.js ├── jarallax.js ├── jarallax-video.js -> vendor / jarallax.js ├── jquery.easing.js ├── jquery.easypiechart.js ├── jquery.hammer.js -> vendor / hammer.js ├── jquery.sticky.js ├── lightbox.js ├── picker-date.js -> vendor / picker.js ├── picker.js ├── picker-time.js -> vendor / picker.js ├── scrollbar.js ├── scrolling-navbar.js ├── toastr.js ├── velocity.js ├── waves.js └── wow.js </code> </pre><h2><span class="ez-toc-section" id="%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%C2%B7_Bootstrap_303_Documentation"></span> компонентов · Bootstrap 3.0.3 Documentation <span class="ez-toc-section-end"></span></h2> <p> Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-17"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Оберните триггер раскрывающегося списка и раскрывающееся меню в <code>.раскрывающийся список </code> или другой элемент, объявляющий <code> position: relative; </code>. Затем добавьте HTML-код меню. </p><pre> <code data-lang="html"> <div> <button type = "button" data-toggle = "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> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B_%D1%86%D0%B5%D0%BD%D1%82%D1%80%D0%BE%D0%B2%D0%BA%D0%B8"></span> Варианты центровки <span class="ez-toc-section-end"></span></h4> <p> Добавьте <code>.потяните вправо с </code> на <code>. dropdown-menu </code>, чтобы выровнять раскрывающееся меню по правому краю. </p><pre> <code data-lang="html"> <ul role = "menu" aria-labelledby = "dLabel"> ... </ul> </code> </pre><p> Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню. </p><pre> <code data-lang="html"> <ul role = "menu" aria-labelledby = "dropdownMenu2"> <li role = "presentation"> Раскрывающийся заголовок </li> ... <li role = "presentation"> </li> <li role = "presentation"> Раскрывающийся заголовок </li> ... </ul> </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%D1%8B%D0%B5_%D0%BF%D1%83%D0%BD%D0%BA%D1%82%D1%8B_%D0%BC%D0%B5%D0%BD%D1%8E-2"></span> Отключенные пункты меню <span class="ez-toc-section-end"></span></h4> <p> Добавьте <code> .disabled </code> к <code> </p> <li> </code> в раскрывающемся списке, чтобы отключить ссылку. </p><pre> <code data-lang="html"> <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> </code> </pre><p> Сгруппируйте серию кнопок в одну строку с помощью группы кнопок.Добавьте необязательное поведение переключателя JavaScript и стиля флажка с помощью нашего плагина кнопок. </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%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA_%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> .btn-group </code> вам необходимо указать опцию <code> container: 'body' </code>, чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря округления углы при срабатывании всплывающей подсказки или всплывающего окна). </p> <h4><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></h4> <p> Оберните серию кнопок <code>.btn </code> в <code> .btn-group </code>. </p><pre> <code data-lang="html"> <div> <button type = "button"> Влево </button> <button type = "button"> В середине </button> <button type = "button"> Вправо </button> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8"></span> Панель инструментов кнопки <span class="ez-toc-section-end"></span></h4> <p> Объедините наборы <code> </p> <div> </code> в <code> </p> <div> </code> для более сложных компонентов. </p><pre> <code data-lang="html"> <div role = "toolbar"> <div> ... </div> <div>... </div> <div> ... </div> </div> </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> .btn-group- * </code> к <code> .btn-group </code>. </p><pre> <code data-lang="html"> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5"></span> Вложение <span class="ez-toc-section-end"></span></h4> <p> Поместите <code> .btn-group </code> в другую <code> .btn-group </code>, если вы хотите, чтобы выпадающие меню были смешаны с рядом кнопок.</p><pre> <code data-lang="html"> <div> <button type = "button"> 1 </button> <button type = "button"> 2 </button> <div> <button type = "button" data-toggle = "dropdown"> Падать <span> </span> </button> <ul> <li> <a href="#"> Раскрывающаяся ссылка </a> </li> <li> <a href="#"> Раскрывающаяся ссылка </a> </li> </ul> </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82"></span> Вертикальный вариант <span class="ez-toc-section-end"></span></h4> <p> Обеспечивает отображение набора кнопок вертикально, а не горизонтально.</p> <p> Кнопка<br /> Кнопка</p> <p> Кнопка<br /> Кнопка</p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D1%86%D0%B8%D1%8F_%D1%81%D0%BE%D0%B3%D0%BB%D0%B0%D1%81%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B7%D0%B2%D0%B5%D0%BD%D0%B0"></span> Вариация согласованного звена <span class="ez-toc-section-end"></span></h4> <p> Сделайте так, чтобы группа кнопок растянулась до одинакового размера, чтобы охватить всю ширину ее родительского элемента. Также работает с раскрывающимися списками кнопок в группе кнопок. </p> <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_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Использование в зависимости от элемента <span class="ez-toc-section-end"></span></h5> <p> Это работает только с элементами <code> <a> </code>, поскольку <code> <button> </code> не подбирает стили, которые мы используем для выравнивания содержимого (некоторые <code> display: table-cell; </code> -fu).</p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><p> Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в <code> .btn-group </code> и предоставив правильную разметку меню. </p> <h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0-2"></span> Зависимость плагина <span class="ez-toc-section-end"></span></h5> <p> Для раскрывающихся списков кнопок </p> <p> требуется, чтобы в вашу версию Bootstrap был включен плагин раскрывающегося списка. </p> <h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5%D1%81%D1%8F_%D0%BC%D0%B5%D0%BD%D1%8E_%D1%81_%D0%BE%D0%B4%D0%BD%D0%BE%D0%B9_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%BE%D0%B9"></span> Раскрывающееся меню с одной кнопкой <span class="ez-toc-section-end"></span></h4> <p> Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.</p><pre> <code data-lang="html"> <! - Одиночная кнопка -> <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> </code> </pre><h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5%D1%81%D1%8F_%D0%BC%D0%B5%D0%BD%D1%8E_%D1%81_%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA"></span> Раскрывающееся меню с разделением кнопок <span class="ez-toc-section-end"></span></h4> <p> Аналогичным образом создайте раскрывающиеся списки разделенных кнопок с теми же изменениями разметки, только с отдельной кнопкой.</p><pre> <code data-lang="html"> <! - Кнопка разделения -> <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> </code> </pre><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80-2"></span> Калибр <span class="ez-toc-section-end"></span></h4> <p> Выпадающие кнопки работают с кнопками любого размера.</p><pre> <code data-lang="html"> <! - Большая группа кнопок -> <div> <button type = "button" data-toggle = "dropdown"> Большая кнопка <span> </span> </button> <ul> ... </ul> </div> <! - Маленькая группа кнопок -> <div> <button type = "button" data-toggle = "dropdown"> Маленькая кнопка <span> </span> </button> <ul> ... </ul> </div> <! - Очень маленькая группа кнопок -> <div> <button type = "button" data-toggle = "dropdown"> Очень маленькая кнопка <span> </span> </button> <ul> ... </ul> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82_Dropup-2"></span> Вариант Dropup <span class="ez-toc-section-end"></span></h4> <p> Активируйте раскрывающиеся меню над элементами, добавив <code> .dropup </code> к родительскому элементу. </p><pre> <code data-lang="html"> <div> <button type = "button"> Dropup </button> <button type = "button" data-toggle = "dropdown"> <span> </span> <span> Переключить раскрывающийся список </span> </button> <ul> <! - Ссылки раскрывающегося меню -> </ul> </div> </code> </pre><p> Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового ввода.Используйте <code> .input-group </code> с <code> .input-group-addon </code> для добавления или добавления элементов к <code> .form-control </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> Избегайте использования здесь элементов <code> <select> </code>, поскольку они не могут быть полностью стилизованы в браузерах WebKit. </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-2"></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%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B0%D0%BC%D0%B8_%D1%84%D0%BE%D1%80%D0%BC"></span> Не смешивать с группами форм <span class="ez-toc-section-end"></span></h5> <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-7"></span> Базовый пример <span class="ez-toc-section-end"></span></h3><pre> <code data-lang="html"> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя"> </div> <div> <input type = "text"> <span> 0,00 </span> </div> <div> <span> $ </span> <input type = "text"> <span>.00 </span> </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"></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 = "Имя пользователя"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя"> </div> <div> <span> @ </span> <input type = "text" placeholder = "Имя пользователя"> </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"> </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> <! - /.ряд -> </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_%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> Кнопки в группах ввода немного отличаются и требуют одного дополнительного уровня вложенности. Вместо <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"> </div> <! - / input-group -> </div> <! - /.Col-LG-6 -> <div> <div> <input type = "text"> <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-2"></span> Кнопки с раскрывающимися списками <span class="ez-toc-section-end"></span></h3><pre> <code data-lang="html"> <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 -> </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-4"></span> Сегментированные кнопки <span class="ez-toc-section-end"></span></h3><pre> <code data-lang="html"> <div> <div> <! - Кнопка и раскрывающееся меню -> </div> <input type = "text"> </div> <div> <input type = "text"> <div> <! - Кнопка и раскрывающееся меню -> </div> </div> </code> </pre><p> Nav, доступные в Bootstrap, имеют общую разметку, начиная с базового класса <code> .nav </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> <a href="#"> На главную </a> </li> <li> <a href="#"> Профиль </a> </li> <li> <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> <a href="#"> На главную </a> </li> <li> <a href="#"> Профиль </a> </li> <li> <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> с выравниванием по nav. На экранах меньшего размера навигационные ссылки складываются. </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%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D0%B5-2"></span> Safari и адаптивная навигация по ширине <span class="ez-toc-section-end"></span></h5> <p> 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-2"></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-2"></span> Не влияет на функциональность ссылки <span class="ez-toc-section-end"></span></h5> <p> Этот класс изменяет только внешний вид <code> <a> </code>, но не его функциональные возможности. Используйте собственный JavaScript, чтобы отключить ссылки здесь.</p><pre> <code data-lang="html"> <ul> ... <li> <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-2"></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-2"></span> Вкладки с раскрывающимися списками <span class="ez-toc-section-end"></span></h4><pre> <code data-lang="html"> <ul> ... <li> <a data-toggle="dropdown" href="#"> Раскрывающееся меню <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_%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8_%D0%BC%D0%B5%D0%BD%D1%8E"></span> Таблетки с выпадающими меню <span class="ez-toc-section-end"></span></h4><pre> <code data-lang="html"> <ul> ... <li> <a data-toggle="dropdown" href="#"> Раскрывающееся меню <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-2"></span> Панель навигации по умолчанию <span class="ez-toc-section-end"></span></h3> <p> Панели навигации — это адаптивные мета-компоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.</p> <h5><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C_%D1%82%D0%BE%D1%87%D0%BA%D1%83_%D1%81%D1%85%D0%BB%D0%BE%D0%BF%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> Настроить точку схлопывания <span class="ez-toc-section-end"></span></h5> <p> В зависимости от содержимого на панели навигации вам может потребоваться изменить точку, в которой панель навигации переключается между свернутым и горизонтальным режимами. Настройте переменную <code> @ grid-float-breakpoint </code> или добавьте свой собственный медиа-запрос. </p> <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_JavaScript"></span> Требуется JavaScript <span class="ez-toc-section-end"></span></h5> <p> Если JavaScript отключен, а область просмотра достаточно узкая, что сворачивается панель навигации, будет невозможно развернуть панель навигации и просмотреть содержимое в пределах <code>.Навбар-развал </code>. </p><pre> <code data-lang="html"> <nav role = "navigation"> <! - Бренд и переключатель сгруппированы для лучшего отображения на мобильных устройствах -> <div> <button type = "button" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1"> <span> Переключить навигацию </span> <span> </span> <span> </span> <span> </span> </button> <a href="#"> Бренд </a> </div> <! - Соберите навигационные ссылки, формы и другой контент для переключения -> <div> <ul> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#"> Ссылка </a> </li> <li> <a href="#" data-toggle="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"> Раскрывающийся список <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 -> </nav> </code> </pre><h5><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0-3"></span> Зависимость плагина <span class="ez-toc-section-end"></span></h5> <p> Для отзывчивой панели навигации требуется, чтобы в вашу версию Bootstrap был включен плагин свертывания. </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> role = "navigation" </code> на каждую панель навигации, чтобы облегчить доступ. </p> <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. </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%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> Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода.Для этих встроенных форм навигационной панели вы можете скрыть метки с помощью класса <code> .sr-only </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-2"></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-4"></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-2"></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> <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>. </p><pre> <code data-lang="html"> <nav role = "navigation"> ... </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="css"> body {padding-top: 70px; } </code> </pre><p> Не забудьте включить этот <strong> после </strong> в основной CSS Bootstrap. </p> <h3><span class="ez-toc-section" id="%D0%A4%D0%B8%D0%BA%D1%81%D0%B8%D1%80%D1%83%D0%B5%D1%82%D1%81%D1%8F_%D1%81%D0%BD%D0%B8%D0%B7%D1%83"></span> Фиксируется снизу <span class="ez-toc-section-end"></span></h3> <p> Вместо этого добавьте <code> .navbar-fixed-bottom </code>. </p><pre> <code data-lang="html"> <nav role = "navigation"> ... </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="css"> 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> .navbar-fixed- * </code>, вам не нужно изменять какие-либо отступы в теле <code> </code>.</p><pre> <code data-lang="html"> <nav role = "navigation"> ... </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-2"></span> Перевернутая панель навигации <span class="ez-toc-section-end"></span></h3> <p> Измените внешний вид навигационной панели, добавив <code> .navbar-inverse </code>. </p><pre> <code data-lang="html"> <nav role = "navigation"> ... </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"> <ul> <li> <a href="#"> & laquo; </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="#"> & raquo; </a> </li> </ul> </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-2"></span> Отключенное и активное состояния <span class="ez-toc-section-end"></span></h4> <p> Ссылки настраиваются в зависимости от обстоятельств.Используйте <code> .disabled </code> для не кликабельных ссылок и <code> .active </code> для обозначения текущей страницы. </p><pre> <code data-lang="html"> <ul> <li> <a href="#"> & laquo; </a> </li> <li> <a href="#"> 1 <span> (текущий) </span> </a> </li> ... </ul> </code> </pre><p> При желании можно заменить активные или отключенные якоря на <code> <span> </code>, чтобы удалить функцию щелчка при сохранении заданных стилей. </p><pre> <code data-lang="html"> <ul> <li><span>«</span> </li> <li> <span> 1 <span>(current)</span></span> </li> ... </ul> </code> </pre><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BB%D0%B8%D0%B1%D1%80-3"></span> Калибр <span class="ez-toc-section-end"></span></h4> <p> Хотите больше или меньше нумерации страниц? Добавьте <code> .pagination-lg </code> или <code> .pagination-sm </code> для дополнительных размеров. </p><pre> <code data-lang="html"> <ul> ... </ul> <ul> ... </ul> <ul> ... </ul> </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-3"></span> Пример по умолчанию <span class="ez-toc-section-end"></span></h4> <p> По умолчанию ссылки в центре пейджера.</p><pre> <code data-lang="html"> <ul> <li> <a href="#"> Предыдущий </a> </li> <li> <a href="#"> Далее </a> </li> </ul> </code> </pre><h4><span class="ez-toc-section" id="%D0%97%D0%B2%D0%B5%D0%BD%D1%8C%D1%8F_%D0%B2%D1%8B%D1%80%D0%BE%D0%B2%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5"></span> Звенья выровненные <span class="ez-toc-section-end"></span></h4> <p> Как вариант, вы можете выровнять каждую ссылку по сторонам: </p><pre> <code data-lang="html"> <ul> <li> <a href="#"> & larr; Раньше </a> </li> <li> <a href="#"> Новее & rarr; </a> </li> </ul> </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> Ссылки на пейджер также используют общий <code>.отключил служебный класс </code> из разбивки на страницы. </p><pre> <code data-lang="html"> <ul> <li> <a href="#"> & larr; Раньше </a> </li> <li> <a href="#"> Новее & rarr; </a> </li> </ul> </code> </pre><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-18"></span> Пример <span class="ez-toc-section-end"></span></h4> <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-11"></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-12"></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-13"></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-14"></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-15"></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-2"></span> Пример заголовка <span class="ez-toc-section-end"></span></h4><span> Новый</span> </h4> </code> </pre><h4><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-4"></span> Доступные варианты <span class="ez-toc-section-end"></span></h4> <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><p> Легко выделяйте новые или непрочитанные элементы, добавляя <code> <span> </code> к ссылкам, навигации Bootstrap и т. Д. </p><pre> <code data-lang="html"> <a href="#"> Входящие <span> 42 </span> </a> </code> </pre><h5><span class="ez-toc-section" id="%D0%A1%D0%B0%D0%BC%D0%BE%D1%81%D0%B2%D0%BE%D1%80%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B9%D1%81%D1%8F"></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-2"></span> Кроссбраузерность <span class="ez-toc-section-end"></span></h5> <p> Значки </p> <p> не сбрасываются автоматически в Internet Explorer 8, поскольку в нем отсутствует поддержка селектора <code>: пустой </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-2"></span> Адаптируется к активным состояниям навигации <span class="ez-toc-section-end"></span></h5> <p> Включены встроенные стили для размещения значков в активных состояниях при навигации по таблицам и спискам. </p><pre> <code data-lang="html"> <ul> <li> <a href="#"> <span> 42 </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-2"></span> Привет, мир! <span class="ez-toc-section-end"></span></h2> <p> ... </p> <p> <a role="button"> Подробнее… </a> </p> </div> </code> </pre><p> Чтобы сделать джумботрон на всю ширину и без закругленных углов, поместите его снаружи всех <code>.container </code> s и вместо этого добавьте внутрь <code> .container </code>. </p><pre> <code data-lang="html"> <div> <div> ... </div> </div> </code> </pre><p> Простая оболочка для <code> h2 </code> для надлежащего разделения и сегментирования разделов содержимого на странице. Он может использовать элемент <code> small </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-2"></span> Пример заголовка страницы <span class="ez-toc-section-end"></span></h2><small> Подтекст для заголовка </small> </h2> </div> </code> </pre><p> Расширьте сеточную систему Bootstrap с помощью компонента эскизов, чтобы легко отображать сетки изображений, видео, текста и т. Д.</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-4"></span> Пример по умолчанию <span class="ez-toc-section-end"></span></h4> <p> По умолчанию эскизы Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой. </p><pre> <code data-lang="html"> <div> <div> <a href="#"> <img class="lazy lazy-hidden" data-src = "holder.js / 100% x180" alt = "..."><noscript><img data-src = "holder.js / 100% x180" alt = "..."></noscript> </a> </div> ... </div> </code> </pre><h4><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%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5-3"></span> Пользовательское содержимое <span class="ez-toc-section-end"></span></h4> <p> С небольшой дополнительной разметкой можно добавить в эскизы любой HTML-контент, например заголовки, абзацы или кнопки.</p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%D1%8D%D1%81%D0%BA%D0%B8%D0%B7%D0%B0-3"></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%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%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%AD%D1%82%D0%B8%D0%BA%D0%B5%D1%82%D0%BA%D0%B0_%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><pre> <code data-lang="html"> <div> <div> <div> <img class="lazy lazy-hidden" data-src = "держатель.js / 300x200 "alt =" ... "><noscript><img data-src = "держатель.js / 300x200 "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-5"></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> Предоставляет контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений. Для встроенного увольнения используйте плагин jQuery предупреждений.</p> <h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B-7"></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%91%D0%B5%D0%B7_%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-3"></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>... </div> <div> ... </div> <div> ... </div> <div> ... </div> </code> </pre><h3><span class="ez-toc-section" id="%D0%9E%D1%82%D0%BA%D0%BB%D0%BE%D0%BD%D1%8F%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-dismissable </code> и кнопку закрытия. </p> <p> ×<br /> <strong> Предупреждение! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите. </p><pre> <code data-lang="html"> <div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> & times; </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%D1%8C%D1%82%D0%B5_%D0%BD%D0%B0%D0%B4%D0%BB%D0%B5%D0%B6%D0%B0%D1%89%D0%B5%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> <a href="#"> ... </a> </div> <div> <a href="#">... </a> </div> <div> <a href="#"> ... </a> </div> <div> <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-3"></span> Кроссбраузерность <span class="ez-toc-section-end"></span></h5> <p> Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых своих эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже или более ранних версиях Firefox.Opera 12 не поддерживает анимацию. </p> <h4><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-8"></span> Базовый пример <span class="ez-toc-section-end"></span></h4> <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><h4><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-7"></span> Контекстные альтернативы <span class="ez-toc-section-end"></span></h4> <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><h4><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></h4> <p> Использует градиент для создания эффекта полос.Недоступно в IE8. </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><h4><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></h4> <p> Добавьте <code>.активные с </code> по <code> .progress-striped </code> для анимации полос справа налево. Доступно не во всех версиях IE. </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><h4><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></h4> <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> <h4><span class="ez-toc-section" id="%D0%9D%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D1%8C_%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"> <div> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> <div> <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-3"></span> Медиа-заголовок <span class="ez-toc-section-end"></span></h5> ... </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%A1%D0%9C%D0%98"></span> Список СМИ <span class="ez-toc-section-end"></span></h4> <p> С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для цепочек комментариев или списков статей).</p><pre> <code data-lang="html"> <ul> <li> <a href="#"> <noscript><img class="lazy lazy-hidden" src = "..." alt = "..."></noscript><img class="lazyload lazy lazy-hidden" src = "..." alt = "..."><noscript><img src = "..." alt = "..."></noscript> </a> <div> <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-4"></span> Медиа-заголовок <span class="ez-toc-section-end"></span></h5> ... </div> </li> </ul> </code> </pre><p> Группы списков — это гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым. </p> <h4><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-9"></span> Базовый пример <span class="ez-toc-section-end"></span></h4> <p> Самая основная группа списков — это просто неупорядоченный список с элементами списка и соответствующими классами.Развивайте его, используя следующие параметры или свой собственный CSS по мере необходимости. </p> <ul> <li> Cras justo odio </li> <li> Dapibus ac facilisis in </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><h4><span class="ez-toc-section" id="%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8-4"></span> Значки <span class="ez-toc-section-end"></span></h4> <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><h4><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B"></span> Связанные объекты <span class="ez-toc-section-end"></span></h4> <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><h4><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%BE%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5-4"></span> Пользовательское содержимое <span class="ez-toc-section-end"></span></h4> <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-2"></span> Заголовок элемента группы списка <span class="ez-toc-section-end"></span></h5> <p>... </p> </a> </div> </code> </pre><p> Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. В таких ситуациях попробуйте компонент панели. </p> <h4><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-10"></span> Базовый пример <span class="ez-toc-section-end"></span></h4> <p> По умолчанию все, что делает <code> .panel </code>, это применяет некоторую базовую границу и отступы для содержания некоторого содержимого. </p><pre> <code data-lang="html"> <div> <div> Пример базовой панели </div> </div> </code> </pre><h4><span class="ez-toc-section" id="%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C_%D1%81_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%BC-4"></span> Панель с заголовком <span class="ez-toc-section-end"></span></h4> <p> С легкостью добавьте контейнер заголовка на панель с помощью <code>.панельная товарная позиция </code>. Вы также можете включить любые <code> </p> <h2> </h2> <p></code>–<code> </p> <h6> </h6> <p></code> с классом <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-13"></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-6"></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><h4><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-8"></span> Контекстные альтернативы <span class="ez-toc-section-end"></span></h4> <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-14"></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-15"></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-16"></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-17"></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-18"></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><h4><span class="ez-toc-section" id="%D0%A1%D0%BE_%D1%81%D1%82%D0%BE%D0%BB%D0%B0%D0%BC%D0%B8"></span> Со столами <span class="ez-toc-section-end"></span></h4> <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> <td> 1 </td> <td> Марка </td> <td> Отто </td> <td> @mdo </td> </tr> <tr> <td> 2 </td> <td> Иаков </td> <td> Торнтон </td> <td> @ жир </td> </tr> <tr> <td> 3 </td> <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> <td> 1 </td> <td> Марка </td> <td> Отто </td> <td> @mdo </td> </tr> <tr> <td> 2 </td> <td> Иаков </td> <td> Торнтон </td> <td> @ жир </td> </tr> <tr> <td> 3 </td> <td> Ларри </td> <td> Птица </td> <td> @twitter </td> </tr> </tbody> </table><pre> <code data-lang="html"> <div> <! - Содержимое панели по умолчанию -> <div> Заголовок панели </div> <! - Таблица -> <таблица> ... </table> </div> </code> </pre><h4><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-2"></span> С группами списков <span class="ez-toc-section-end"></span></h4> <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 in </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><h4><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></h4> <p> Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки. </p><pre> <code data-lang="html"> <div>... </div> </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%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></h4> <p> Управляйте заполнением и закругленными углами с двумя дополнительными классами модификаторов. </p> <p> Смотри, я в большом колодце! </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><p> Смотри, я в маленьком колодце! </p><pre> <code data-lang="html"> <div> ... </div> </code> </pre><h2><span class="ez-toc-section" id="Bootstrap_4_%D0%9F%D0%B0%D0%BD%D0%B5%D0%BB%D0%B8_-_GeeksforGeeks"></span> Bootstrap 4 | Панели — GeeksforGeeks <span class="ez-toc-section-end"></span></h2> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <</code> <code> html </code> <code> lang </code> <code> = </code> <code> «en» </code> <code>> </code> </p> <p> </code> <code> </code> </code> <code> </code> </code> <code> </code> </code> <code> </p> <p> <code> </code> <code> <</code> <code> meta </code> <code> charset </code> <code> = </code> <code> "UTF-8" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> meta </code> <code>000</code>000</code>000</code>000</code>000</code>000</code> <code> content </code> <code> = </code> <code> "width = device-width, initial-scale = 1.0 "</code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> title </code> <code>> Панели </ </code> <code> title </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> ссылка </code> <code> <code> </code>000</code>000</code>000</code>000</code>000</code>000</code>0009000″ </code>000 </p> <p> <code> </code> <code> href </code> <code> = </code> </p> <p> <code> </code> <code> <</code> <code> скрипт </code> <code> src </code> <code> = </code> </p> <p> <code> </code> <code> </ </code> <code> скрипт </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> <code> скрипт src </code> <code> = </code> </p> <p> <code> </code> <code> </ </code> <code> скрипт </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> style </code> <code>> </code> </p> <p> <code> </code> <code>.панель {</code> </p> <p> <code> </code> <code>, поля: 5 пикселей; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p> <p> <code> </ </code> <code> головка </code> <code>> </code> </p> <p> </code> <code> <code> </code> </code> </code> <code> </code> </code> </code> <code> </code> </code> <code> </code> </p> <p> <code> </code> <code> <</code> <code> h2 </code> <code> style </code> <code> = </code> <code> "цвет: зеленый; выравнивание текста: по центру;" </code> <code>> </code> </p> <p> <code> </code> <code> GeeksforGeeks </code> </p> <p> <code> </code> <code> </ </code> <code> h2 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> </code>000</code>000 </code>000 </code>000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 </code>000 </code>000 </code>000 </p> <p> <code> </code> <code> <</code> <code> h3 </code> <code>> Панели с контекстными классами </ </code> <code> h3 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> "панель </code>-</code>" </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель панель по умолчанию" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> "панель </code> <code>" панель <code>> панель по умолчанию </ </code> <code> дел </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> «панель-тело» </code> <code>> Содержание </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> </code> <code> </code> </code> <code> <code> </code> </code> <code> <code> <code> класс </code> <code> = </code> <code> "панель панель-основная" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> "панель-заголовок" </code> <code>> панель-<code>> панель-<code> </ <code> </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель-тело" </code> <code>> Content </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> </code>0009000<code> <code> </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> дел </code> <code> класс </code> <code> = </code> <code> «панель панель-успех» </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель-заголовок" </code> <code>> панель-успех </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div <code> <code> div </code> <code> "панель-тело" </code> <code>> Содержание </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> div </code> <code> div <code> "панель информация о панели" </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "заголовок панели" </code> <code>> информация о панели </ </code> <code> div </code> </p> <p>> </code> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "панель-тело" </code> <code>> Content </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> «панель панель-предупреждение» </code> <code>> </code> <code> </code> </code> </code> </code> </code> </code> </code> </p> <p> </code> <code> class </code> <code> = </code> <code> "заголовок панели" </code> <code>> панель-предупреждение </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code>-body <code> "панель <code>> Контент </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> панель = панель <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "заголовок панели" </code> <code>> панель l-dangerous </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> «панель-корпус» </code> <code>> Содержание </ </code> <code> div </code> <code>> </code> <code>> </code> <code>> </code> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p> <p> <code> </ </code> <code> корпус </code> <code>> </code> </p> <p> </code>000</code>000</code>000<code> <code>> </code> </p> <p> .</p> </div> <footer class="entry-footer"> <span class="cat-links">Category <a href="https://pyobjc.ru/category/raznoe" rel="category tag">Разное</a></span> </footer> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://pyobjc.ru/raznoe/chto-takoe-rekrutment-rekrutment-podbor-personala.html" rel="prev">Что такое рекрутмент: Рекрутмент (подбор персонала)</a></div><div class="nav-next"><a href="https://pyobjc.ru/raznoe/zarabotat-v-internete-bez-vlozhenij-na-reklame-zarabotok-v-internete-na-reklame.html" rel="next">Заработать в интернете без вложений на рекламе: Заработок в интернете на рекламе</a></div></div> </nav> <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/panel-bootstrap-3-bootstrap-3-paneli-it-shef.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pyobjc.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><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>
Имя *
Email *
Сайт