首页
所有分类
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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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
LOL(1) 暴雪(1) 战锤40K(1) 吸血鬼(1) 铁拳(1) 遗弃(1) 东方异文石(1) 小缇娜的奇幻之地(1) 绿林侠盗(1) 我的世界(1)
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
mysql的最长数据库名，表名，字段名可以是多长
2014/04/21 面试题
小学英语教学反思
2014/01/30 职场文书
总经理任命书范本
2014/06/05 职场文书
2014年转正工作总结
2014/11/08 职场文书
校长个人总结
2015/03/03 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers