search

Home >Web Front-end >JS Tutorial >Example code for making navigation bar with BootStrap_javascript skills

Example code for making navigation bar with BootStrap_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:02:021700browse

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

I have been trying to figure out the bootstrap navigation bar for a long time. Either the left and right sides are not aligned horizontally, or the colors are different. I finally figured it out and just put the code here and use it directly in the future

The code is as follows: 

<!DOCTYPE html>
<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></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role = "navigation">
<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="#">KKK</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"></span></a></li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">haha<span class="sr-only"></span></a></li>
<li><a href="#">haha<span class="sr-only"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Look at the results

Example code for making navigation bar with BootStrap_javascript skills

The above is the example code for creating a navigation bar with BootStrap introduced by the editor. I hope it will be helpful to you!

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：Introduction to four ways to bind events with jQueryNext article：Introduction to four ways to bind events with jQuery

Related articles

See more