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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

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

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

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

Error:
Enter a valid email address

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

Делитель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Left
Middle
Right

Left
Middle
Right

Left
Middle
Right

Left
Middle
Right

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

Вложенность

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

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

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

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

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

Button
Button

Button
Button

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

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

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

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

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

IE8 и рамки

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

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

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

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

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

Ссылки действуя как кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладки

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

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

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

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

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

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

<ul>
  ...
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Логотип

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

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

Формы

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

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

<form role="search">
  <div>
    <input type="text" placeholder="Search">
  </div>
  <button type="submit">Submit</button>
</form>

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

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

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

Пример

Вызываемое, контекстное меню со списком ссылок. Работает совместно с JS-плагином: dropdown javascript plugin.

<ul role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Действие</a></li>
  <li><a tabindex="-1" href="#">Другое действие</a></li>
  <li><a tabindex="-1" href="#">Еще ссылка</a></li>
  <li></li>
  <li><a tabindex="-1" href="#">Доп. ссылка</a></li>
</ul>

Разметка

Поместите код в элемент с классом .dropdown, или другой элемент со свойством position: relative;. Затем создайте меню.

<div>
  <!-- Link or button to toggle dropdown -->
  <ul role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Действие</a></li>
    <li><a tabindex="-1" href="#">Другое действие</a></li>
    <li><a tabindex="-1" href="#">Еще ссылка</a></li>
    <li></li>
    <li><a tabindex="-1" href="#">Доп. ссылка</a></li>
  </ul>
</div>

Опции

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

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

Добавьте класс .pull-right к элементу с классом .dropdown-menu для выравнивания меню по правому краю.

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

Вложенный выпадающий список

Добавьте включенный выпадающий под-список, выпадающий при наведении курсора в стиле OS X. Добавьте класс .dropdown-submenu к любому элементу li в уже существующем выпадающем списке.

<ul role="menu" aria-labelledby="dLabel">
  ...
  <li>
    <a tabindex="-1" href="#">More options</a>
    <ul>
      ...
    </ul>
  </li>
</ul>

Пример пример редактора

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

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

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

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

Вкладки

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

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

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

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

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

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

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

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

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

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

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

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

Стек вкладок

<ul>
  ...
</ul>

Стек кнопок

<ul>
  ...
</ul>

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

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

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

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

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

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

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

Навигационный список Он же Сайдбар

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Fade in» вкладки

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

jQuery плагин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация. Компоненты · Bootstrap. Версия v4.3.1

Документация и примеры использования навигационных компонентов Bootstrap.

Основы

Навигация в Bootstrap имеет общую для подобного типа элементов разметку, от базового класса .nav до активных и «выключенных» состояний. Заменяйте классы-модификаторы для переключения между стилями.

Базовый компонент класса .nav создан на флексбоксе, что обеспечивает хорошую базу для создания всех типов навигационных компонентов. В него входят несколько стилей, которые «перебивают» остальные (для работы со списками), добавлены паддинги ссылок для увеличения «зоны клика», и базовые стили «выключенных» состояний.

В базовый компонент класса .nav не включено какое-либо состояние .active. Следующие примеры включают класс, главным образом для демонстрации, что данный конкретный класс не подключает какие-либо специальные стили.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Классы используются везде, так что ваша разметка может быть сверх-гибкой. Используйте <ul> как показано выше, или создайте свои; скажем, на основе элемента <nav>. Из-за того, что .nav использует display: flex, ссылки в навигационной панели ведут себя, как если бы были элементами такой же панели, но с меньшим количеством кода.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

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

Изменяйте стиль компонентов .nav классами-модификаторами и обычными классами. Смешивайте их и настраивайте как надо, или создайте свои.

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

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

Центрировано классом .justify-content-center:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

По правому краю классом .justify-content-end:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Вертикально

Располагайте вашу навигацию по вертикали, изменяя направление элемента flex классом .flex-column. Надо расположить ее вертикально лишь на некоторых брейкпойнтах? Используйте отзывчивые версии (например .flex-sm-column).

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Как всегда – вертикальная навигация доступна и без <ul>.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Вкладки

