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 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
jquery实现手风琴效果
Nov 20 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
可以支持多中格式的JS键盘
2007/05/02 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python之django母板页面的使用
2018/07/03 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
三年级学生评语
2014/04/23 职场文书
cf战队收人口号
2014/06/21 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
教师聘用意向书
2015/05/11 职场文书
公司员工手册范本
2015/05/14 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis