Это 13-й день моего участия в Gengwen Challenge.Подробности о мероприятии, пожалуйста, проверьте:Обновить вызов
"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.
13.1 Как это работает
Панель инструментов навигации Bootstrap (Navbar) более мощная и отзывчивая, чем навигация, изученная в предыдущем разделе.Структура включает в себя брендинг, навигацию, формы и т. д., а также поддержку подключаемых плагинов.
Прежде чем приступить к использованию панели навигации, необходимо знать следующее:
- Панель навигации должна быть обернута в .navbar, а также свернута с помощью .navbar-expand{-sm|-md|-lg|-xl} и использовать класс цветовой схемы.
- Ширина содержимого панели навигации по умолчанию является плавающей, контейнеры меняются, чтобы по-разному ограничивать ширину по горизонтали.
- Используйте универсальные классы spacing и flexbox для управления интервалами и выравниванием объектов на панели навигации.
- По умолчанию является отзывчивая навигация, но также может легко изменить эту опцию.
- Nav Element используется для обеспечения того, чтобы сродство может быть более общим элементам, такими как Div.
- Текущая позиция указывается установкой aria-current="page" на текущую страницу или aria-current="true" на текущий элемент в группе.
13.2 Структура панели навигации
13.2.1 Поддерживаемые подкомпоненты
Панели навигации имеют встроенную поддержку некоторых дочерних виджетов. В зависимости от ваших потребностей выберите один из следующих вариантов:
-
navbar-brand для названия вашей компании, продукта или проекта.
-
navbar-nav обеспечивает очень полную и легкую навигацию (включая поддержку выпадающих списков).
-
navbar-toggler используется для нашего плагина сворачивания и другого поведения переключения навигации.
-
Универсальные классы Spacing и flexbox для элементов управления и поведения формы.
-
navbar-text для вертикально центрированных текстовых строк.
-
.collapse.navbar-collapse Группирует и скрывает содержимое панели навигации через родительские точки останова.
-
Добавьте необязательный .navbar-scroll, чтобы установить максимальную высоту и прокрутить расширенное содержимое панели навигации.
Вот пример с дочерними элементами, включая отзывчивую панель навигации, которая автоматически сворачивается в контрольных точках md.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.bootstrap.cn"><img src="pic/logo.jpg" height="60px" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">文档</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
版本
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Bootstrap 4</a></li>
<li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">早期版本</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">留言</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="关键词" aria-label="Search">
<button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Навигация, отображаемая до и после точки останова, показана на рисунке.
Нажмите на три горизонтальные линии справа, чтобы отобразить изображение ниже, нажмите «Восстановить здесь».
После приведенного выше примера, если вы хотите написать код для реализации, потребуется много усилий, теперь просто скопируйте и вставьте. Ниже мы подробно расскажем о функциях и использовании каждого компонента.
13.2.2 Бренд (навбар-бренд)
Вы можете поместить в него текст, изображения, изображения и текстовые комбинации.В приведенном выше примере мы поместили изображение логотипа.
Слово
<!-- 可以放链接 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- 也可以放纯文本标签 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Изображение использовалось в приведенном выше примере, теперь это смешанное изображение и текст.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
13.2.3 Навигация
Соединения навигации построены на .nav, который мы изучили ранее, и требуют использования классов-переключателей для создания надлежащего адаптивного стиля. Элементы навигации на панели навигации занимают как можно больше места по горизонтали, чтобы обеспечить безопасное выравнивание содержимого панели навигации.
- Активное состояние — с .active — указывает на текущую страницу. Может использоваться непосредственно в .nav-ссылке или непосредственно под .nav-item.
- Обратите внимание, что вы должны добавить атрибут aria-current к самой ссылке .nav.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Краткий способ без использования списка.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">首页</a>
<a class="nav-link" href="#">功能</a>
<a class="nav-link" href="#">价格</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Оба имеют одинаковый эффект
Вы также можете использовать выпадающие меню в элементе навигации панели навигации. Выпадающему меню нужен элемент-оболочка для позиционирования, обязательно используйте отдельные и вложенные элементы для .nav-item и .nav-link, как показано ниже.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">菜单一</a></li>
<li><a class="dropdown-item" href="#">菜单二</a></li>
<li><a class="dropdown-item" href="#">菜单三</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
13.2.4 Формы
Вы можете поместить различные формы и элементы в панель навигации, такие как форма поиска в 13.2.1, прямые дочерние элементы в панели навигации используют гибкую компоновку, по умолчанию используется justify-content:space-between, то есть выравнивание обоих концов . Используйте другие классы с одной звездочкой, чтобы настроить это поведение по мере необходимости.
Входная группа также может использоваться таким образом. Если панель навигации полностью или в основном представляет собой форму, вы можете использовать элемент формы в качестве контейнера и сохранить HTML-код.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="请输入用户名" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Панель навигации формы также поддерживает различные кнопки. Это также большое напоминание о том, что мы можем использовать инструмент вертикального выравнивания для выравнивания элементов разных размеров.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
13.2.5 Текст
Панели навигации могут содержать некоторый текст через .navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальный интервал текстовых строк. Кажется, что это используется нечасто, так что возьмем официальный пример напрямую.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Смешайте с другими элементами и общими категориями по мере необходимости.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
13.3 Цветовая схема
Благодаря сочетанию класса темы и универсального класса background-color оформление панели навигации никогда не было таким простым. Выберите светлый цвет фона из navbar-light или navbar-dark для темного цвета фона. Затем используйте.bg-*Общая настройка категории.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
<button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
<button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">品牌</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
<button class="btn btn-outline-primary text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Дополнительные цвета можно просмотреть в разделе «Общий класс» > «Цвета фона», которые также описаны в предыдущей главе «Цвета таблицы».
13.4 Контейнеры
Хотя это и не обязательно, вы можете обернуть панель навигации в .container, чтобы отцентрировать ее на странице. Вы можете использовать любой адаптивный контейнер, чтобы изменить отображаемую ширину содержимого на панели навигации. Эта часть контента относительно проста, и я не буду ее демонстрировать.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
13.5 Позиционирование
Используйте нашу общую категорию позиционирования, чтобы разместить панель навигации в нестатическом месте. Выберите «Закрепить вверху», «Закрепить внизу» или «Вставить вверх» (которые прокручиваются вместе со страницей, пока объект не достигнет верхнего края и не останется там, где он был). Фиксированные панели навигации используют position:fixed, что означает, что они выходят за рамки обычного потока файлов DOM и могут потребовать специального CSS (например, padding-top на теле), чтобы предотвратить перекрытие с другими элементами. Также обратите внимание, что .sticky-top использует position:sticky, что поддерживается не всеми браузерами.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">默认</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定到顶部</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定到底部</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">粘贴到顶部</a>
</div>
</nav>
<div style="height: 600px;"></div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Изменить после прокрутки вниз
Из приведенного выше примера мы можем видеть, что
- Закрепленные сверху и снизу находятся внутри контейнера, но это не повлияет на эффект, а его ширина превышает ограничение контейнера.
- При использовании Pin to Top панель навигации по умолчанию будет автоматически следовать за ней.
- «Вставить вверх» будет автоматически следовать существующим визуальным элементам.
- При перетаскивании полосы прокрутки положения кнопок «Закрепить вверху» и «Закрепить внизу» остаются неизменными, но значения по умолчанию и «Вставить вверх» будут перетаскиваться вверх.
13.6 Прокрутка
Добавьте .navbar-nav-scroll в .navbar-nav (или другие подкомпоненты панели навигации), чтобы включить вертикальную прокрутку внутри переключаемого содержимого свернутой панели навигации. По умолчанию прокрутка начинается с 75vh (или 75% высоты области просмотра), но вы можете переопределить это с помощью собственного пользовательского свойства CSS (--bs-navbar-height или пользовательского стиля). В больших видовых экранах, когда панель навигации развернута, содержимое будет отображаться как содержимое панели навигации по умолчанию.
Обратите внимание, что у этого поведения может быть обратная сторона переполнения при установке overflow-y:auto (здесь требуется прокрутка содержимого), overflow-x эквивалентно auto, что обрежет часть горизонтального содержимого.
Выше пояснение содержания руководства.Оно очень многословное.На самом деле очень просто.Достаточно посмотреть на рендеры.Грубо говоря,это заставить полосу прокрутки появиться,щелкнув три раза горизонтальные линии в подвижном состоянии.Я думаю это чисто событийно.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
13.7 Отзывчивое поведение
Панели навигации могут использовать .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl}, чтобы определить, когда их содержимое будет свернуто. В сочетании с другими общими категориями вы можете выбрать, когда показывать или скрывать определенные элементы.
Для панелей навигации, которые не нужно сворачивать, добавьте .navbar-expand в панель навигации. Для панели навигации, которая всегда свернута, не добавляйте класс .navbar-expand.
13.8 Переключение элементов
Элементы переключателя панели навигации по умолчанию выровнены по левому краю, но если они находятся за .navbar-brand на том же уровне, они автоматически будут выровнены по крайнему правому краю. Инвертирование вашего тега поменяет положение элемента переключения. Ниже приведены примеры различных стилей элементов переключения.
13.8.1 Без .navbar-brand на минимальной точке останова:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
13.8.2 Слева от минимальной точки останова находится название бренда, а справа — переключатель:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
13.8.3 Элемент-переключатель слева от минимальной точки останова и название бренда справа
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
13.8.3 Внешний контент
Иногда необходимо использовать подключаемый модуль сворачивания, чтобы активировать содержимое контейнера за пределами .navbar. Поскольку плагин выполняется путем сопоставления id и data-bs-target, это будет легко сделать! Это очень интересно, дайте полный код и попробуйте сами.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div class="container">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Вот и все на сегодняшнем уроке. Пожалуйста, обратите на меня внимание и вовремя изучите использование компонентов скользящей навигации Bootstrap5 в разделе 14 «Bootstrap5 Zero Basic to Mastery», первоначально написанного Лао Лю.
Если эта статья оказалась для вас полезной, не забудьте поставить лайк!