«Забирает» базовый элемент навигации с верха и добавляет класс .nav-tabs для создания «вкладочного» интерфейса, Используйте их для создания зоны с поддержкой содержимого в виде вкладок с плагином JavaScript.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Подушки

На том же коде HTML, но с используйте класс .nav-pills:

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Наполняйте и выравнивайте по центру

Заставьте содержимое вашего .nav расширяться на полную доступную ширину с помощью одного-двух классов-модификаторов. Для пропорционального заполнения всего доступного пространства элементами класса .nav-item, используйте класс nav-fill. Заметьте, что всё горизонтальное место занято, но не каждый элемент навигационной панели имеет одинаковую ширину.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Much longer nav link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Используя навигацию на основе <nav>, удостоверьтесь, что включаете .nav-item в ссылки.

<nav>
  <a href="#">Active</a>
  <a href="#">Much longer nav link</a>
  <a href="#">Link</a>
  <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Для создания элементов равной ширины используйте класс .nav-justified. Всё горизонтальное пространство будет занято ссылками навигационной панели, но, в отличие от примера с .nav-fill выше, каждый элемент навигационной панели будет одинаковой ширины.

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a href="#">Much longer nav link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

По аналогии с примером с .nav-fill, где использована навигация на основе <nav>, удостоверьтесь, что включили класс .nav-item в ссылки.

<nav>
  <a href="#">Active</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Disabled</a>
</nav>

Работа с гибкими классами

Если вам нужна «отзывчивая» навигационная панель, рассмотрите использование классов флексбокса. Более подробные в спецификации, они предлагают более широкую настройку по отзывчивым брейкпойнтам. В примере ниже наша навигационная панель будет расположена по вертикали на самом маленьком брейкпойнте, затем обретет горизонтальную разметку, которая, начиная с большего брейкпойнта, займет всю доступную ширину.

<nav>
  <a href="#">Active</a>
  <a href="#">Longer nav link</a>
  <a href="#">Link</a>
  <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Доступность

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

Заметьте, что навигационные панели, даже если они стилизованы как вкладки классами .nav-tabs, не должны содержать role="tablist", role="tab" или role="tabpanel". Это атрибуты подходят лишь для динамических интерфейсов вкладок, как описано в WAI ARIA Authoring Practices. Смотрите, например, про поведение JavaScript c динамическими интерфейсами вкладок в этой секции.

Выпадающие элементы

Добавляйте меню с выпадающими элементами, используя совсем немного HTML и плагин выпадающих элементов JavaScript.

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

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Disabled</a>
  </li>
</ul>

Подушки с выпадающими элементами

<ul>
  <li>
    <a href="#">Active</a>
  </li>
  <li>
    <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div></div>
      <a href="#">Separated link</a>
    </div>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Поведение JavaScript

Используйте плагин JavaScript вкладок — подключите его индивидуально или через компилированный bootstrap.js — для расширения наших навигационных вкладок и «подушек» и создания вкладочных панелей локального содержимого, или даже выпадающие меню.

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

Интерфейсы динамически переключаемых вкладок, как описано в WAI ARIA Authoring Practices, требуют атрибутов role="tablist", role="tab", role="tabpanel" и дополнительного атрибута aria- для возможности передачи их структуры, функциональности и текущего состояния юзерам вспомогательных технологий (таких как экранные читалки).

Заметьте, что интерфейсы динамически переключаемых вкладок не должны содержать выпадающие меню, т.к. это вызовет проблемы с usability и доступностью. С точки зрения удобства для пользователя тот факт, что триггер-элемент текущей отображаемой вкладки не виден немедленно (т.к. он находится внутри закрытого выпадающего меню), может вызвать неудобство. С точки зрения доступности пока еще не существует проверенного способа обозначить и передать такой тип элементов в паттерне стандарте WAI ARIA, что означает, что этот тип элементов нельзя сделать доступным для юзеров вспомогательных технологий.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Если вам необходимо, то можно работать с разметкой на основе <ul>, как показано выше, или с любой произвольной «рулоной собственной» разметкой. Обратите внимание, что если вы используете <nav>, вам не следует добавлять к ней role="tablist", так как это переопределит собственную роль элемента в качестве ориентира навигации. Вместо этого переключитесь на альтернативный элемент (в приведенном ниже примере, простой <div>) и оберните вокруг него <nav>.

Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.

Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.

