In the bootstrap framework, navigation is independent as a navigation component. According to different versions, the corresponding source code can be found:
LESS: navs.less
SASS: _navs.scss
Tag-shaped navigation, also known as tab navigation
Tag-shaped navigation is implemented through the .nav-tabs style. When making tag-shaped navigation, you need to append the class name .nav-tabs to the container with the original navigation class name .nav
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Title 5</a></li> </ul>
principle:
Display menu items li in blocks and arrange them on the same level, then define the style and mouse suspension effect of non-highlight menus
.nav-tabs {border-bottom: 1px solid #ddd;}.nav-tabs > li {float: left;margin-bottom: -1px;}.nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;}.nav-tabs > li >a:hover {border-color: #eee #eee #ddd;}Generally, the tab will have a currently selected item, you only need to add the class name.active to its (li) tag.
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Title 5</a></li></ul>
.nav-tabs >li.active> a,.nav-tabs >li.active>a:hover,.nav-tabs >li.active>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent;}In addition to the current options, some tabs also have a disabled state. To achieve this effect, just add the class name disabled on the tag item.
.nav>li.disabled> a { color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;}If you want to achieve the effect of clicking on the menu item to switch content, you need to cooperate with the js plug-in
Capsule (pills) navigation
Currently highlighted with rounded corner effect, its implementation method is similar to tab navigation, and with the same structure, you just need to replace the class name .nav-tabs with the class name .nav-pills
.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:focus {color: #fff; background-color: #428bca;}Vertical stacked navigation
In addition to horizontal navigation, there is also vertical navigation. To create vertical stacked navigation, you only need to add the class name .nav-stacked on the basis of .nav-pills.
Compared with capsule navigation, the main thing is to keep the navigation items from floating, to arrange them vertically, and then leave a certain spacing for adjacent navigation items.
.nav-stacked > li { float: none;}.nav-stacked > li + li { margin-top: 2px; margin-left: 0;}<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><a href="#">Navigation title 3</a></li> <li><a href="#">Navigation title 4</a></li> <li><a href="#">Navigation title 5</a></li></ul>Vertical stacking navigation is like a split line between the drop-down menu group and the group, and there is also a split line between the navigation items. Just add <li class="divider"></li> between the navigation items.
<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="#">Navigation Title 4</a></li> <li><a href="#">Navigation Title 5</a></li> </ul>
.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}Adaptive navigation
Adaptive navigation refers to the navigation occupying the entire width of the container, and the menu items can adapt to the width of the table cells. Adaptive navigation is the same as the adaptive button component made by .btn-group-justified mentioned earlier, but when making adaptive navigation, the class name .nav-justified must be used with .nav-tabs or .nav-pills.
principle:
Set the width to 100% on the list ul, and then set display: table-cell for each menu item li, so that the list simulates the form of a table cell;
.nav-justified { width: 100%;}.nav-justified > li { float: none;}.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; }}There is a media query condition above: @media(min-width:768px){...} means that adaptive navigation can only be displayed in the style above if the browser window width is greater than 768px, but when the browser window width is less than 768px, it will be displayed in the style below.
.nav-tabs and .nav-justified are used together, which means adaptive tab navigation. When the browser window width is less than 768px, additional processing is done in the style.
.nav-tabs.nav-justified { width: 100%; border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: .active > a:hover,.nav-tabs.nav-justified > .active > a:hover,.nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active > a:hover,.nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; }}Navigation plus pull-down menu (secondary navigation)
To create secondary navigation, you only need to use li as the parent container, use the class name.dropdown, and nest another ul list in li
<ul> <li><a href="#">Navigation Menu1</a></li> <li><a href="#">Navigation Menu2</a></li> <li><a href="#">Navigation Menu3</a></li> <li><a href="#">Navigation Menu4</a></li> <li><a href="#">Navigation Menu4</a></li> <li> <adata-toggle="dropdown">Navigation Menu5 <span></span> </a> <ul> <li><a href="#">Drop down Menu1</a></li> <li><a href="#">Drop down Menu2</a></li> <li><a href="#">Drop down Menu3</a></li> <li><a href="#">Drop down Menu4</a></li> </li> </li> <li><a href="#">Navigation Menu 6</a></li> </ul>
Breadcrumb navigation
Breadcrumbs are generally used for navigation, and their main function is to tell the user the current location of the page. Breadcrumbs are also an independent module component in the bootstrap framework.
LESS: breadcrumbs.less
SASS:_breadcrumbs.scss
<ol> <li><a href="#">Home</a></li> <li><a href="#">My Book</a></li> <li>Illustrated css</li> </ol>
.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}.breadcrumb> li + li:before {padding: 0 5px;color: #ccc;content: "//00a0";}.breadcrumb> .active {color: #999;}The above uses li+li: before implementing the separator between li and li. This solution is not supported in the lower version of IE.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.