Bootstrap подключить – Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

Leave a Comment / Разное / By /

Содержание

Пользовательский интерфейс на базе Twitter Bootstrap для начинающих / Habr


В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале.

В свободное время в качестве хобби разрабатываю одностраничный агрегатор интересных заголовков новостных лент. В какой-то момент базовый функционал прототипа оказался готов, не хватало отметки только напротив задачи «Дизайн».
Получить красивый пользовательский интерфейс, не владея магией дизайнера (есть только базовые знания paint) и программиста (есть только базовые знания html и css).
Страница состоит из следующих элементов
  • Название
  • Форма отправки ссылки на новость
  • Форма отправки уникального кода читателя на e-mail
  • Форма ввода уникального кода читателя
  • Список новостей с группировкой по дате (дата, время, заголовок-ссылка, количество переходов, новость может быть прочитанной или новой)
  • Ссылка на rss
  • Ссылка на chrome extension
  • идентификатор релиза
  • e-mail обратной связи

После нескольких дней расслабленного поиска готового шаблона (css template) пришел к выводу, что это не путь настоящего джедая, т.к. все что проходило эстетический фильтр, застревало в фильтре техническом (см. постановка задачи, сложный код я просто не мог адаптировать под свои нужны). И вот, почти случайно, я попал в рай. Не буду подробно описывать Bootstrap, детали вы можете посмотреть перейдя по ссылке, перечислю основные элементы, для которых имеются готовые стили (иногда по несколько):
  1. Стандартные элементы форматирования html
  2. Списки
  3. Фрагменты кода
  4. Таблицы
  5. Формы
  6. Кнопки
  7. Элементы навигации
  8. Табы
  9. Разбивка на страницы
  10. Миниатюры
  11. Информационные сообщения
  12. Прогресс-бары

На мой взгляд, это очень круто. Все что нужно для оформления прототипа. Далее я расскажу, как использовал элементы 1,4,5 и 7 из списка.

Итак, шаг 1. Подключаем Bootstrap


Скачиваем и распаковываем архив с Bootstrap в корневую папку нашего сайта, подключаем css:
<head>
  ...
  <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
  <link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  ...
</head>

Вторая стока нужна для автоматической адаптации интерфейса под поддерживаемые Bootstrap устройства

Шаг 2. Оформляем «мясо».


Под «мясом» я понимаю список новостей. Самым простым способом это можно сделать таблицей с отключенными рамками. Первая колонка — дата (только один раз для группы), вторая колонка — время, третья — заголовок и количество переходов. Все это, согласно правилам Bootstrap нужно упаковать в контейнер:
 
<body>
  <div>
    <table>
      <tbody>
        <tr>
      	  <td>{Дата}</td>
      	  <td>{Время}</td>
      	  <td><a href="{Ссылка}">{Заголовок}</a> ({Количество переходов})</td>
      	</tr>
      </tbody>
    </table>
  </div>
</body>

Для прочитанных новостей указываем особый класс:
<a href="{Ссылка}">{Заголовок}</a>

Шаг 3. Форма отправки ссылки на новость.


Тут опять все просто, Bootstrap предоставляет несколько готовых стилей форм: обычная форма, форма одной строкой, форма поиска… Нам нужна вторая, допиливаем ее в наш контейнер перед таблицей:
  <div>
    <form method="post">
      <input type="text" placeholder="Ссылка на новость" name="new_link">
      <button type="submit">Добавить</button>
    </form>
    ...
  </div>

class=«span10» — Bootstrap предполагает построение интерфейса на базе сетки из 12 колонок, наши элементы можно выравнивать по ней. Научным методом проб и ошибок я пришел к ширине поля для ввода равного 10.

Шаг 4,5,6. Шапка.


Мои представления о том, как должен выглядеть удобный сайт предполагают минималистический стиль: все ненужное спрятано, все что не удалось спрятать — бледное. Формы прячем в выпадающее меню, ссылки на rss и chrome extension делаем бледными. Все это упаковываем в заголовок, который приклеиваем к верхней части сайта (class=«navbar navbar-fixed-top»):
<body>
  <div>
    <div>
      <div>
        <a href="">***</a>
        <ul>
          <li><a href="{Ссылка}">rss</a></li>
          <li><a href="{Ссылка}">chrome extension</a></li>
        </ul>
        <ul>
          <li>
          <a href="#" data-toggle="dropdown">Ваш уникальный код читателя <strong>{Код}</strong><b></b></a>
          <ul>
            <li><a data-toggle="modal" href="#email">Отправить на e-mail</a></li>
            <li><a data-toggle="modal" href="#new_uid">Ввести другой код</a></li>
          </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  ...
