Home >Web Front-end >HTML Tutorial >Embracing Bootstrap-Navigation Bar_html/css_WEB-ITnose
Embracing Bootstrap-Navigation Bar_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:231470browse
Previous article: "Not everything in JavaScript is an object"
Author: myvin
Written in front of the frontAs the title says, written in front of the front, so these must It’s some nonsense. If you want to go straight to the nutritious part, you can click on this anchor to skip this nonsense.
Looking at it suddenly, I found that I haven’t updated my blog for two weeks. I just went on a business trip, went on a business trip, went on a business trip, and I have been traveling until now, and I am still traveling.
Traveling on a business trip is not scary. The scary thing is that I got food poisoning. Come on, have a smile~.~
I still remember that night clearly. The air outside was still slightly warm, the stars were still invisible in the sky, and the air conditioner in the room was still blowing happily. After dinner, I I was squatting on the toilet, chatting with my gay friends on my mobile phone, and bragging, "I have diarrhea." Unexpectedly, after leaving the toilet, I started to sit on the ground and vomit. The sky was dark and the earth was dark, and the vomit was like a sea of rocks. It stayed with me. I also had a stomachache that wouldn’t stop, and most of my youth the next day was dedicated to sitting on the toilet.
After this food poisoning, I realized a problem that many people understand but have ignored, that is:
Don’t brag if you are too awesome
It will kill people if you brag too much
PS: I sat on the bed sheet of the hotel that was white and flawless but had been dyed red by countless people’s blood. I typed out the words above and below, including this line of course. Word.
Whether you have skipped the nonsense or not to get here, now that you are here, read on.
Written beforeIn this blog post, I will talk about the use of Bootstrap based on a landscape web page I made. The screenshot of the web page is as follows:
The effect of the complete web page and The code can be viewed here or on CodePen. The main effects to be achieved by the web page include the following points:
After clicking the login and registration buttons in the navigation bar, the login and registration modal boxes will pop up, and the login and registration windows can be switched. The menu bar is Responsive
The landscape option in the navigation bar can be pulled down. Click on Jiuzhaigou `` Lijiang '' Shuiliandong in the drop-down to locate the corresponding tab
Large screen carousel of slides
Click to switch the tab page
Now we start to embrace Bootstrap and start to move.
Everyone must have heard of or used Bootstrap. The past and present life of Bootstrap will not be introduced here. Friends who are interested in knowing more can click here to view the encyclopedia or click here to view the official website of Bootstrap. In this webpage, 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 from the official website. I believe there will always be one that suits you~~~~~~
In this article, let’s talk about the navigation bar first.
Navigation barBefore using bs, you must first reference bs, including css and js. The reference method is very simple, the same as referencing ordinary external files. You can use a cdn link or place a local reference. 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山水</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 webpage example, I used a cdn link.
At the same time, because the bs plug-in is based on jq, jq must also be introduced.
First give the complete code of the navigation bar
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="#">自己定义一个商标</a> </div> <!-- 左上角的导航 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" > <li ><a href="#">主页<span class="sr-only">(current)</span></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">山水 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#jiuzhaigou">九寨沟</a></li> <li><a href="#lijiang">丽江</a></li> <li><a href="#shuiliandong">水帘洞</a></li> <li class="divider"></li> <li><a href="#">更多..</a></li> </ul> </li> <li data-toggle="modal" data-target="#about"><a href="#" >关于</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索景点.."> <button type="button" class="btn btn-default">Go</button> </div> </form> <ul class="nav navbar-nav navbar-right"> <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陆</a></li> <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注册</a></li> </ul> </div> </div> </nav>
BS navigation components all rely on the same .nav class, and the codes will be explained separately. Let’s look at this paragraph first:
<button type="button" class="navbar-toggle collapsed" 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>
The function of this code is that when the viewport is reduced, the menu options on the navigation bar will collapse. Click the fold icon, and the menu options on the navigation bar will be arranged vertically. The .navbar-inverse class in nav is an inverse color. Friends, you can remove the .navbar-inverse class to observe the effect. Because I am a black person, black stockings are my favorite, so I use reverse color here. If you want to use other colors, such as sultry red, green tea bitch, and local gold, you can match it according to your own taste. The .navbar-brand class can be used to define the trademark of your own website. I will replace it with the text that defines a trademark by myself. Interested friends can add their own logo. The .dropdown-toggle class can implement a drop-down, and the .divider class can implement a light-dark dividing line.
The .navbar-right class in the search box and login and registration is, as the name suggests, set to the right.
data attributeIt is necessary to talk about the data attribute of bs here. In bs, developers can use all js plug-ins in bs just through the data attribute. This is the first-class API in bs and is often the preferred way for us to use js plug-ins. For example, data-toggle="collapse", data-toggle="dropdown", etc. in the above code are the ways to use js plug-ins in bs.
That’s it.There’s nothing to tie up. Let’s talk about the large-screen carousel of slides next time.
By the way, I would like to remind you that you must be careful when eating in summer, especially the meat from street stalls. Try to eat as little as possible, and if you want to eat, you must find clean food.
Finally, I wish everyone will not have diarrhea in the summer~~~
Please remember to indicate the author and source when reprinting -.-
Author: myvin
Original source: