BootStrap 导航条实例代码


Posted in Javascript onMay 18, 2017

一、默认的导航条

制作默认的导航条,可分以下几步:

1.在ul里加上(ul class="nav navbar-nav")样式;

2.在ul外加一层div或nav(ps:HTML5新属性),并且添加样式(div class="navbar nabar-default");

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃饭</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡觉</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
  </ul>
</nav>

如图下:

BootStrap 导航条实例代码

So easy吧qaq

二、带有表单的导航条

1.在默认导航条的基础上,再一个form。

2.form中应用样式(form class="navbar-form")

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃饭</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡觉</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是谁?">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

如图下:

BootStrap 导航条实例代码

擦,写错了,其实我想写打火箭的。。。

三、表单,下拉菜单等冗合的导航条

上一个综合例子,不然一个一个写,小编得coding到天亮,废话少说,直说上料。

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃饭</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡觉</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
   <li class="dropdown">
    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西决几比几<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
    </ul>
   </li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是谁?">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

如图下:

BootStrap 导航条实例代码

咳咳,一般导航都有个大标题,如图下:

BootStrap 导航条实例代码

实现步骤:

1.在div里添加样式(div class="navbar-header");

2.在此div添加a标签(a class="navbar-brand");

navbar-brand(品牌)也就是大标题啦!

<nav class="navbar navbar-default">
  <div class="navbar-header">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">阿尔德里奇</a>
  </div>
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃饭</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡觉</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
   <li class="dropdown">
    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西决几比几<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
    </ul>
   </li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是谁?">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

四、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条,只是将"navbar-deafult"类名换成"navbar-inverse"。其他不变,见下图:

BootStrap 导航条实例代码

个人还是比较喜欢这个风格的,够装逼~

五、固定导航条

顾名思义,其实就是fixed样式,

Bootstrap框架提供了两种固定导航条的方式:

.navbar-fixed-top:导航条固定在浏览器窗口顶部

.navbar-fixed-bottom:导航条固定在浏览器窗口底部

使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可

<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
  …
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
  …
</div>

六、响应式导航条

<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
    <!-- .navbar-toggle样式用于toggle收缩的内容,即navbar-collapse collapse样式所在元素,-->
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">我的主页</a>
  </div>
  <!-- 屏幕宽度小于768px时,div.navbar-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
  <div id="navbar" class=" collapse navbar-collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃饭</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡觉</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打火箭</a></li>
   </ul>
  </div>
 </div>
</div>

我这是套的反色导航条的,现在分别看下宽屏和窄屏的显示效果,如图下:

BootStrap 导航条实例代码

BootStrap 导航条实例代码

<button>里面是窄屏右上角的按钮,span标签是三道杠,

现在说一下上面代码中第5行,data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar",这都什么跟什么啊,我这逐一介绍一下;

data-toggle="collapse"     代表     告诉js要什么事件来触发,此处的coolapse为“伸展折叠”;

data-target="#navbar"     代表     谁要以伸展折叠的方式来展示,绑定的是ID;

aria-expanded="false"      代表   是否展开,false。

谈到这aria-*,为无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

以上所述是小编给大家介绍的BootStrap 导航条实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jquery图片切换插件
2015/03/16 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
服务员自我评价
2014/01/25 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
应用心理学专业求职信
2014/08/04 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
工地食品安全责任书
2015/05/09 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