</body>

Сами формы:
  ...
  <form method="post">
    <div>
      <div>
        <a data-dismiss="modal">×</a>
        <h4>Отправить уникальный код на e-mail</h4>
      </div>
      <div>
        <input type="text" placeholder="e-mail" name="email">
          <p>Позволяет синхронизировать прочитанные на разных компьютерах новости.</p>
      </div>
      <div>
          <button type="submit" data-dismiss="modal">Отменить</button>
          <button type="submit">Отправить</button>
      </div>
    </div>
  </form>

  <form method="post">
    <div>
      <div>
        <a data-dismiss="modal">×</a>
        <h4>Ввести уникальный код читателя</h4>
      </div>
      <div>
      <input type="text" placeholder="Уникальный код" name="new_uid">
          <p>Позволяет синхронизировать прочитанные на разных компьютерах новости.</p>
      </div>
      <div>
          <button type="submit" data-dismiss="modal">Отменить</button>
          <button type="submit">Отправить</button>
      </div>
    </div>
  </form>

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

<head>
  ...
  <script src="/bootstrap/js/jquery-1.7.1.js"></script>
  <script src="/bootstrap/js/bootstrap-dropdown.js"></script>
  <script src="/bootstrap/js/bootstrap-modal.js"></script>
</head>

Шаг 7. Футер.


Дописываем основной контейнер:
  <div>
    ...
    <hr>
    <p>релиз 2012/02/19 23:49 *****</p>
  </div>



Twitter Bootstrap позволил без особых усилий и знаний, не написав ни строчки css и не сильно ломая html-код, получить очень симпатичный интерфейс прототипа, который не стыдно показать людям. Если интересно, в следующей статье я расскажу, как без глубоких знаний PHP+MySQL (имея только базовые навыки программирования) реализовать функционал, позволяющий показать вашу идею на миллион долларов не просто на бумаге, а в виде работающего прототипа.
Спасибо за внимание!
UPD: Не хочется топик в «Я пиарюсь» убирать, убрал все лишние ссылки

JavaScript. Начало работы · Bootstrap

Запустите Bootstrap с нашими дополнительными плагинами JavaScript построенными на jQuery. Узнайте о каждом плагине, наших данных и программных API-интерфейсах и т.п.

Индивидуальные или компилированные

Плагины можно подключать по одному (файлами js/dist/*.js) или все сразу – с помощью bootstrap.js или «облегченного» bootstrap.min.js (не подключайте оба сразу).

Если вы используете например, Webpack, Rollup…, то вы можете использовать файлы /js/dist/*.js готовые к UMD.

Зависимости

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы подключаете плагины по одному, проверьте существование зависимостей в документации. Также заметим, что все плагины зависят от jQuery (т.е. в файле HTML jQuery надо подключать перед плагинами). Загляните сюда bower.json для получения информации по поддерживаемым версиям jQuery.

Всплывающие подсказки (по наведению) и «всплывающие окна» (по клику мыши) зависят от библиотеки Popper.js.

Дата-атрибуты

все плагины Bootstrap можно подключить и настроить в HTML через дата-атрибуты Bootstrap «предпочитает» этот метод использования функционала JS. Удостоверьтесь, что в одном элементе используется

лишь один набор атрибутов (т.е., не получится запустить всплывающие подсказки и «всплывающие окна» из одной кнопки).

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определенного значения. data-* attributes позволяют нам хранить дополнительную информацию на стандартных, семантических элементах HTML, не загрязняя имя класса.

Однако иногда может понадобиться выключить эту способность. Для выключения API атрибута, «открепите» все обработчики событий документа, лежащие в пространстве имен data-api:

$(document).off('.data-api')

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

data-api:

$(document).off('.alert.data-api')

Селекторы

В настоящее время для запроса элементов DOM мы используем собственные методы querySelector и querySelectorAll по соображениям производительности, поэтому вы должны использовать допустимые селекторы. Если вы используете специальные селекторы, например: collapse:Example, обязательно избегайте их.

События

Bootstrap предлагает ряд собственных событий для уникальных действий большинства плагинов. В целом, эти события обозначаются инфинитивом и прошедшей формой причастия – где инфинитив (например, show) запускается в начале события, а его причастие (например, shown) – по окончанию события.

Все инфинитивные события предоставляют функциональные возможности preventDefault()

. Это дает возможность остановить выполнение действия до его начала. Возвращение false из обработчика событий также автоматически вызовет preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

Алгоритмическое API

Мы решили дать вам возможность использовать все плагины Bootstrap прямиком через JS API. Все свободно распространяемые API – это отдельные методы «цепочки вызовов», возвращающие набор параметров, над которыми производилось действие.

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Также, у каждого плагина может быть вызван конструктор через свойство Constructor: $.fn.popover.Constructor. Если вам нужен экземпляр определенного плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover').

Асинхронные функции и библиотека «переходов»

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

Чтобы выполнить действие по завершению «перехода», вы можете отследить соответствующее событие.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Установки по умолчанию

Вы можете изменить их для плагина, изменяя объект плагина Constructor.Default:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Конфликты

Иногда необходимо использовать плагины BS с другими UI – фреймворками. Тогда могут возникнуть проблемы в пространствах имен. В этом случае вы можете вызвать метод .noConflict на плагине, значение которого вы хотите переназначить.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Версии

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

$.fn.tooltip.Constructor.VERSION // => "4.3.1"

В BS4 нет т.н. fallback’a (т.е. «резервных» стилей для случая «глобальной поломки» верстки на старых браузерах), когда отключен JS

Банальный пример того, как все сейчас рисуют скругленные края у элементов:

#roundbox {
  -webkit-border-radius: 5px;  /* Safari */
  -moz-border-radius: 5px;    /* Firefox */
  -o-border-radius: 5px;     /* Opera */ 
  border-radius: 5px;  }

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

Плагины Bootstrap частично не смогут «подстроить» функциональность вашего сайта в соответствии с параметрами отображения старого браузера, если юзер зайдет на него с такового, или в случае «уничтожения» или «зависания» части кода т.е. на старых браузерах BS4 может не сработать, если там отключен JS. Если вы хотите подсказать юзеру, что делать в таком случае, используйте тэг <noscript> для пояснений о пере-включении JS.

Сторонние библиотеки

Официально BS4 не поддерживает сторонние JS библиотеки, такие как Prototype или UI-jQuery. Несмотря на использование .noConflict и группированных по функциональности обработчиков событий, при подключении сторонних библиотек могут возникнуть проблемы при компиляции.

Util

Весь JS в Bootstrap зависит от util.js, который должен подключаться среди прочих JS-файлов, кроме случаев, когда вы пользуетесь компилированным или «облегченным» bootstrap.js – потому что в этом случае он уже подключен.

util.js содержит полезные функции и базовый справочник для событий transitionEnd и эмулятор «переходов» CSS. Этот файл используется другими плагинами для проверки существования поддержки.

Антисептик

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

Значение по умолчанию whiteList (белый список) следующее:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Если вы хотите добавить новые значения в этот whiteList (белый список) по умолчанию, вы можете сделать следующее:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Если вы хотите обойти наш антисептик, потому что вы предпочитаете использовать выделенную библиотеку, например, DOMPurify, вы должны сделать следующее:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Содержание. Начало работы · Bootstrap. Версия v4.0.0

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

Предварительно компилированный Bootstrap

Строение скачанного архива BS4 будет таким:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js

Это базовая форма Bootstrap: перекомпилированные файлы для быстрого подключения в почти любой веб-проект. Доступны: компилированные файлы CSS и JS (bootstrap.*), как и компилированные «облегченные» файлы (bootstrap.min.*). Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Связанные JS-файлы (bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js) включают Popper, но не jQuery.

Кодовые карты дают независимый от языка способ показа соответствия рабочего кода и исходных кодов (sources), написанных вами при разработке.

Файлы СSS

Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.

CSS файлы Разметка Содержание Компоненты Утилиты

bootstrap.css

bootstrap.min.css

 Включены Включены Включены Включены

bootstrap-grid.css

bootstrap-grid.min.css

 Только Система сеток Не включены Не включены Только flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

 Не включены Только Reboot Не включены Не включены

Файлы JS

Аналогично имеются параметры для подключения всех или некоторых компилированных файлов JavaScript.

JS-файлы Popper jQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

 Включены Не включены

bootstrap.js

bootstrap.min.js

 Не включены Не включены

Исходный код Bootstrap

Загрузка исходного кода Bootstrap включает, наряду с исходниками Sass, CSS и JS, перекомпилированные механизмы публикации ресурсов CSS и JS.

Механизм публикации ресурсов (asset) полезен в следующих случаях:

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

Если быть более точным, сюда входит следующее:

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

В папках scss/ и js/ лежат исходники нашего CSS и JS. Папка dist/ содержит всё перечисленное в параграфе Precompiled Bootstrap выше. Папка docs/ лежит исходный код документации, и содержит папку examples/ — примеры использования Bootstrap. Помимо этого, любой другой подключенный файл нужен для поддержки пакетов, содержит информацию о лицензии и разработке.

Установка и знакомство с Bootstrap 4

