В рамках начальной загрузки навигация независима в качестве навигационного компонента. Согласно различным версиям, соответствующий исходный код можно найти:
Меньше: Navs.less
Sass: _navs.scss
Навигация в форме тегов, также известная как навигация вкладок
Навигация в форме тегов реализуется через стиль .nav-tabs. При создании навигации в форме тегов вам необходимо добавить имя класса.
<ul> <li> <a href = "#"> Навигационное название 1 </a> </li> <li> <a href = "#"> Навигационное название 2 </a> </li> <li> <a href = "#"> Навигационное название 3 </a> </li> <li> <a href = "#"> Навигация 4 </a> <li> <a href = "#"> Navigation Teal 4 </a> Название 5 </a> </li> </ul>
принцип:
Показать пункты меню LI в блоках и расположить их на том же уровне, затем определите стиль и эффект подвески мыши в невыгодных меню
.nav-tabs {border-bottom: 1px solid #ddd;}. Nav-tabs> li {float: слева; Маржин-дно: -1px;}. Nav-tabs> li> a {hargin-right: 2px; line-hight: 1,42857143; граница: 1px Solid Pronersparent; Border-radius: 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px. > A: Hover {Border-Color: #EEE #EEE #DDD;}Как правило, вкладка будет иметь в настоящее время выбранный элемент, вам нужно только добавить имя класса.
<ul> <li> <a href = "#"> Навигационное название 1 </a> </li> <li> <a href = "#"> Навигационное название 2 </a> </li> <li> <a href = "#"> Навигационное название 3 </a> </li> <li> <a href = "#"> Навигация 4 </a> <li> <a href = "#"> Navigation Teal 4 </a> Название 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: Focus {color: #555; Курсор: по умолчанию; фоновый цвет: #fff; Граница: 1PX SOLID #DDD; пограничный цвет цвета: прозрачный;}В дополнение к текущим параметрам, некоторые вкладки также имеют отключенное состояние. Чтобы достичь этого эффекта, просто добавьте имя класса отключено в элемент тега.
.nav> li.disabled> a {color: #999;}. Nav> li.disabled> a: hover, .nav> li.disabled> a: Focus {color: #999; Текстовое декорация: нет; Курсор: не прозвенный; фоновый цвет: прозрачный;}Если вы хотите достичь эффекта, нажав на элемент меню для переключения контента, вам необходимо сотрудничать с подключателем JS
Капсула (таблетки) навигация
В настоящее время выделено с округлым угловым эффектом, его метод реализации аналогичен навигации вкладок, и с той же структурой вам просто нужно заменить имя класса.
.nav-pills> li {float: left;}. Nav-pills> li> a {border-radius: 4px;}. Nav-pills> li + li {margin-left: 2px;}. Nav-pills> li.active> a: Hover, .nav-pills> li.active> a: фокус {color: #fff; фоновый цвет: #428bca;}Вертикальная навигация
В дополнение к горизонтальной навигации, существует также вертикальная навигация. Чтобы создать вертикальную навигацию, вам нужно только добавить имя класса.
По сравнению с капсульной навигацией, главное, чтобы не допустить плавания навигационных элементов, расположить их вертикально, а затем оставлять определенное расстояние для смежных элементов навигации.
.nav-stack> li {float: none;}. Nav-Stacked> li + li {margin-top: 2px; Margin-Lefft: 0;} <ul> <li> <a href = "#"> Навигационное название 0 </a> </li> <li> <a href = "#"> Навигационное название 1 </a> </li> <li> <a href = "#"> Название навигации 2 </a> </li> <li> <a href = "#"> navigation 3 </a> </li> <li> <a href = "# href = "#"> Навигационное название 4 </a> </li> <li> <a href = "#"> Навигационное название 5 </a> </li> </ul>Вертикальная навигация по укладкам похожа на разделительную линию между раскрывающейся группой меню и группой, а также существует раздельная линия между элементами навигации. Просто добавьте <li class = "divider"> </li> между элементами навигации.
<ul> <li ><a href="#">Navigation Title 0</a></li> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li></li> <li><a href="#">Navigation Title 3</a></li> <li><a href = "#"> Навигационное название 4 </a> </li> <li> <a href = "#"> Навигационное название 5 </a> </li> </ul>
.nav .nav-divider {height: 1px; маржа: 9px 0; переполнение: скрыто; фоновый цвет: #e5e5e5;}Адаптивная навигация
Адаптивная навигация относится к навигации, занимающей всю ширину контейнера, а элементы меню могут адаптироваться к ширине ячеек таблицы. Адаптивная навигация такая же, как и компонент адаптивной кнопки, сделанный .btn-Group-Justified, упомянутый ранее, но при создании адаптивной навигации имя класса.
принцип:
Установите ширину на 100% в списке UL, а затем установите отображение: таблица для каждого элемента меню LI, чтобы список моделировал форму табличной ячейки;
.NAV-JUSTIFIFIT {ширина: 100%;}. NAV-JUSTIFIFIT> LI {Float: None;}. NAV-JUSTIFIFIT> LI> A {MARGIN-BOTTOM: 5PX; Text-Align: Center;}. Nav-Justified> .DropDown .DropDown-Menu {top: Auto; Слева: auto;}@media (min-width: 768px) {.nav-justififie> li {display: табличная клетка; Ширина: 1%; } .nav-unifififie> li> a {margin-bothom: 0; }}Выше существует условие для медиа-запроса: @Media (min-width: 768px) {...} означает, что адаптивная навигация может отображаться только в стиле выше, если ширина окна браузера превышает 768px, но когда ширина окна браузера меньше 768px, она будет отображаться в стиле ниже.
.NAV-TABS и .NAV-JUSTIFIFIED используются вместе, что означает адаптивную навигацию вкладок. Когда ширина окна браузера меньше 768px, в стиле выполняется дополнительная обработка.
.NAV-TABS.NAV-JUSTIFIFIFIFIFIFIFIFIFIFIED {ширина: 100%; Border-Bottom: 0;}. NAV-TABS.NAV-JUSTIFIFIT> li {float: none;}. Nav-tabs.nav-justifified> li> a {margin-bottom: 5px; Text-align: center;}. Nav-tabs.nav-justifified> .dropdown .dropdown-menu {top: auto; Слева: Auto;}@Media (min-width: 768px) {.nav-tabs.nav-justififie> li {display: table-cell; Ширина: .Active> a: Hover, .nav-tabs.nav-justifififififififififififififififififififififififififififififififififififififififififififive> .active> a: Hover, .nav-tabs.nav-justifified> .active> a: Focus {Border: 1px Solid #ddd;}@Media (min-width: 768px) {.nav-tabs.nav-justified> li> a {border-bottom: 1px № 1PX; граница-радий: 4px 4px 0 0; } .nav-tabs.nav-justifified> .active> a, .nav-tabs.nav-justifified> .active> a: Hover, .nav-tabs.nav-justififified> .active> a: Focus {border-bottom-color: #fff; }}Навигация плюс меню «Снижение» (Вторичная навигация)
Чтобы создать вторичную навигацию, вам нужно только использовать LI в качестве родительского контейнера, использовать имя класса.
<ul> <li> <a href = "#"> menu1 </a> </li> <li> <a href = "#"> Menu2 </a> </li> <li> <a href = "#"> Menu3 </a> </li> <li> <a href = "#"> Navigation Menu4 </a> </li> <li> <ali> <a li> <li> <li> <li> <li> <li> <a li> <li> <ali> <a href = "#" href = "#"> menu4 </a> </li> <li> <Adata-toggle = "Выпадающий"> навигационное меню 5 <pran> </span> </a> <ul> <li> <a href = "#"> Упадение меню1 </a> </li> <li> <a href = "#"> раскрывающееся меню. href = "#"> выпадение меню3 </a> </li> <li> <a href = "#"> раскрывающееся меню4 </a> </li> </li> </li> <li> <a href = "#"> Навигационное меню 6 </a> </li> </ul>
Навигация по хлебной крошке
Сухарики обычно используются для навигации, и их основная функция - сообщить пользователю текущее местоположение страницы. Сухания также являются независимым модульным компонентом в каркасе начальной загрузки.
Меньше: хлебные крошки
Sass: _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> моя книга </a> </li> <li> Иллюстрированный css </li> </ol>
.breadcrumb {Padding: 8px 15px; Margin-Bottom: 20px; Список-стиль: нет; фоновый цвет: #f5f5f5; border-radius: 4px;}. Hreadcrumb> li {Display: inline block;}. Хлебная крошка> li + li: перед {padding: 0 5px; color: #cc "// 00a0";}. Breadcrumb> .active {color: #999;}Выше используется li+li: перед реализацией сепаратора между Ли и Ли. Это решение не поддерживается в нижней версии IE.
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.