首页
所有分类
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 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
webpack4简单入门实例
Sep 06 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
军机(1) 摩托罗拉(1) 66-XI(1) 晶体管(2) BOSE(2) 77A(2) VOLVO(1) 音箱(1) MOTOROLA(1) 收信机(3)
You might like
请php正则走开
2008/03/15 PHP
php Undefined index的问题
2009/06/01 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
微信小程序 授权登录详解（附完整源码）
2019/08/23 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
python单链表实现代码实例
2013/11/21 Python
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
策划主管的工作职责
2013/11/24 职场文书
实习教师自我鉴定
2013/12/09 职场文书
青年志愿者活动方案
2014/08/17 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2019年励志签名：致拼搏路上的自己
2019/10/11 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android