Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Навигационная панель является простой оболочкой для позиционирования брендинг, навигация и другие элементы в заголовке краткое навигации. Это легко расширяемый и, с помощью нашего плагина крах, его можно легко интегрировать контент закадровый.
Вот что вы должны знать перед началом работы с навигационной панелью:
.navbar
и указать цветовую схему..pull-*-left
и .pull-*-right
чтобы быстро выровнять компоненты.<nav>
элемент или, если использовать более общий элемент, например <div>
добавить role="navigation"
для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:
.navbar-brand
для Вашей компании, продукта или название проекта.navbar-nav
для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков).navbar-toggler
для использования с нашими плагина крах и других навигация переключение поведения.Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</nav>
.navbar-brand
могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
</nav>
Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav
базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav
.
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
И поскольку мы используем классы для наших навигаций, вы можете избежать на основе списка подходом целиком и полностью, если вам нравится.
<nav class="navbar navbar-light bg-faded">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</nav>
Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color
утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.
Вот некоторые примеры, чтобы показать что мы имеем в виду.
<nav class="navbar navbar-dark bg-inverse">
<!-- Навигационная панель содержимое -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Навигационная панель содержимое -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Навигационная панель содержимое -->
</nav>
Хотя это не требуется, вы можете обернуть навигации в .container
, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.
<div class="container">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.
<nav class="navbar navbar-full navbar-light bg-faded">
<a class="navbar-brand" href="#">Full width</a>
</nav>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
Наш плагин развал позволяет использовать <button>
или <a>
для переключения скрытый контент.
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-*
классы в сочетании с .navbar-toggler
. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>