Step 1: first create a navigation list (
) And add the class name "navbar-nav"
- Step 2: Add a container (p) outside the list and use the class name "navbar" and "navbar-default"
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
The main function of the ". navbar" style is to set the effect of the left and right padding and the rounded corner, but the style related to the color is not set. The main source code is as follows:
/Source Code bootstrap.css file 3,642nd lines ~ 3,647th rows/
.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent;}
2) Principle Analysis:
The color of the navigation bar is controlled by ". navbar-default:
/Source Code bootstrap.css file 3,940th lines ~ 3,943rd rows/
.navbar-default { background-color: #f8f8f8; border-color: #e7e7e7;}
The navbar-nav style is based on navigation. nav, and the floating and inner margins of menu items are adjusted. At the same time, do not set the same color. For the source code, refer to the 3,785th lines of the bootstrap.css file ~ In the 3830th row, we select the code section and place it in the bootstrap.css on the right side.
The color and other styles are implemented together with the parent container "navbar-default:
/For the source code, refer to the 3,955th lines of the bootstrap.css file ~ 3,974th rows/
.navbar-default .navbar-nav> li > a { color: #777;}.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus { color: #333; background-color: transparent;}.navbar-default .navbar-nav> .active > a,.navbar-default .navbar-nav> .active >a:hover,.navbar-default .navbar-nav> .active >a:focus { color: #555; background-color: #e7e7e7;}.navbar-default .navbar-nav> .disabled > a,.navbar-default .navbar-nav> .disabled >a:hover,.navbar-default .navbar-nav> .disabled >a:focus { color: #ccc; background-color: transparent;}
3. Add title, level-2 menu, and status for the navigation bar
1) Add the navigation bar title
In Web page creation, there is often a title in front of the menu (the text font size is slightly larger than other texts). In fact, the Bootstrap framework also makes this consideration for everyone, it is implemented through "navbar-header" and "navbar-brand.
MOOC
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
2) Principle Analysis:
This function mainly provides a reminder function. Of course, the improvement can be regarded as a logo (not described too much here ). The style mainly increases the font setting and sets the maximum width:
/Source Code bootstrap.css file 3,739th lines ~ 3,755th rows/
.navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px;}.navbar-brand:hover,.navbar-brand:focus { text-decoration: none;}@media (min-width: 768px) { .navbar> .container .navbar-brand, .navbar> .container-fluid .navbar-brand { margin-left: -15px; }}
Similarly, under the default navigation bar (navbar-default), navbar-brand is also colored:
/For the source code, refer to the 3,947th lines of the bootstrap.css file ~ 3951 rows/
.navbar-default .navbar-brand {color: #777;}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus {color: #5e5e5e;background-color: transparent;}
3) navigation bar status, level-2 menu
Similarly, the basic navigation bar provides the current status, disabled status, floating status, and other effects for the menu, and can also have a navigation bar with a level-2 menu.
MOOC
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
As follows:
4. navigation bar with Form
Some navigation bars contain search forms, such as Sina Weibo navigation Bars:
The Bootstrap framework provides a "navbar-form", which is easy to use. Place a form with the navbar-form class name in the navbar container.
MOOC
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
To view the sample code source code of a table in a real-time navigation bar, please refer to the bootstrap.css file for 3,839th lines ~ 3,904th rows.
In the above example, we can see that "navbar-left" allows the form to float left to achieve better alignment. In the Bootstrap framework, the "navbar-right" style is also provided to align elements on the right of the navigation bar.
/For the source code, refer to the 3,831st lines of the bootstrap.css file ~ 3,838th rows/
@media (min-width: 768px) { .navbar-left { float: left !important;}.navbar-right { float: right !important; }}
Note: There is a condition that only when the browser window width is greater than 768px.
5. Buttons, text, and links in the navigation bar
In addition to using the element in navbar-brand and the ul and navbar-form of navbar-nav, the navigation bar of the Bootstrap framework can also use other elements. The Framework provides three other styles:
- 1. Click navbar-btn in the navigation bar.
- 2. navbar-text in the navigation bar
- 3. General link navbar-link in the navigation bar
However, these three styles are limited in use in the framework and need to be used in combination with navbar-brand and navbar-nav. There are also limits on the quantity. Generally, one or two of them will not be a problem, and more than two will be a problem.
Let's take a look at the source code corresponding to these three styles:
/For the source code, refer to the 3,914th lines of the bootstrap.css file ~ 3,939th rows/
. Navbar-btn {margin-top: 8px; margin-bottom: 8px ;}. navbar-btn.btn-sm {margin-top: 10px; margin-bottom: 10px ;}. navbar-btn.btn-xs {margin-top: 14px; margin-bottom: 14px ;}. navbar-text {margin-top: 15px; margin-bottom: 15px;} @ media (min-width: 768px ){. navbar-text {float: left; margin-right: 15px; margin-left: 15px ;}. navbar-text.navbar-right: last-child {margin-right: 0;}/bootstrap.css file 3,952nd ~ Row 3,954th/. navbar-default. navbar-text {color: #777;}/bootstrap.css file row 4,035th ~ Row 4,037th/. navbar-inverse. navbar-text {color: #999;}/boostrap.css file row 4,017th ~ 4,022nd rows /. navbar-default. navbar-link {color: #777 ;}. navbar-default. navbar-link: hover {color: #333;}/bootstrap.css file 4,106th ~ Row 3/. navbar-inverse. navbar-link {color: # 4,111st;}. navbar-inverse. navbar-link: hover {color: # fff ;}
Navbar-btn and navbar-link have been mentioned in the previous section. Now let's take a look at a simple application of navbar-text.
MOOC
- Navbar Text
- Navbar Text
- Navbar Text
Check the results in the results window to see the obvious problems.
Through the browser debugging tool, we can see that the value of the tag includes margin-top and margin-bottom is 15px. to align it, we will make some adjustments to the above structure.
Replace tags
OK.
6. Fixed navigation bar
In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser, which is more common in mobile development. The Bootstrap framework provides two fixed navigation bar methods:
☑. Navbar-fixed-top:The navigation bar is fixed at the top of the browser window.
☑. Navbar-fixed-bottom:The navigation bar is fixed at the bottom of the browser window.
The method is simple. You only need to append the corresponding class name to navbar, the most external container of the navigation bar:
...
I am content
...
1) implementation principle:
The implementation principle is very simple. In navbar-fixed-top and navbar-fixed-bottom, the position: fixed attribute is used, and the top value of navbar-fixed-top is set to 0, the bottom value of navbar-fixed-bottom is 0. The specific source code is as follows:
/For the source code, refer to the 3,717th lines of the bootstrap.css file ~ 3,738th rows/
.navbar-fixed-top,.navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030;}@media (min-width: 768px) {.navbar-fixed-top,.navbar-fixed-bottom { border-radius: 0; }}.navbar-fixed-top { top: 0; border-width: 0 0 1px;}.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0;}
2) bugs and solutions:
From the running effect, it is not difficult to find that the top and bottom of the page's main content are covered by a fixed navigation bar. To avoid covering the content with a fixed navigation bar, we need to do some processing on the body:
Body {padding-top: 70px;/* set when there is a fixed navigation bar at the top */padding-bottom: 70px;/* set when there is a fixed navigation bar at the bottom */}
Because the default height of a fixed navigation bar is 50px, we usually set the values of padding-top and padding-bottom to 70px. Of course, you still need to analyze the actual situation.
3). solution 2:
In fact, in addition to this solution, we also have other solutions to put the fixed navigation bar in front of the page content:
...
...
I am content
Add the following style code to the file:
.navbar-fixed-top ~ .content { padding-top: 70px;}.navbar-fixed-bottom ~ .content { padding-bottom: 70px;}
Of course, this method sometimes requires specific analysis.
7. Responsive navigation bar
Today, the terminals that browse Web pages are not the same. The navigation bar implemented in the previous example can only be adapted to a large-screen browser, but it is not suitable when the browser screen is smaller. Therefore, responsive design comes along. Therefore, in a responsive Web page, the responsive navigation bar is very important. For example, the navigation bar of the official Bootstrap framework Website:
(Effects of wide screen timeliness)
(Timeliness of the screen)
(Narrow screen timeliness results)
In this section, we will discuss how to use the Bootstrap framework to implement responsive navigation bar effects.
First run the Code:
Toggle Navigation
MOOC
- Homepage
- Series tutorials
- Instructor Introduction
- Success stories
- About us
1 ),
Usage:
- Make sure that the content to be folded in the narrow screen must be wrapped in a p with two class names: collapse and navbar-collapse. Finally, add a class name or id name for this p.
- The icon style to be displayed when the screen is narrow (fixed ):
Toggle Navigation
- 3. Add data-target = ". Class Name/# id name" to the button. Is the competition a class name or an id name? It is determined by the p to be folded. For example:
(1) The p code segment to be folded (represented by id ):
The code snippet of the icon displayed when the screen is narrow:
...
(2) You can also write the p code segment to be folded (represented by class ):
The icon to be displayed when the screen is narrow:
...
8. Reversed navigation bar
The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework. Compared with the default navigation bar, there is no difference in usage, except that the navbar-deafult class name is changed to navbar-inverse. Only the background color and text of the navigation bar are modified. As follows:
MOOC
- Homepage
- Tutorial
- About us
The running effect is as follows:
For the source code, please refer to the 4,023rd line of the bootstrap.css file ~ 4,111st rows
9. Paging navigation (paging navigation with page numbers)
Paging navigation is visible to almost any website. Good paging navigation can provide users with a better user experience. The Bootstrap framework provides two types of paging Navigation:
☑Page navigation
☑Page navigation
1) page navigation
Page navigation with page numbers may be the most common paging navigation, especially when there are too many page content in the list, you will be given a paging navigation method. The Bootstrap framework provides developers with different versions:
☑LESS version: The corresponding source file pagination. less
☑Sass version: corresponding source file _ pagination. scss
☑Compiled version: 4,130th lines to the bootstrap.css File ~ 4,222nd rows
Usage:
Most people usually like to use the p> a and p> span structures to create paging navigation with page numbers. However, the structure ul> li> a is used in the Bootstrap framework, and the pagination method is added to the ul Tag:
Running effect:
2) implementation principle:
It can be seen from the effect that the current status page is highlighted and cannot be clicked. The last page is disabled and cannot be clicked. Implementation style:
/Bootstrap.css file 4,170th lines ~ 4,192nd rows/
.pagination> .active > a,.pagination> .active > span,.pagination> .active >a:hover,.pagination> .active >span:hover,.pagination> .active >a:focus,.pagination> .active >span:focus {z-index: 2;color: #fff;cursor: default;background-color: #428bca;border-color: #428bca;}.pagination> .disabled > span,.pagination> .disabled >span:hover,.pagination> .disabled >span:focus,.pagination> .disabled > a,.pagination> .disabled >a:hover,.pagination> .disabled >a:focus {color: #999;cursor: not-allowed;background-color: #fff;border-color: #ddd;}
Note: To disable the current status and the disabled status, you cannot click it. We also need to rely on js to implement it, or change the label in the two statuses to the span label.
3) set the size:
In the Bootstrap framework, you can also set the size in several different cases. Similar to buttons:
- "Pagination-lg" is used to increase paging navigation;
- Use pagination-sm to reduce the paging Navigation:
4) implementation principle of size setting:
In practice, the corresponding padding font-size and angular sizes are added. The source code is 4,193rd rows for the bootstrap.css file ~ 4,222nd rows.
10. Paging navigation (paging navigation)
In addition to paging navigation with page numbers, the Bootstrap framework also provides paging navigation. This type of paging navigation is often seen on some simple websites, such as personal blogs and magazine websites. In this paging navigation mode, no specific page number is displayed. Only the buttons for "Previous Page" and "next page" are provided.
The Bootstrap framework makes it a separate part:
☑LESS version:The corresponding source file is pager. less.
☑Sass version:The corresponding source file is _ pager. scss.
☑Compiled version:Line 3 of the bootstrap.css File ~ 4,260th rows
Usage:
In actual use, paging navigation is similar to paging navigation with page numbers. Add pager class to ul labels:
- «Previous Page
- Next page»
Running effect:
«Previous Page
Next page»
1) implementation principle:
Corresponding style code:
/Bootstrap.css file 4,223rd lines ~ 4,244th rows/
.pager {padding-left: 0;margin: 20px 0;text-align: center;list-style: none;}.pager li {display: inline;}.pager li > a,.pager li > span {display: inline-block;padding: 5px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 15px;}.pager li >a:hover,.pager li >a:focus {text-decoration: none;background-color: #eee;}
2) Align style settings:
By default, the paging navigation is centered, but sometimes we need a left-to-right navigation. The Bootstrap framework provides two styles:
☑Previous:Place the previous button to the left
☑Next:Set the "Next" button to the right
To use this function, you only need to add the corresponding class name on the li Tag:
- «Previous Page
- Next page»
Running effect:
«Previous Page
Next page»
3) implementation principle:
The implementation principle is very simple, that is, a float on the left and a floating on the right:
/Bootstrap.css file 4,245th lines ~ 4,252nd rows/
.pager .next > a,.pager .next > span {float: right;}.pager .previous > a,.pager .previous > span {float: left;}
4) status style settings:
Like paging navigation with page numbers, if the disabled class name is added to the li label, the paging button is disabled, but cannot be clicked. You can use js for processing, or change the tag to the span tag.
- «Previous Page
- Next page»
Running effect:
«Previous Page
Next page»
5) implementation principle of the state style:
/Bootstrap.css file 4,253rd lines ~ 4,260th rows/
.pager .disabled > a,.pager .disabled >a:hover,.pager .disabled >a:focus,.pager .disabled > span { color: #999; cursor: not-allowed; background-color: #fff;}
The above is all the content of this article, hoping to help you learn.