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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 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
php5 mysql分页实例代码
2008/04/10 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python能否java成为主流语言吗
2020/06/22 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
苦儿流浪记读书笔记
2015/07/01 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers