“This is the 28th day of my participation in the August Gwen Challenge.

Written in the preface

In this section, we will continue to learn Bootstrap styles with our friends. The main content is the navigation bar. If you are interested, you can also view the Bootstrap styles from the previous article (mainly lists and buttons) through the portal.

The navigation bar

Navigation bars are basic responsive components that serve as navigation headers in your application or website. They can be folded (and turned on and off) on mobile devices, and gradually expand horizontally as the viewport width increases.

Let’s take a look at the default navigation bar

In general, we only need to make a few simple changes to use them, so let’s examine them one by one.

Copy the code

The form

Placing the form inside.navbar-form gives good vertical alignment and collapses in a narrow viewport. Use the alignment option to specify where it appears on the navigation bar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Copy the code

button

For 

<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Copy the code

The text

When wrapping text around.navbar-text, it is common to use

tags for proper line spacing and color.

<p class="navbar-text">Copy the code

Non-navigational links

If you want to add standard links in addition to standard navigation components, use the.navbar-link class to make links have the correct default and invert color Settings.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Copy the code

Components are arranged

Align navigation links, forms, buttons, or text by adding.navbar-left and.navbar-right utility classes. Both classes use CSS to set floating styles in a specific direction. For example, to align navigation links, place them in separate

    tags with utility classes applied.

These classes are mixin versions of.pull-left and.pull-right, but they are limited to media Queries to make it easier to handle navigation bar components on screens of all sizes.

Align multiple components to the right

The navigation bar does not currently support multiple. Navbar-right classes. To allow proper space between the contents, we use a negative margin for the last.navbar-right element. If more than one element uses this class, their margins will not behave as you would expect.

We’ll revisit this functionality when we rewrite this component in version V4.

Fixed to the top

Add the. Navbar-fixed-top class to keep the navigation bar fixed at the top, and you can also include a. Container or. Container-fluid container to center the navigation bar and add padding on the sides.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>
Copy the code

Need tobodyElement padding

This fixed navigation bar will obscure the rest of the page unless you put padding at the bottom of the element. Use your own values, or use the code shown below. Tip: The default height of the navigation bar is 50px.

body { padding-top: 70px; }
Copy the code

Fixed to the bottom

Adding the. Navbar-fixed-bottom class keeps the navigation bar fixed at the bottom, and can also contain a. Container or. Container-fluid container to center the navigation bar and add padding on the sides.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>
Copy the code

Need tobodyElement padding

This fixed navigation bar will obscure the rest of the page unless you put padding at the bottom of the element. Use your own values, or use the code shown below. Tip: The default height of the navigation bar is 50px.

body { padding-bottom: 70px; }
Copy the code

Rest at the top

You can create a navigation bar the width of the page by adding the.navbar-static-top class, which will disappear as the page scrolls down. You can also include a.container or.container-fluid container to center the navigation bar and add padding on both sides.

Unlike the. Navbar-fixed -* class, you don’t need to add any padding to the body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>
Copy the code

Reverse color navigation bar

You can change the appearance of the navigation bar by adding the.Navbar-Inverse class.

<nav class="navbar navbar-inverse">
  ...
</nav>
Copy the code

Write in the last

This is the Bootstrap navigation bar. If you feel it’s helpful, please leave a comment.

If the above content is not correct, welcome to dig friends to criticize.