The previous article has already talked about some steps and some basic uses of BootStrap. Click to view
This blog continues to introduce to you some common effects, mainly including the following components
1. Pull down menu
2. Navigation bar
3. Progress bar
4. Media Objects
5. Pagination
6. List
First, import the css and js of BootStrap
<link rel="stylesheet" href="css/bootstrap.min.css"><!--It is best to quote cdn's css, some style files do 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. Pull down menu
It consists mainly of button and ul, and can add subtitles and split lines
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> Subway line<!--This is a downward triangle symbol--> <span></span> </button> <ul role="menu"> <!--This is a subtitle--> <li>Subway</li> <li><a href="#">Line 1</a> </li> <li><a href="#">Line 2</a> </li> <li><a href="#">Line 3</a> </li> <li><a href="#">Line 4</a> </li> <!--This is a dividing line--> <li></li> <li><a href="#">Line 5</a> </li> </ul> </div>
2. Navigation bar
The navigation bar is the standard for almost every web page, so it is absolutely right to learn how to use it.
This is the navigation bar at the top of the page
<!--Set the nav class to be more high-end, set to navbar-static-top to remove the rounded corners of the navbar and fix it at the top--> <nav role="navigation"> <div> <!--The beginning of the navigation bar, usually text or picture --> <div> <!--This button can click on the menu when the position is not enough --> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <!--Swap Brand to img--> <a href="#">Brand</a> </div> <!--Set the id to bs-example-navbar-collapse-1 to be retracted and clicked on--> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <!--A drop-down menu in the navigation bar--> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"> System maintenance<span></span> </a> <ul role="menu"> <li><a href="#">Restore the system</a></li> <li><a href="#">System backup</a></li> <li><a href="#">Disconnect</a></li> <li><a href="#">Delete the user</a></li> </li> </li> </ul> <!--Write navbar-right first and the right--> <!--Button in the navigation bar--> <button type="button">Sign in</button> <!--Form in the navigation bar--> <form role="search"> <div> <input type="text" placeholder="enter search content"> </div> <button type="summit">Search</button> </form> </div> </div> </nav> </nav>
When we use web pages to browse blogs or files, we have a level. At this time, if we want to return to the previous level or several levels, we need the location navigation bar.
<!--Navigation bar--> <ol> <li><a href="#">My backend</a> </li> <li><a href="#">System Analysis</a> </li> <!--Current location cannot be clicked to jump--> <li>Access Statistics</li> </ol>
3. Progress bar
<div> <!--progress-bar-striped sets the stripes, and active sets animation--> <!--Show the percentage of progress bar according to the percentage of style width--> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30%</span> <!--Text is displayed in the middle of the progress bar--> 30% </div> </div>
4. Media Objects
This is basically the same message on Weibo or Twitter
The avatar on the left, the title and text on the right
<div> <div> <img src="images/1.jpg"> </div> <div> <h4>Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div>
5. Pagination
This is multiple pages
<ul> <li> <a href="#" aria-label="Previous"> <!--Double Arrows to the Left--> <span aria-hidden="true">«</span> </a> </li> <!--The first option is activated--> <li><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="#">7</a> </li> <li> <a href="#"> aria-label="Next"> <!--Double Arrows to the Right--> <span aria-hidden="true">»</span> </a> </li> </ul>
This is only the previous page and the next page
<ul> <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 connected together
The following is written as two buttons are distributed on both sides
<ul> <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>
6. List
The effect of the list is very common and very simple to use
<div> <!--The first item was selected--> <a href="#">Access Statistics</a> <a href="#">Information Statistics</a> <a href="#">Log Statistics</a> <a href="#">Information Statistics</a> <a href="#">Information Statistics</a> <a href="#">Information Statistics</a> <a href="#">Information Statistics</a> <a href="#">Information Statistics</a> </div>
I used the above component to make a backend static web page
The effect is as shown in the picture
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.