首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

第一次接触神奇的Bootstrap菜单和导航

Posted in Javascript onAugust 01, 2016

本篇将主要介绍Bootstrap的菜单、导航。

本篇开始将引入javascript相关文件，如下：

<!-- 放置在body标签结尾处，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

在Bootstrap中，下拉菜单组件是一个独立的组件。Bootstrap的组件交互效果都是依赖于jquery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效。

1.下拉菜单-基本用法

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>下拉菜单基本用法</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!--css样式-->
  <style >
    body{margin:50px;padding:50px;}
  </style>
</head>
<body>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜单1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜单2</a></li>
    <!--设置菜单项状态为当前状态（.active）-->
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">菜单3</a></li>
    <!--设置菜单项状态为禁用状态（.disabled）-->
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">菜单4</a></li>
    <!--下拉分隔线-->
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜单4</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">菜单标题</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜单5</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜单6</a></li>
  </ul>
</div> 
<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

注意：有时候会有向上弹起的需求，那么只需要在“dropdown”类名基础上追加“dropup”类名即可。

效果图如下：

第一次接触神奇的Bootstrap菜单和导航第一次接触神奇的Bootstrap菜单和导航

2.下拉菜单-对齐方式

Bootstrap中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

<!--省略部分如1中代码-->
...
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单<span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 
...

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

3.按钮-按钮组

按钮组也是一个独立的组件。需要依赖于button.js插件才能正常运行。而bootstrap.js已集成了button.js插件功能。

用法：使用“btn-group”容器，把多个按钮放到这个容器中。如下所示：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>按钮组</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!--css样式-->
  <style >
    body{ margin:30px;padding:30px; }
  </style>
</head>
<body>
<div class="btn-group">
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>   
</div>
<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

4.按钮-嵌套分组

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用Bootstrap按钮的嵌套分组的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<!--省略部分如3中代码-->
...
<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">移动开发<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="##">Android</a></li>
      <li><a href="##">IOS</a></li>
    </ul>
  </div>
  <button class="btn btn-default" type="button">Java Web开发</button>
  <button class="btn btn-default" type="button">PHP开发</button>
  <button class="btn btn-default" type="button">大数据</button>
</div>
...

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

在实际运用当中，总会碰到垂直显示的效果。在Bootstrap中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现按钮的垂直分组。

5.按钮-等分按钮

等分按钮（自适应分组按钮）实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：

<div class="btn-group btn-group-justified">
  <a class="btn btn-default" href="#">三分之一</a>
  <a class="btn btn-default" href="#">三分之一</a>
  <a class="btn btn-default" href="#">三分之一</a>
</div>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

6.导航-基本用法

Bootstrap中制作导航条主要通过“.nav”样式。.nav”必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>导航-基本用法</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!--css样式-->
  <style >
    body{margin:30px;padding:30px;}
  </style>
</head>
<body>
<ul class="nav nav-tabs">
  <li><a href="##">首页</a></li>
  <li><a href="##">新闻</a></li>
  <li><a href="##">博客</a></li>
  <!--标签形tab导航-->
  <li class="active"><a href="##">论坛</a></li>
  <!--禁用状态-->
  <li class="disabled"><a href="##">反馈</a></li>
</ul>
<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

7.导航-胶囊形(pills)导航

胶囊形（pills）导航，当前项高亮显示，并带有圆角效果。只需要把类名“nav-tabs”换成“nav-pills”即可：

<ul class="nav nav-pills">
  <!--当前状态-->
  <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="##">前端博客</a></li>
      <li><a href="##">Java博客</a></li>
    </ul>
  </li>
  <li><a href="##">论坛</a></li>
  <!--禁用状态-->
  <li class="disabled"><a href="##">反馈</a></li>
</ul>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

8.导航-垂直堆叠的导航

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="##">首页</a></li>
  <li><a href="##">新闻</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">论坛</a></li>
  <!--禁用状态-->
  <li class="disabled"><a href="##">反馈</a></li>
</ul>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

9.导航-自适应导航

自适应导航“nav-justified”（源码请查阅bootstrap.css文件第3585行～第3607行）需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="##">首页</a></li>
  <li><a href="##">新闻</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">论坛</a></li>
  <!--禁用状态-->
  <li class="disabled"><a href="##">反馈</a></li>
</ul>

效果图如下：

第一次接触神奇的Bootstrap菜单和导航

10.导航-面包屑式

面包屑（Breadcrumb）也是一个独立模块组件，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。使用方式很简单，为ol加入breadcrumb类：

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">中国</a></li>
  <li class="active">北京</li>
</ol>

第一次接触神奇的Bootstrap菜单和导航

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

第一次接触神奇的Bootstrap菜单和导航

- Author -

smartbetter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JavaScript 基于原型的对象（创建、调用）
Oct 16 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
JS中的phototype详解
Feb 04 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
javascript实现留言板功能
Feb 08 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 #Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 #Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 #Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 #Javascript
js添加千分位的实现代码(超简单)
Aug 01 #Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 #Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 #Javascript
YB-230(1) 原神(1) AGC(1) FS1016(1) 铁拳(1) BCLer(1) 大话西游(1) 死亡搁浅(1) 模拟人生(1) 74HC4066(1)
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
img标签中onerror用法
2009/08/13 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
Python在线运行代码助手
2016/07/15 Python
TensorFlow实现模型评估
2018/09/07 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
详解python中的hashlib模块的使用
2019/04/22 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
泰国在线书店：SE-ED
2020/06/21 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
2014年环保局工作总结
2014/12/11 职场文书
运动会通讯稿50字
2015/07/20 职场文书
python文件目录操作之os模块
2021/05/08 Python