Bootstrap my learning record 3 navigation bar understanding, bootstrap navigation bar
The following theoretical content is copied from the Bootstrap Chinese Network (a good bootstrap learning website)
Navigation bar default style navigation bar
A navigation bar is a basic responsive component that serves as the navigation page header in your application or website. They can be folded (and turned off) on mobile devices and gradually become horizontally expanded when the width of the viewport increases.
The following code and comments are my understanding in the learning process:
(View the necessary. CSS and. js files)
1 <! DOCTYPE html> 2Component Arrangement
Add
.navbar-leftAnd.navbar-rightTool class alignment navigation links, forms, buttons, or text. Both classes use CSS to set floating styles in a specific direction. For example, to align navigation links, place them in a separate tool class<ul>Label.These classes are
Align multiple components to the right.pull-leftAnd.pull-rightBut they are limited to media query, which makes it easier to process the navigation bar components on screens of various sizes.Navigation Bar currently does not support multiple
.navbar-rightClass. In order to make appropriate gaps between the content.navbar-rightThe element uses the negative margin (margin ). If multiple elements use this class, their margins (margin) cannot be displayed as expected.We will review this feature when you rewrite this component in version v4.
Fixed on top
Add
To.navbar-fixed-topClass allows the navigation bar to be fixed on the top and can contain.containerOr.container-fluidContainer to center the navigation bar and add inner padding on both sides ).bodyPadding in element settings)This fixed navigation bar will cover other content on the page, unless you give
<body>The element is set at the bottom.padding. You can use your own values or the code given below. Tip: the default height of the navigation bar is 50px.body { padding-top: 70px; }1 <nav class="navbar navbar-default navbar-fixed-top">2 <div class="container">3 ...4 </div>5 </nav>
Fixed at the bottomAdd
To.navbar-fixed-bottomClass allows the navigation bar to be fixed at the bottom, and can also contain.containerOr.container-fluidContainer to center the navigation bar and add inner padding on both sides ).bodyPadding in element settings)This fixed navigation bar will cover other content on the page, unless you give
<body>The element is set at the bottom.padding. You can use your own values or the code given below. Tip: the default height of the navigation bar is 50px.body { padding-bottom: 70px; }1 <nav class="navbar navbar-default navbar-fixed-bottom">2 <div class="container">3 ...4 </div>5 </nav>
Rest on topAdd
.navbar-static-topClass to create a navigation bar with the width of the page, it will disappear as the page scrolls down. You can also include.containerOr.container-fluidContainer, used to align the navigation bar in the center and add inner padding on both sides ).Add
.navbar-static-topClass to create a navigation bar with the width of the page, it will disappear as the page scrolls down. You can also include.containerOr.container-fluidContainer, used to align the navigation bar in the center and add inner padding on both sides ). To center and pad navbar content.1 <nav class="navbar navbar-default navbar-static-top">2 <div class="container">3 ...4 </div>5 </nav>Reversed navigation bar
Add
.navbar-inverseClass to change the appearance of the navigation bar.1 <nav class="navbar navbar-inverse">2 ...3 </nav>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
