Bootstrap CSS组件之导航(nav)


Posted in Javascript onDecember 17, 2016

本文实例为大家分享了Bootstrap导航的具体代码,供大家参考,具体内容如下

//源码
.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav > li {
 position: relative;
 display: block;
}
.nav > li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav > li.disabled > a {
 color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
 color: #777;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

和默认的.btn样式不同,默认的.nav样式不提供默认的导航,必须通过附加另外一个样式才行,比如.nav-tabs样式表示选项卡导航。
nav nav-tabs nav-pills nav-stacked nav-justified navbar

1.选项卡导航(nav nav-tabs)
2.胶囊式选项卡导航(nav nav-pills)
3.堆叠式导航(nav nav-pills nav-stacked)
4.自适应导航(nav nav-tabs/nav-pills nav-justified)
5.二级导航(nav nav-tabs dropdown dropdown-menu)

例子见导航.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
 <!--选项卡导航nav nav-tabs:
  菜单当前高亮菜单项.active
  菜单项是禁用状态.disabled -->
 <ul class="nav nav-tabs">
  <li class="active"><a href="#">主页</a></li>
  <li><a href="#">个人信息</a></li>
  <li class="disabled"><a href="#">作品</a></li>
 </ul>

 <!-- 胶囊式选项卡导航nav nav-pills:
  .active的菜单会进行背景色高亮显示-->
 <ul class="nav nav-pills">
  <li class="active"><a href="#">主页</a></li>
  <li><a href="#">个人信息</a></li>
  <li class="disabled"><a href="#">作品</a></li>
 </ul>

 <!-- 堆叠式导航nav nav-pills nav-stacked:
  堆叠式导航的原理是去除nav-pills样式得浮动显示(默认不设置浮动,让其垂直摆放)-->
 <ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">主页</a></li>
  <li><a href="#">个人信息</a></li>
  <li class="nav-divider"></li>
  <li class="disabled"><a href="#">作品</a></li>
 </ul>

 <!-- 自适应导航nav nav-pills/nav-tabs nav-justified:
  可以将li元素充满整个父元素,在宽度为100%的基础上,设置每个元素的display风格是table-cell-->
 <ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">主页</a></li>
  <li><a href="#">个人信息</a></li>
  <li class="disabled"><a href="#">作品</a></li>
 </ul>

 <!-- 二级导航nav nav-tabs:
  普通导航里的li元素作为父元素容器,内部包含dropdown下拉菜单的-->
 <ul class="nav nav-tabs">
  <li class="active"><a href="#">主页</a></li>
  <li><a href="#">个人信息</a></li>
  <li class="disabled"><a href="#">作品</a></li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
  </ul>
  </li>
 </ul>


 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

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

Javascript 相关文章推荐
js导出txt示例代码
Jan 14 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
js实现简单点赞操作
Mar 17 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 #Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 #Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 #Javascript
Bootstrap CSS布局之图像
Dec 17 #Javascript
Bootstrap CSS布局之按钮
Dec 17 #Javascript
Bootstrap CSS布局之表单
Dec 17 #Javascript
Bootstrap CSS布局之表格
Dec 17 #Javascript
You might like
Get或Post提交值的非法数据处理
2006/10/09 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
一句话工作感言
2014/03/01 职场文书
授权委托书样本
2014/04/03 职场文书
活动总结怎么写啊
2014/05/07 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
党员自我评价2015
2015/03/03 职场文书
少年犯观后感
2015/06/11 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python