Автор Алексей На чтение 3 мин. Опубликовано

Последнее изменение поста: 6 июня 2019 в 17:40

В рамках данного урока мы сделаем базовый html макет, подключим к нему Bootstrap 4.

Создание базового HTML каркаса

Открываем barackets (ну или любой другой редактор кода), создаем пустую страничку, со следующим содержимым

<!DOCTYPE html>
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body>
 
</body> 
</html>

сохраняем (файл — сохранить как), в index.html

Подключение bootstrap

Вариант 1 — локально: идем на сайт getbootstrap.com и скачиваем актуальную версию.

скачиваем bootstrap

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

структура файлов

и подключаем основные файлы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body> 

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Здесь — тег который отвечает за адаптивность, ну и подключен основной css и js файлы, но не хватает jquery (jquery.com) — без данной библиотеки, много работать не будет, так что скачиваете 3ю версию и так же подключаете.

Вариант 2 — Используем SDN — рекомендую

Все то же самое, но уже не чего не нужно скачивать

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
<script src="js/script.js"></script>
</body>
</html>

Здесь я все необходимое подключил, через SDN (сеть доставки контента) + создал и подключил пустой css и js файлы — в которых будем прописывать свои стили и код.

Навигация. Компоненты · Bootstrap

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

Тип события Описание
show.bs.tab Это событие запускается при показе вкладки, но до того, как новая вкладка показана. Используйте event.target и event.relatedTarget для «нацеливания» на активную вкладку и предыдущую активную вкладку (если доступно) соответственно.
shown.bs.tab Это событие запускается при показе вкладки после того, как новая вкладка показана. Используйте event.target и event.relatedTarget для «нацеливания» на активную вкладку и предыдущую активную вкладку (если доступно) соответственно.
hide.bs.tab Это событие запускается, когда новая вкладка вот-вот покажется (и т.о. – предыдущая активная вкладка вот-вот скроется). Используйте event.target и event.relatedTarget для «нацеливания» на текущую активную вкладку и следующую активную вкладку соответственно.
hidden.bs.tab Это событие запускается, когда новая вкладка показана (и т.о. предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для «нацеливания» на предыдущую активную вкладку и новую активную вкладку соответственно. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Навигационная панель. Компоненты · Bootstrap

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

Как это работает

Вот что вам надо знать перед использованием навбара:

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы отступов и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.
  • Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Далее вы увидите примеры и список поддерживаемых под-компонентов.

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

  • .navbar-brand для названия вашей компании, продукта или имени проекта.
  • .navbar-nav для навигации полной высоты (включая выпадающие элементы).
  • .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div aria-labelledby="navbarDropdown">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <div></div>
          <a href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

В этом примере использованы классы цвета bg-light и спейсинга my-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

<!-- As a link -->
<nav>
  <a href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav>
  <span>Navbar</span>
</nav>

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

bootstrap 
<!-- Just an image -->
<nav>
  <a href="#">
    <img src="/docs/4.3.1/assets/brand/bootstrap-solid.svg" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav>
  <a href="#">
    <img src="/docs/4.3.1/assets/brand/bootstrap-solid.svg" alt="">
    Bootstrap
  </a>
</nav>

Навбар

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

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <div>
      <a href="#">Home <span>(current)</span></a>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Disabled</a>
    </div>
  </div>
</nav>

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

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline.

<nav>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Непосредственные дочерние элементы в .navbar используют гибкую компоновку и по умолчанию имеют значение justify-content: between. Используйте дополнительные гибкие утилиты, необходимые для настройки их поведения.

<nav>
  <a>Navbar</a>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Работают и формы ввода, также:

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

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

Main button Smaller button 

<nav>
  <form>
    <button type="button">Main button</button>
    <button type="button">Smaller button</button>
  </form>
</nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Navbar text with an inline element 

<nav>
  <span>
    Navbar text with an inline element
  </span>
</nav>

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

<nav>
  <a href="#">Navbar w/ text</a>
  <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
    </ul>
    <span>
      Navbar text with an inline element
    </span>
  </div>
</nav>

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).

Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.

<nav>
  <a href="#">Default</a>
</nav>
<nav>
  <a href="#">Fixed top</a>
</nav>
<nav>
  <a href="#">Fixed bottom</a>
</nav>
<nav>
  <a href="#">Sticky top</a>
</nav>

Отзывчивое поведение

Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <a href="#">Hidden brand</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С «брендом», показанный слева, и тогглером — справа:

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С тогглером слева и «брендом» справа:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <a href="#">Navbar</a>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

Collapsed content
Toggleable via the navbar brand. 

<div>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav>
    <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
  </nav>
</div>

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

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