Write in front
In this article, I will talk about the use of Bootstrap based on a landscape web page I made. The web page screenshots are as follows:
The effects and code of the complete web page can be viewed here or viewed on CodePen. The main effects that web pages need to achieve include the following:
1. The login and registration buttons in the navigation bar pop up after clicking the login and registration modal boxes, and the login and registration windows can be switched. The menu bar is responsive
2. The landscape options in the navigation bar can be pulled down. Click the Jiuzhaigou Lijiang Water Curtain Cave in the drop-down to locate the corresponding tab.
3. Large-screen slideshow carousel
4. Click to switch on the tab page
Now we start to embrace Bootstrap.
I believe that friends have heard of Bootstrap or used it. In this web page, I use cdn Bootstrap v3.3.4. Click here to download the latest version of Bootstrap v3.3.5 or click here to download it on the official website. I believe there is always one that suits you~~~~~~
In this article, let’s talk about the navigation bar first.
Navigation bar
Before using bs, you must first refer to bs, including css and js. The reference method is very simple, the same as referencing ordinary external files. You can use cdn links or place them in local references. The code is given below.
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>myvin's landscape</title><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
In this landscape web page example, I use the cdn link.
At the same time, because the Bs plugin is based on jq, jq must also be introduced.
First give the complete code of the navigation bar
<nav> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <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> <a href="#">Define a trademark yourself</a> </div> <!-- Navigation in the upper left corner --> <div id="bs-example-navbar-collapse-1"> <ul > <li ><a href="#">Homepage<span>(current)</span></a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false">Scenery<span></span></a> <ul role="menu"> <li><a href="#jiuzhaigou">Jiuzhaigou</a></li> <li><a href="#lijiang">Lijiang</a></li> <li><a href="#shuilianong">Shuijian Cave</a></li> <li></li> <li><a href="#shuilianandong">Shuijian Cave</a></li> <li></li> <li><a href="#">More..</a></li> </li> </li> <li data-toggle="modal" data-target="#about"><a href="#" >About </a></li> </ul> <form role="search"> <div> <input type="text" placeholder="Search for Attractions.."> <button type="button">Go</button> </div> </form> <ul> <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >Login</a></li> <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >Register</a></li> </ul> </div> </div> </nav>
The navigation components of bs all rely on the same .nav class and the code is explained separately. Let’s look at this paragraph first:
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span></button>
The purpose of this code is to reduce the viewport, the menu options on the navigation bar will collapse, click the collapse icon, and the menu options on the navigation bar will be arranged vertically. The .navbar-inverse class in nav is inverse color. Friends can remove the .navbar-inverse class to observe the effect. Because I am a black control, I use the inverted color here. If you want to use other colors, rich gold, friends can match them according to their own taste. The .navbar-brand class can be used to define the trademark of your own website. I will use the text to define a trademark myself here. Interested friends can add their own logo. The .dropdown-toggle class can implement a pull-down, and the .divider class can implement a light and dark dividing line.
As the name suggests , the .navbar-right class in the search box and login and registration is to right.
data attributes
Here it is necessary to talk about the data attribute of bs. In BS, developers can use all js plugins in BS only through the data attributes. This is a first-class API in BS and is often our preferred way to use js plugins. For example, the data-toggle="collapse" and data-toggle="dropdown" in the above code are the ways to use js plug-ins in BS.
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 about this article, I hope it will be helpful for everyone to learn the Bootstrap navigation bar.