Bootstrap导航元素

最新推荐文章于 2021-09-25 18:53:44 发布

人生无绝境

最新推荐文章于 2021-09-25 18:53:44 发布

阅读量207

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qqj3066574300/article/details/88917697

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

导航元素的选项

标记和基类.nav。Bootstra

标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 一个简单的网页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../Bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
	<!--
    	作者：3066574300@qq.com
    	时间：2019-03-30
    	描述：导航菜单
   -->
   <ul class="nav nav-tabs">
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   </ul>
</div>
</body>
</html>

(2)胶囊式导航菜单

胶囊式导航菜单就是.nav-stacked 关键字

代码案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 一个简单的网页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../Bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
	<!--
    	作者：3066574300@qq.com
    	时间：2019-03-30
    	描述：导航菜单
   -->
   <h2>胶囊式导航</h2>
   <ul class="nav nav-tabs">
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   </ul>
</div>
</body>
</html>

（3）禁用链接导航

禁用链接导航的关键字为disable，如果把这个关键字放在class中的话，那么它的这个链接就不用使用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 一个简单的网页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../Bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
	<!--
    	作者：3066574300@qq.com
    	时间：2019-03-30
    	描述：导航菜单
    	从下面我们可以看出，禁用链接导航的关键字是disabled,如果把这个关键字加到一个class中的话，那么这个链接就不可以用了
   -->
   <h2>禁用链接导航</h2>
   <ul class="nav nav-pills">
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li class="disabled"><a href="https://www.jd.com/">这是一个禁用链接</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   	<li><a href="https://www.jd.com/">JavaScript</a></li>
   </ul>
</div>
</body>
</html>

（4）下拉导航

在class中添加.dropdown-menu，就是会有像下拉列表的内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 一个简单的网页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<!--
    	作者：3066574300@qq.com
    	时间：2019-03-30
    	描述：导航菜单
  -->
   <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>
</body>
</html>

尾言

代码的功能都是做了一些实验了，如果能够帮助到又需要的人，那我就很高兴了。

人生无绝境

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap导航元素

前言导航元素的选项标记和基类.nav。Bootstra标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Boot...
复制链接

扫一扫