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 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
vue首次渲染全过程
Apr 21 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
PHP读取xml方法介绍
2013/01/12 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python装饰器原理与用法深入详解
2019/12/19 Python
python中如何写类
2020/06/29 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
优秀食品类广告词
2014/03/19 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS