Objective:
Implementation of a responsive navigation with bootstrap Navbar component
Understand how bootstrap Navbar component works (excluding collepse.js)
Know what to do when you add a defined class name
Refit according to one's own needs
Compare your own implementation to find the difference.
1. Implementatio
Navbar source code analysis in the Bootstrap navigation bar,
1. This document analyzes the bootstrap navigation bar and Its responsive implementation methods to improve its css level.
First, paste a bootstrap navigation bar template.
Http://v3.bootcss.com/examples/navbar-fix
Bootstrap source code analysis: foRm, navbar 1, Form (foRm)
Source code file:_ Form. scssMixins/_ form. scss
1. hierarchical classification: form-group-> form-control/input-group/form-static-control-> tags2. Form-group/form-control/input-group/form-static-control containers can be displayed in two ways: block and inline-block. Table-cell is used to implement the input-group level.
.input-group {
, mainly carried out within the Division of the region, such as: Head, other areas, as well as the positioning of the navigation bar position2, the implementation of the folding (in 4.0 has been removed), that is, the Navbar-collapse class, instead of the collapse, pop-up hidden layer on the button above2.1, Navbar-collapse: When greater than breakpoint, will be forced to display (because collapse default i
:_navbar.scss
1, the main internal area of the division, such as: Head, other areas, and the positioning of the navigation bar position
2, the implementation of the folding (in 4.0 has been removed), that is, the Navbar-collapse class, instead of the collapse, the button above the hidden layer popup
2.1, Navbar-collapse: When greater than breakpoint, will be forced to display (because collapse
the bootstrap elements have two, different styles, one is the label page, the other is a button group, so-called breadcrumb navigation bar is not a good solution, Because the drop-down menu in the bootstrap must be presented in the form of buttons, written text, in the IE8 is also thankless, of course, you can choose to throw away bootstrap, the great god of CSS
understanding is not thorough.A full Page selection button group basic style is as follows,
Will change as the size of the browser changes, of course, when compressed to the extreme, will not be like bootstrap with the navigation bar navbar like that, quietly lying in a button,
This group of selection buttons can be no doubt compatible with IE8, except that the button group without the Pull-down menu
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.