<nav>
  <div role="tablist">
    <a data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div>
  <div role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Плагин вкладок работает также с «подушками».

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

<ul role="tablist">
  <li>
    <a data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div>
  <div role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

И с вертикальными «подушками».

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div>
  <div>
    <div role="tablist" aria-orientation="vertical">
      <a data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете задействовать навигацию по вкладке или «подушке» без JavaScript, а просто добавив data-toggle="tab" или data-toggle="pill" к элементу. Используйте эти атрибуты в .nav-tabs или .nav-pills.

<!-- Nav tabs -->
<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li>
    <a data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Через JavaScript

Задействуйте переключаемые вкладки через JavaScript (каждая вкладка задействуется индивидуально):

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Их можно активировать несколькими методами:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Эффект появления

Чтобы вкладки постепенно появлялись, добавьте класс .fade в каждый элемент класса .tab-pane. Первая вкладка .tab-pane также должна иметь класс .show, чтобы первоначальный контент был видимым.

<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Методы

Асинхронные методы и переходы

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

Смотрите документацию.

$().tab

Активирует вкладку и контейнер содержимого. Вкладка должна иметь data-target или href, «нацеленные» на контейнер-узел в DOM.

<ul role="tablist">
  <li>
    <a data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li>
    <a data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<div>
  <div role="tabpanel" aria-labelledby="home-tab">...</div>
  <div role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab(‘show’)

Выбирает данную вкладку и показывает связанную с ней «подушку». Любая другая вкладка, которая была выбрана до этого, становится «невыбранной» и ее «подушка» прячется. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как произойдет событие shown.bs.tab).

$('#someTab').tab('show')

.tab(‘dispose’)

Уничтожает вкладку элемента.

События

При показе новой вкладки события запускаются в такой порядке:

1. hide.bs.tab (на текущей активной вкладке)
2. show.bs.tab (на той, которая вот-вот покажется)
3. hidden.bs.tab (на предыдущей активной вкладке, как для события hide.bs.tab)
4. shown.bs.tab (на вкладке, только что ставшей активной и только что показанной, такое же как для события show.bs.tab)

Если ни одна вкладка не была активна, события hide.bs.tab и hidden.bs.tab не произойдут.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Компоненты Bootstrap

Компоненты Bootstrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пагинация

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

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

Заглавия

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

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

Кнопки

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

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

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

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

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

Метки

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

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

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

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

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

Настройка Bootstrap: выбор нужных компонентов

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

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

Зачем настраивать Bootstrap

Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.

Выбор компонентов

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Базовый CSS (Common CSS)

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

Стили для печати (print media styles)

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

@media print {
/* ваши стили */
}

Типографика (Typography)

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

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

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

Код (Code)

Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.

Сеточная система (Grid system)

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

Давайте посмотрим на пример того, как это может выглядеть:

Таблицы (Tables)

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

После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:

Формы (Forms)

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

Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.

Кнопки (Buttons)

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

Утилиты для отзывчивого дизайна (Responsive utilities)

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

Как видите, один и тот же блок может быть скрыт на планшете, но отображен на настольном компьютере или мобильном устройстве.

Компоненты (Components)

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

1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.

2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.

3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.

5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.

6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.

7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.

8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».

9. Этикетки (Labels). Имеется 6 типов:

10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.

11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.

12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.

13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.

14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.

15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.

16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).

17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.

18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.

19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.

20. Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.

Компоненты JavaScript

Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:

1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.

2. Выпадающие элементы (Dropdowns). Выпадающие списки.

3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.

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

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

6. Карусель (Carousel). Простой слайдер с выбором анимации.

Настройка переменных

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

Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.

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

Скачивание

После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

8 полезных библиотек Bootstrap UI-компонентов в 2018 году

Адаптированный перевод статьи Джонатана Саринга «9 Bootstrap UI Component Libraries for 2018».

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

Чтобы помочь вам начать, мы собрали некоторые из лучших UI-наборов. Конечно, беспристрастным наш выбор назвать нельзя: он базируется на мнении членов сообщества.

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

