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

更新时间：2016年12月07日 09:01:34 作者：kikay

这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap的导航很有特色，主要分为胶囊式导航、面包屑导航、头部导航共3大类，可以满足绝大部分需求。

0x01 胶囊式导航

胶囊式导航采用的是无序列表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>

效果如下：

0x02面包屑导航

面包屑导航采用的是有序列表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>

效果如下：

0x03 头部导航

头部导航在网站开发中比较常见，依赖于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>

效果如下：

当屏幕宽度很窄时，会出现下面样式：

这是因为我们在实现过程中使用了如下代码：

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js文件中引入另一个js文件的4种方法总结
JavaScript文件是一个文本类型的文件,在任何文本编辑器中都可以被打开和编辑,JavaScript文件的扩展名为js,这篇文章主要给大家介绍了关于js文件中引入另一个js文件的4种方法总结,需要的朋友可以参考下
2023-12-12
yahoo 页面的标签效果
yahoo 页面的标签效果...
2006-10-10
uniapp中input聚焦禁止软键盘弹出方法
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失,下面这篇文章主要给大家介绍了关于uniapp中input聚焦禁止软键盘弹出的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
jscript之Read an Excel Spreadsheet
jscript之Read an Excel Spreadsheet...
2007-06-06
js 数组详细操作方法及解析合集
在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下
2018-06-06
浅析javascript中的DOM
本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介，是个人对于javascript中的DOM的理解的总结，推荐给小伙伴们。
2015-03-03
require.js 加载过程与使用方法介绍
require.js是javascript模块化编程中常用的一个JS库。这篇文章主要介绍了require.js 加载过程与使用方法,需要的朋友可以参考下
2018-10-10
webpack常用配置项配置文件介绍
这篇文章主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
javascript实现仿IE顶部的可关闭警告条
仿windows IE顶部的敬告工具条，带关闭按钮，设计还算精美，你完全可以用到自己的网页用于显示提示等方面，有需要的小伙伴可以参考下。
2015-05-05
详解extract-text-webpack-plugin 的使用及安装
这篇文章主要介绍了详解extract-text-webpack-plugin 的使用及安装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06