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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 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结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
如何离线执行php任务
2017/02/21 PHP
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
js实现继承的5种方式
2015/12/01 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python 定义只读属性的实现方式
2020/03/05 Python
降低python版本的操作方法
2020/09/11 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
高二政治教学反思
2014/02/01 职场文书
小学生期末评语
2014/04/21 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android