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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
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
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
js实现筛选功能
2020/11/24 Javascript
python读取Android permission文件
2013/11/01 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python生成器表达式和列表解析
2016/03/10 Python
Python Requests安装与简单运用
2016/04/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python 从attribute到property详解
2020/03/05 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
一个C/C++编程面试题
2013/11/10 面试题
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
zabbix监控mysql的实例方法
2021/06/02 MySQL