Powerful bootstrap effect display (ii) _JAVASCRIPT skills

The previous article has talked about the use of bootstrap steps and some basic use, click to view
This blog continues to introduce some commonly used effects, mainly with the following components

1. Drop down menu
2. Navigation bar
3. Progress bar
4. Media Objects
5. Paging
6. List

First, you want to import bootstrap CSS and JS

<link rel= "stylesheet" href= "Css/bootstrap.min.css" >
<!--It is best to cite Cdn's CSS, some styles are not--> <link
Rel= "stylesheet" href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src= "js/" Jquery-3.1.0.min.js "></script>
<script src=" Js/bootstrap.min.js "></script>

1. Drop down menu

Mainly by button and UL composition, can add small title and split line

<div class= "dropdown" > <button class= "btn" Btn-default "dropdown-toggle"
  button "type=" Dropdown "aria-expanded=" false >
  metro line
  <!--This is the downward triangular symbol-->
  <span class= "caret" ></span >
  </button>
  <ul class= "Dropdown-menu" role= "menu" >
  <!--This is a small title-->
  <li class= "Dropdown-header" > Metro </li>
  <li><a href= "#" >1 line </a> </li>
  <li ><a href= "#" >2 line </a> </li>
  <li><a href= "#" >3 line </a> </li>
  <li><a href= "#" >4 line </a> </li>
  <!--This is the split line-->
  <li class= "Divider" > </li>
  <li><a href= "#" >5 line </a> </li>
  </ul>
 </div>

2. Navigation bar

Navigation bar is almost the standard of each Web page, learn how to use it must be true
This is the navigation bar at the top of the page

<!--the Nav class is set to Navbar-inverse more high-end, set to Navbar-static-top remove NavBar fillet and stationary at the top--> <nav "class="
  Navbar-inverse navbar-static-top "role=" navigation "> <div class=" container "> <!--the beginning of a navigation bar, usually text or a picture--> <div class= "Navbar-header" > <!--this button can open the menu at a point that is not enough.--> <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> <!--convert brand to img--> <a class= "Navbar-brand" # ">Brand</a> </div> <!--ID set to Bs-example-navbar-collapse-1 to be opened--> <div class=" Collapse na Vbar-collapse "id=" bs-example-navbar-collapse-1 "> <ul class=" Nav navbar-nav "> <li><a href=" # "> Staff management </a></li> <li><a href= "#" > member Management</a></li> <li><a href= "#" > member Management </a></li> <li><a href= "#" > member Management </a ></li> <!--navigation bar, add a drop-down menu--> <li class= "dropdown" > <a href= "#" class= "Dropdown-toggle" data-
   Toggle= "dropdown" role= "button" aria-expanded= "false" > System maintenance <span class= "caret" ></span> </a> <ul class= "Dropdown-menu" role= "menu" > <li><a href= "#" > Recovery system </a></li> <li>< A href= "#" > System backup </a></li> <li><a href= "#" > Disconnect </a></li> <li><a href = "#" > Delete user </a></li> </ul> </li> </ul> <!--first write navbar-right the more right--> <!--navigation button in the bar--> <button type= "button" class= "btn btn-default navbar-btn navbar-right" >sign in</button> <!--  Forms in the navigation bar--> <form class= "Navbar-form navbar-right" role= "search" > <div class= "Form-group" > <input Type= "text" class= "form-cOntrol "placeholder=" input search content > </div> <button type= "summit" class= "btn Btn-default" > Search </button>

 </form> </div> </div> </nav>

When we use a Web page to browse blogs or files, there is a hierarchy, and if you want to go back to the previous level or a few levels, you need a location navigation bar

 <!--navigation bar-->
  <ol class= "breadcrumb" >
  <li><a href= "#" > My Backstage </a> </li>
  <li><a href= "#" > System Analysis </a> </li>
  <!--current position can not be clicked Jump-->
  <li class= "active "> Access statistics </li>
  </ol>

3. Progress bar

<div class= "Progress" >
  <!--progress-bar-striped set stripes, active settings animation-->
  <!-- Displays the percentage of the progress bar based on the percentage of the style width-->
  <div class= "Progress-bar progress-bar-striped Active" role= "ProgressBar" aria-valuenow= "aria-valuemin=" "0" aria-valuemax= "style=" width:30%; >
  <span class= "sr-only" >30%</span>
  <!--text displayed in the middle of the progress bar-->
  30%
  </div>
 </div>

4. Media Objects

The message is basically this style on Twitter or Weibo.
On the left is the avatar and the right is the title and the text

 <div class= "Media" >
  <div class= "Media-left" >
  
  </div>
  <div class= "Media-body" >
   
 

5. Paging

It's got multiple page numbers.

<ul class= "pagination" >
  <li class= "Disabled" >
  <a href= "#" aria-label= "Previous" >
   <!--left Double arrow-->
   <span aria-hidden= "true" >«</span>
  </a>
  </li>
  <!- -The first option is activated-->
  <li class= "active" ><a href= "#" >1</a> </li>
  <li><a href= "# ">2</a> </li>
  <li><a href=" # ">3</a> </li>
  <li><a href=" # ">4</a> </li>
  <li><a href=" # ">5</a> </li>
  <li><a href=" # ">6</a> </li>
  <li><a href=" # ">7</a> </li>
  <li>
  <a href= "#" aria-label= "Next" >
   <!--rightwards Double arrow-->
   <span aria-hidden= "true" >»</span>
  </a>
  </li>
 </ul>

This is only the previous page and the next page

 <ul class= "Pager" >
  <li><a href= "#" ><span aria-hidden= "true" >←</span> previous page </a > </li>
  <li><a href= "#" ><span aria-hidden= "true" >→</span> next page </a> </ Li>
  </ul>

The above is written with two buttons attached.
The following wording is two buttons distributed on both sides

 <ul class= "Pager" >
  <li class= "Previous" ><a href= "#" ><span aria-hidden= "true" >←</ Span> prev </a> </li>
  <li class= "Next" ><a href= "#" ><span aria-hidden= "true" >→ </span> next page </a> </li>
  </ul>

6. List

The effect of the list is very common and very simple to use

 <div class= "List-group col-md-3" >
  <!--The first item is selected--> <a href= "
  #" class= "List-group-item Active" > Access Statistics </a>
  <a href= "#" class= "List-group-item" > Information statistics </a>
  <a href= "#" class= " List-group-item "> Log statistics </a>
  <a href=" # "class=" List-group-item "> Information statistics </a>
  <a href=" # "Class=" List-group-item > Information Statistics </a>
  <a href= "#" class= "List-group-item" > Information statistics </a>
  < A href= "#" class= "List-group-item" > Information statistics </a>
  <a href= "#" class= "List-group-item" > Information statistics </a>
  </div>

I used the above component to make a static web page in the background

Effect as shown

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.