Bootstrap实现导航栏的2种方式


Posted in Javascript onNovember 28, 2016

前言:导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在下面的内容中,介绍两种制作导航栏的方式。

一、用按钮组实现,代码如下:

<div style="width:100%; background:#ff0">
 <div class="btn-group">
 <button class="btn btn-default" type="button">首页</button>
 <button class="btn btn-default" type="button">产品展示</button>
 <button class="btn btn-default" type="button">案例分析</button>
 <button class="btn btn-default" type="button">联系我们</button>
 <div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">公司简介</a></li>
 <li><a href="#">企业文化</a></li>
 <li><a href="#">组织结构</a></li>
 <li><a href="#">客服服务</a></li>
 </ul>
 </div>
 </div>
</div>

二、Bootstrap为导航专门做了相应的css类,代码如下:

<div style="width:100%; background:#ff0">
<ul class="nav nav-pills nav-justified">
 <li><a href="##">首页</a></li>
 <li><a href="##">联系我们</a></li>
 <li><a href="##">产品展示</a></li>
 <li class="dropdown">
 <a href="##" class="dropdown-toggle" data-toggle="dropdown">关于我们<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">公司简介</a></li>
 <li><a href="#">企业文化</a></li>
 <li><a href="#">组织结构</a></li>
 <li><a href="#">客服服务</a></li>
 </ul>
 </li>
</ul>
</div>

如果想要将导航栏设为垂直显示,第一中方法在div.btn-group后追加.btn-group-vertical就可以,第二种在div.nav后追加.nav-stacked即可。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
json数据的列循环示例
Sep 06 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 #Javascript
Bootstrap框架实现广告轮播效果
Nov 28 #Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
js窗口震动小程序分享
Nov 28 #Javascript
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
js中string和number类型互转换技巧(分享)
Nov 28 #Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
市场营销方案范文
2014/03/11 职场文书
生日主持词
2014/03/20 职场文书
车间核算员岗位职责
2014/07/01 职场文书
思想工作总结范文
2015/08/12 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
Redis全局ID生成器的实现
2022/06/05 Redis