bootstrap导航、选项卡实现代码


Posted in Javascript onDecember 28, 2016

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

导航:

<!--
 nav    导航的基础样式
 -->
<div class="container">
 <div class="row">
  <ul class="nav nav-tabs">
   <li><a href="#">雪碧图</a></li>
   <li class="active"><a href="#">可乐</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 胶囊式 nav-pills-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills">
   <li><a href="#">雪碧图</a></li>
   <li class="active"><a href="#">可乐</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 竖着排 nav-stacked-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills nav-stacked">
   <li><a href="#">雪碧图</a></li>
   <li class="active"><a href="#">可乐</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 两端对齐 nav-justified-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills nav-justified">
   <li><a href="#">雪碧图</a></li>
   <li class="active"><a href="#">可乐</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 导航中放下拉菜单-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-tabs">
   <li><a href="#">雪碧图</a></li>
   <li class="active"><a href="#">可乐</a></li>
   <li><a href="#">coffee</a></li>
   <li>
    <a href="#" data-toggle="dropdown">绿茶 
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">html</a></li>
     <li><a href="#">css</a></li>
     <li><a href="#">js</a></li>
    </ul>
   </li>
  </ul>
 </div>
</div>

效果图:

bootstrap导航、选项卡实现代码

选项卡:

<!--
 1.导航对应的所有内容需要放在一个class为tab-content的层里;
 2.对应的每个内容块都要加上tab-pane的class,且激活的内容块加上active的class
 3.给每一个导航的a标签添加data-toggle="tab";
 4.给每一个内容块添加一个id,和选项卡的锚点对应
 -->
<div class="container">
 <div class="row">
  <ul class="nav nav-tabs">
   <li class="active"><a href="#tab1" data-toggle="tab">雪碧图</a></li>
   <li><a href="#tab2" data-toggle="tab">可乐</a></li>
   <li><a href="#tab3" data-toggle="tab">coffee</a></li>
  </ul>
  <div class="tab-content">
   <div id="tab1" class="tab-pane active">html</div>
   <div id="tab2" class="tab-pane">css</div>
   <div id="tab3" class="tab-pane">js</div>
  </div> 
 </div>
</div>

效果图:

bootstrap导航、选项卡实现代码

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

Javascript 相关文章推荐
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 #Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
You might like
yii框架无限极分类的实现方法
2017/04/08 PHP
js 操作css实现代码
2009/06/11 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python清除字符串前后空格函数的方法
2018/10/21 Python
python实现名片管理系统
2018/11/29 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
对python模块中多个类的用法详解
2019/01/10 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
房产公证委托书范本
2014/09/20 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
转学证明范本
2015/06/19 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python