search

Home >Web Front-end >JS Tutorial >How to operate each element of Bootstrap navigation bar (form, button, text)_javascript skills

How to operate each element of Bootstrap navigation bar (form, button, text)_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:22:581542browse

This article mainly includes three major aspects, please study carefully.

1. Form in the navigation bar
The form in the navigation bar does not use the default class mentioned in the Bootstrap form chapter, it uses the .navbar-form class. This ensures proper vertical alignment of the form and collapse behavior in narrower viewports. Use the alignment options (which are explained in detail in the Component Alignment section) to decide where the content in the navigation bar is placed.

The following example demonstrates this: 

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</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="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <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">搜一下</button> 
   </form>   
  </div> 
</nav> 
</body> 
</html>

Effect:

Black effect

2. Buttons in the navigation bar
You can use class .navbar-btn to add a button to a bb9345e55eb71822850ff156dfde57c8 element that is not inside a ff9c23ada1bcecdd1a0fb5d5a0f18437, with the button centered vertically on the navbar. .navbar-btn can be used on 3499910bf9dac5ae3c52d5ede7383485 and d5fd7aea971a85678ba271703566ebfd elements.

Don’t use .navbar-btn on 3499910bf9dac5ae3c52d5ede7383485 elements inside .navbar-nav as it is not a standard button class.
The following example demonstrates this: 

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-inverse" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</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="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <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">搜一下</button> 
   </form>  
   <button type="button" class="btn btn-default navbar-btn"> 
     导航栏按钮 
   </button>    
  </div> 
</nav> 
</body> 
</html>

The effect is as follows:

3. Text in the navigation bar
If you need to include a text string in the navigation, use class .navbar-text. This is typically used in conjunction with the e388a4556c0f65e1904146cc1a846bee tag, ensuring appropriate leading and coloring. The following example demonstrates this: 

<div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a>   
  </div> 
  <div> 
   <p class="navbar-text">导航栏中的文本</p> 
  </div> 
  <div>

The effect is as follows:

The above is the entire content of this article. I hope it will be helpful to everyone’s learning, so that everyone can implement the Bootstrap navigation bar more skillfully.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A brief introduction to implicit type conversion of JavaScript data types_javascript skillsNext article：A brief introduction to implicit type conversion of JavaScript data types_javascript skills

Related articles

See more