Bootstrap实现默认导航栏效果


Posted in Javascript onSeptember 21, 2020

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。
创建一个默认的导航栏的步骤如下:

  • 向 <nav> 标签添加 class .navbar、.navbar-default(白底黑字),navbar-inverse(黑底白字)
  • 向上面的元素添加 role="navigation",有助于增加可访问性。
  • 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

下面的实例演示了这点:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 默认的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此~</a> 
 </div> 
 <div> 
 <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"> 
 下拉菜单 
 <b class="caret"></b> 
 </a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">我是谁呢?</a></li> 
 <li><a href="#">我也不知道</a></li> 
 <li><a href="#">你是谁呢?</a></li> 
 <li class="divider"></li> 
 <li><a href="#">分离的链接</a></li> 
 <li class="divider"></li> 
 <li><a href="#">另一个分离的链接</a></li> 
 </ul> 
 </li> 
 </ul> 
 </div> 
</nav> 
</body> 
</html>

效果如下:

Bootstrap实现默认导航栏效果


<nav class="navbar navbar-inverse" role="navigation">

改成

<nav class="navbar navbar-default" role="navigation">

效果如下:

Bootstrap实现默认导航栏效果

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

以上就是Bootstrap实现默认导航栏效果的代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
js实现简单抽奖功能
Nov 24 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 #Javascript
AngularJS进行性能调优的7个建议
Dec 28 #Javascript
浅析AngularJS Filter用法
Dec 28 #Javascript
jquery实现倒计时功能
Dec 28 #Javascript
基于jquery实现瀑布流布局
Jun 28 #Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
快速查询Python文档方法分享
2017/12/27 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python中 * 的用法详解
2019/07/10 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python中生成ndarray实例讲解
2021/02/22 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
Android面试题及答案
2015/09/04 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python