Как создать навигацию в Bootstrap 5?
Компонент nav в Bootstrap используется для создания списка ссылок с разными стилями. В основном ссылки списка используются как навигационное меню. В этом руководстве мы рассмотрим различные стили ссылок, которые можно создать с помощью компонента навигации Bootstrap 5.
Учебное пособие по Bootstrap 5 Navs
- Создание основных навигационных ссылок
- Вертикальная навигация
- Вкладки с навигацией
- Добавление таблеток в навигатор
- Навигация с таблетками и выравнивание по ширине
- Отзывчивая навигация
- Навигация с раскрывающимся меню
- Навигатор с вертикальной вкладкой и таблеткой
1. Основные навигационные ссылки
Стандартная и базовая навигация будут выглядеть следующим образом:
Код для базовой навигации приведен ниже:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>Ниже приведены классы, используемые при создании компонента навигации по умолчанию:
- Вся навигация представляет собой неупорядоченный список с использованием класса «.nav».
- Каждый тег
- представляет элемент навигации с использованием класса «.nav-item».
- Внутри тега
- тег привязки используется для создания ссылки на фактический текст с использованием класса «.nav-link».
Содержимое навигационной панели можно выровнять по центру и вправо, используя дополнительные классы в теге
- , как показано ниже:
- — для выравнивания по центру.
- — для выравнивания по краю или по правому краю.
- — заполнить всю ширину по горизонтали.
- — заполнить всю горизонтальную ширину, чтобы каждая навигационная ссылка имела одинаковую ширину.
2. Вертикальная навигация
Вы можете использовать класс «flex-column», чтобы выровнять весь контент навигации по вертикальным ссылкам, а не по горизонтали, как показано ниже:
А код для создания компонента вертикальной навигации приведен ниже:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>3. Создание вкладок с помощью Nav
Вы также можете легко создавать содержимое с вкладками, используя класс «.nav-tabs» внутри тега
- , как показано ниже:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>Класс «.nav-tabs» преобразует навигацию по умолчанию в вкладку, как показано ниже:
4. Добавление таблеток в Nav
Вы можете добавить к ссылкам таблетки, коробку с основным цветом фона, используя класс «.nav-pills».
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>Результат в браузере будет выглядеть следующим образом:
5. Навигатор с таблетками и обоснованным выравниванием
Если вы хотите, чтобы элементы навигации были выровнены по ширине, добавьте класс «.nav-fill», как показано ниже:
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>Это даст следующий результат:
6. Адаптивный компонент навигации
На данный момент созданные компоненты навигации не реагируют, и вам следует добавить дополнительные служебные классы flexbox, чтобы сделать его отзывчивым. Например, мы можем сделать его гибким для устройств среднего размера, используя класс «.flex-md-row», как показано ниже:
<ul class="nav nav-pills flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
</li>
</ul>7. Добавление раскрывающегося меню в Nav
Используйте класс «.dropdown», чтобы вставить раскрывающийся список, а затем элементы меню, используя классы «.dropdown-menu» и «.dropdown-item».
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="https://www.webnots.com/bootstrap-nav-tutorial/#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 2</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 3</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 5</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.webnots.com/bootstrap-nav-tutorial/#">Link 6</a>
</li>
</ul>Выпадающий компонент навигации с таблетками будет выглядеть следующим образом:
8. Навигация с вертикальными вкладками и таблетками.
Вы также можете использовать макет сетки и создавать контент с вертикальными вкладками, используя компонент навигации с таблетками.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="https://www.webnots.com/bootstrap-nav-tutorial/#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a>
<a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a>
<a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a>
<a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div>
<div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div>
<div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div>
<div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div>
</div>
</div>
</div>Это приведет к следующему результату в браузере:
Ознакомьтесь с руководством по компоненту панели навигации Bootstrap, чтобы узнать больше о панели навигации.
Изучите Bootstrap 5 (Индекс)
