About how to use the JS component Bootstrap navigation bar

This article mainly introduces the use of the JS component Bootstrap navigation bar in detail. Interested friends can refer to it

The navigation bar is used as the navigation header in your application or website Responsive meta-component.

1. The default navigation bar

The navigation bar can be folded (and can be opened or closed) on mobile devices, and within the available viewport width When increasing, it changes to horizontal expansion mode
Customize the thresholds of collapsed mode and horizontal mode
Depending on the length of the content you place on the navigation bar, you may need to adjust it The threshold for the navigation bar to enter collapsed and horizontal modes. You can achieve your needs by changing the value of the @grid-float-breakpoint variable or adding your own media query CSS code.
Step one:
Add the nav-bar style class to the outermost container nav tag, indicating that it belongs to the navigation bar

<nav class="navbar navbar-default" role="navigation"> 
</nav>

Effect:

Step 2: Add header

<nav class="navbar navbar-default" role="navigation"> 
  <p class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <span class="sr-only">Toggle navigation</span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </p> 
 </nav>

There are three span icons nested in the button label. Then give the navbar-toggle style class and attribute collapse (collapse), and the target is data-target when clicked.
When the window is reduced to a certain extent, the effect on the right appears.

Step 3: Nested drop-down menu, form form, drop-down menu.
Code:

<h1 class="page-header">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <p class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <span class="sr-only">Toggle navigation</span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </p> 
  <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <!--嵌套下拉菜单--> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
   下拉<b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
   </ul> 
   </li> 
  </ul> 
   
  <!--嵌套表单--> 
  <form action="" class="navbar-form navbar-left" role="search"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </p> 
 </nav>

Preview:

Enhance the accessibility of the navigation bar Property
To enhance accessibility, be sure to add role="navigation" to each navigation bar.

2. Form
Placing the form within .navbar-form can present good vertical alignment and present a collapsed state in a narrower viewport. Use the alignment options to determine where it appears on the navigation bar.

A lot of code is shared through the use of mixins, .navbar-form and .form-inline.

Code

<form action="" class="navbar-form navbar-left" role="search"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form>

Add a label label for the input box
If you do not have a label for the input box Screen readers will have problems adding label tags. For forms within the navigation bar, you can hide the label label through .sr-only class.

3. Button
Code:

<button type="button" class="btn btn-default navbar-btn">登陆</button>

Preview:

4. Text
When wrapping text in .navbar-text, in order to have correct line spacing and color, the

tag is usually used.
Code snippet:

<p class="navbar-text">文本</p>

5. Non-navigation links
Maybe you want to add standard links in addition to standard navigation components, then use .navbar -link class allows links to have the correct default color and inverse color.
Code snippet:

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6. Component alignment
Use the .navbar-left or .navbar-right tool class to align navigation links, forms, buttons or text. Both classes use CSS float styles in specific directions. For example, to align navigation links, place them in a separate

that has a utility class applied to them.

These classes are mixin versions of .pull-left and .pull-right, but they are limited to media queries, which makes it easier to handle the navigation bar component on various screen sizes.

7. Fixed at the top
Add .navbar-fixed-top to fix the navigation bar at the top. The effect is gone.
Need to set padding for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding above the . Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-top: 70px; }

Copy after login

must be placed after the core file of Bootstrap CSS. (Covering problem)
8. Fixed at the bottom
Replace with .navbar-fixed-bottom.
Need to set internal (padding) for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding at the bottom of . Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.


body { padding-bottom: 70px; }

Copy after login

一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。


以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于jQuery插件Validate实现自定义校验结果样式的代码


手机端实现Bootstrap图片轮播的效果


bootstrap时间控件daterangepicker的使用方法


The above is the detailed content of About how to use the JS component Bootstrap navigation bar. For more information, please follow other related articles on the PHP Chinese website!