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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
JavaScript ES6的函数拓展
Jan 18 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
PHP实现Socket服务器的代码
2008/04/03 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery 选择器详解
2015/01/19 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
投资意向书
2014/07/30 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
民事起诉状范文
2015/05/19 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
python 网络编程要点总结
2021/06/18 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL