当前位置：首页 > 资讯 > 技术文档

Bootstrap基本组件学习笔记之导航(10)

时间：2020-07-22 17:35 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap基本组件学习笔记之导航(10)

Bootstrap的导航很有特色，主要分为胶囊式导航、面包屑导航、头部导航共3大类，可以满足绝大部分需求。 [b]0x01 胶囊式导航[/b] 胶囊式导航采用的是无序列表ul来实现：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>胶囊式导航</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>胶囊式导航</h1>
 </div>
 <div class="col-lg-3">
 <h3>水平样式</h3>
 <ul class="nav nav-pills">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">关于</a></li>
 </ul>
 </div>
 <div class="col-lg-3">
 <h3>垂直样式</h3>
 <ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">关于</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下： [img]http://files.jb51.net/file_images/article/201612/201612790601108.jpg?2016117967[/img] [b]0x02面包屑导航[/b] 面包屑导航采用的是有序列表ol来实现：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>面包屑导航</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>面包屑导航</h1>
 </div>
 <div class="breadcrumb">
 <li class="active"><a href="#">学校</a></li>
 <li><a href="#">一年级</a></li>
 <li><a href="#">一班</a></li>
 </div>
</div>
</body>
</html>

效果如下： [img]http://files.jb51.net/file_images/article/201612/201612790543821.jpg?20161179550[/img] [b]0x03 头部导航[/b] 头部导航在网站开发中比较常见，依赖于Bootstrap库的collapse插件。基本样式如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <style>
 /*body{*/
  /*padding-top: 50px;*/
 /*}*/
 </style>
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>头部导航</title>
</head>
<body>
<div class="container">
 <nav class="navbar navbar-inverse">
 <div class="navbar-header">
  <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">网站标题</a>
 </div>
 <div class="collapse navbar-collapse" id="navbar">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">首 页</a></li>
  <li><a href="#">新闻</a></li>
  <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
   下拉菜单
   <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
   <li><a href="#">菜单1</a></li>
   <li><a href="#">菜单2</a></li>
   <li><a href="#">菜单3</a></li>
   </ul>
  </li>
  </ul>
  <form class="nav navbar-form navbar-right">
  <div class="form-group">
   <input type="text" class="form-control" placeholder="用户名">
  </div>
  <div class="form-group">
   <input type="password" class="form-control" placeholder="密码">
  </div>
  <div class="form-group">
   <button type="submit" class="btn btn-primary form-control">提 交</button>
  </div>
  </form>
 </div>
 </nav>
 <div class="page-header">
 <h1>头部导航</h1>
 </div>
 <div>
 <p>内容</p>
 </div>
</div>
</body>
</html>

效果如下： [img]http://files.jb51.net/file_images/article/201612/201612790528930.jpg?20161179535[/img] 当屏幕宽度很窄时，会出现下面样式： [img]http://files.jb51.net/file_images/article/201612/201612790506060.jpg?20161179513[/img] 这是因为我们在实现过程中使用了如下代码：

<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：js实现ASP分页函数 HTML分页函数
下一篇：js实现浏览器的各种菜单命令比如打印、查看源文件等等

资讯排行榜
更多>>