Bootstrap navigation bar
The navigation bar is collapsed in the mobile device view. The navigation bar expands horizontally as the width of the available view increases. At the core of the Bootstrap navigation bar, the navigation bar includes the site name and basic navigation definition styles.
Default navigation bar 1. Label to add class
. Navbar,. navbar-default.
2. Add the above Element
Role = "navigation"To help increase accessibility. 3. Add a title class to the element
. Navbar-headerContains the class
Navbar-brand. This will make the text look larger
No. 1
4. To add a link to the navigation bar, simply add a class
. Nav,. navbar-nav.
Demo
<Script type = "text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap. min. js "> </script>
Hello
- Homepage
- JS Development
- Html
- Jquery
- Frontend Learning
- Html + css Learning
- Javascript Learning
- Jquery Learning
- Bootstrap Learning
- Less/sass Learning
- AngularJS Learning
Responsive navigation bar 1. The content to be folded is included in the class. collapse and. navbar-collspae. 2. The collapsed navigation bar contains buttons with the class. navbar-toggle and data-target attributes. data-toggle is used to tell javascript
What do you need to do with the button? Here is collapse: collapse, data-target is used to indicate which element to fold, here is the navigation menu in 1, and the attribute value of data-target is
The id of the specified element. 3. Create the so-called hamburger button with class. icon-bar in the button (that is, there are several more horizontal lines in the button)
QiehHello
- Homepage
- JS Development
- Html
- Jquery
- Frontend Learning
- Html + css Learning
- Javascript Learning
- Jquery Learning
- Bootstrap Learning
- Less/sass Learning
- AngularJS Learning
When the screen width is greater than or equal to 768px, the display is the same as the default navigation bar, and the screen width is less than 768px, the display effect is as follows:
Note: The data-target attribute value is actually: # + id. If you write only the id, clicking the collapse button does not respond. In addition, you need to introduce the collapse plug-in, or because
Bootstrap. min. js and jquery. js
In the form in the form navigation bar, class navbar-form is required, which ensures the vertical alignment of the form and folding of the form in a narrow view. Select alignment Mode
Where is the content in the navigation bar? navbar-right is used here, and it is placed on the right (if navbar-left is used, it is left by default ).
Hello
- Homepage
- JS Development
- Html
- Jquery
The buttons in the navigation bar are notButtonLink button
The text in the navigation bar uses class
. Navbar-text,Ensure proper leading and color.
Hello
- Homepage
- JS Development
- Html
- Jquery
Text links in the navigation bar
Use class for non-navigation links
Navbar-linkAdd the appropriate color for the default and inverted navigation bar options, because the style of the default a label may be inconsistent with the style of the navigation bar
Hello
- Homepage
- JS Development
- Html
- Jquery
Text links in the navigation bar
To pin the navigation bar to the top of the page
. Navbar classAdd class
. Navbar-fixed-top.To prevent other content in the navigation bar and the page body
The top ofLabel to add the padding. the padding value must be at least the height of the navigation bar.
Hello
- Homepage
- JS Development
- Html
- Jquery
Text links in the navigation bar
To see the effect, two divs with background colors are added here.
Fixed to the bottom, you only need to replace class. navbar-fixed-top with. navbar-fixed-bottom, and do not need to add the padding to the body. For adding
. Navbar-static-topClass, I really didn't see what the role was. I thought it was possible to create a floating navigation bar. Reversed navigation bar direction
. NavbarAdd class
. Navbar-inverseClass to create a navigation bar with a black background and white text
Hello
- Homepage
- JS Development
- Html
- Jquery
Text links in the navigation bar
