导航栏标记nav(nav系统界面)

大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解。有疑问留言交流哦。

bootstrap基础快速入门-12 nav组件实现导航栏

bootstrap是进阶html5很基础常用的前端框架,可以做自适应漂亮的界面,再坚持一下,前端知识的大门就会打开了。

本节内容有动态显示效果,建议实际操作一下。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
 .row {
 margin-bottom: 15px;
 border-bottom: #f8f8f8 1px solid;
 }
</style>
<body>
<pre>
</pre>
<div >
 <div >
 <div >
 nav组件,navbar样式
 </div>
 <div >
 <nav  role="navigation">
 <div >
 <div >
 <button type="button"  data-toggle="collapse"
 data-target="#example-navbar-collapse">
 <span >切换导航</span>
 <span ></span>
 <span ></span>
 <span ></span>
 </button>
 <a  href="#">菜鸟教程</a>
 </div>
 <div  id="example-navbar-collapse">
 <ul >
 <li ><a href="#">iOS</a></li>
 <li><a href="#">SVN</a></li>
 <li >
 <a href="#"  data-toggle="dropdown">
 Java <b ></b>
 </a>
 <ul >
 <li><a href="#">jmeter</a></li>
 <li><a href="#">EJB</a></li>
 <li><a href="#">Jasper Report</a></li>
 <li ></li>
 <li><a href="#">分离的链接</a></li>
 <li ></li>
 <li><a href="#">另一个分离的链接</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </nav>
 </div>
 </div>
 <div >
 <div ></div>
 <div ></div>
 </div>
</div>
</body>
<!--必须先引入jquery.js-->
<script src="jquery.js"></script>
<script src="lib/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</html>

本文链接:http://www.cdwelead.comhttp://www.cdwelead.com/gjxw/23929.html
上一篇:换服务器对seo有影响吗(seo网站被k服务器影响)
下一篇:没有了

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!