1. React Bootstrap

React Bootstrap это, пожалуй, самая популярная реализация Bootstrap компонентов, созданная с помощью React (14 тысяч звезд на GitHub, 300 тыс. скачиваний в неделю). Каждый компонент построен с нуля в качестве React-компонента. Для работы с существующими темами Bootstrap эти компоненты опираются только на таблицы стилей Bootstrap.

2. Reactstrap

Reactstrap это библиотека «React Bootstrap 4 компонентов без запоминания состояния», получившая на GitHub больше 6 тысяч звезд. Она не зависит от jQuery или Bootstrap Javascript, однако на них полагается Poppers.js, нужный для более продвинутого позиционирования контента.

3. Material Design React Bootstrap

Эта библиотека – набор компонентов React Bootstrap для Material Design. Компоненты предоставляют кросс-браузерную совместимость. Они прекрасно работают с Chrome, Firefox, Safari, Opera и Microsoft Edge. Чтобы помочь с проблемами выравнивания, включена поддержка системы Flexbox. Документация обширна и полезна. Познакомиться с проектом можно с помощью этого видео.

4. BootstrapVue

BootstrapVue это понятная и довольно популярная (6,5 тысяч звезд на GitHub) реализация компонентов Bootstrap 4 и grid-системы для Vue.js. Имеет обширную и автоматизированную разметку доступности WAI-ARIA. Библиотека создана для построения адаптивных, mobile-first веб-проектов с использованием Vue.js и Bootstrap 4. Она предоставляет два полезных vue-cli шаблона: webpack-simple и webpack.

5. UIV

Набор UI-компонентов Bootstrap 3, реализованный в Vue 2. Он довольно легковесный: все компоненты в Gzip весят примерно 20KB. Зависит только от Vue и Bootstrap CSS. Компненты можно импортировать по отдельности. Есть поддержка всех современных браузеров (IE 9+). SSR тоже поддерживается.

6. NG Bootstrap

Angular 6 и Bootstrap 4 это интересная комбинация для адаптивных макетов, создаваемых с помощью компонентов Angular. NG Bootstrap это библиотека UI-компонентов, написанная на TypeScript, со 100% покрытием тестами. Она буквально создана для успешной работы. Зависит она только от Angular и Bootstrap 4 CSS. Активно поддерживается.

7. AngularJS Bootstrap

Эта библиотека заработала 15 тысяч звезд на GitHub. Она представляет собой набор собственных директив AngularJS для Bootstrap с маленьким объемом (20kB в gzip) и без JS-зависимостей (jQuery, bootstrap JS). Скачать можно здесь, а посмотреть директивы – здесь.

8. NGX Bootstrap

NGX Bootstrap реализует виджеты Bootstrap 3 и 4 с помощью Angular. Этот проект получил на GitHub 4,5 тысячи звезд. Содержит все основные (и не только) Bootstrap-компоненты с использованием разметки и CSS, предоставляемых bootstrap, так что у вас не будет необходимости включать оригинальные JS-компоненты. Вы можете реализовывать собственные шаблоны и стили. Все компоненты созданы расширяемыми и адаптивными, со стандартной производительностью как для мобильных, так и для десктопных проектов. Испытать компоненты можно здесь.

компонентов · Bootstrap

Пример

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

  
  Действие  
  
  Другое действие  
  
  Что-то еще здесь  
  
 
  
  Отдельная ссылка  

 

Наценка

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

  
  

    
  Действие  
    
  Другое действие  
    
  Что-то еще здесь  
    
 
    
  Отдельная ссылка  
  

 

Опции

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

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

Добавьте .pull-right к . Dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

  ...

 

Отключенные опции меню

Добавьте .disabled к

  
  Обычная ссылка  
  
  Отключенная ссылка  
  
  Другая ссылка  

 

  ...
  

     Дополнительные параметры 
    

      ...
    
  

 

   Влево 
   Средний 
   Вправо 

 

  

    ...
  

 

  ...

 

  
 ... 
 ... 
 ... 
 ... 
  

  

    & times;  
   Предупреждение!  Лучше проверьте себя, вы не очень хорошо выглядите.