一系列Bootstrap导航条使用方法分享


Posted in Javascript onApril 29, 2016

本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下

1、Bootstrap基础导航样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

<ul class="nav nav-tabs">
 <li><a href="##">Home</a></li>
 <li><a href="##">CSS3</a></li>
 <li><a href="##">Sass</a></li>
 <li><a href="##">jQuery</a></li>
 <li><a href="##">Responsive</a></li>
</ul>

2、Bootstrap基础导航条
在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

“.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

3、Bootstrap导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现。

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">导航条</a>
  </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

4、Bootstrap导航条二级菜单
在导航条中添加二级菜单也非常简单

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">导航条</a>
  </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

5、Bootstrap带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">Bootstrap</a>
  </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

6、Bootstrap导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:
1).导航条中的按钮navbar-btn

2).导航条中的文本navbar-text

3).导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">Bootstrap</a>
  </div>
 <ul class="nav navbar-nav">
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 </ul>
</div>

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">Bootstrap</a>
  </div>
 <div class="nav navbar-nav">
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 <a href="##" class="navbar-text">Navbar Text</a>
 </div>
</div>

7、Bootstrap固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式:
.navbar-fixed-top:导航条固定在浏览器窗口顶部
.navbar-fixed-bottom:导航条固定在浏览器窗口底部

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 …
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 …
</div>

8、Bootstrap分页导航
带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法。

<ul class="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

在Bootstrap框架中,也可以通过几个不同的情况来设置分页按钮大小。
1).通过“pagination-lg”让分页导航变大;
2).通过“pagination-sm”让分页导航变小

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到,比如说个人博客,杂志网站等。这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。
在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类。

<ul class="pager">
 <li><a href="#">«上一页</a></li>
 <li><a href="#">下一页»</a></li>
</ul>

默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式
previous:让“上一步”按钮居左
next:让“下一步”按钮居右

<ul class="pager">
 <li class="previous"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

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

以上就是关于Bootstrap 导航条的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 #Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php 函数中使用static的说明
2012/06/01 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
javascript设计模式之迭代器模式
2020/01/30 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
python实现SOM算法
2018/02/23 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
全运会口号
2014/06/20 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL