首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Posted in Javascript onDecember 08, 2016

Bootstrap可以很轻松就实现标签切换的效果。

0x01 样式1

基本样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li><a href="#New" data-toggle="tab">新 闻</a></li>
   <li><a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <!--标签页内容-->
  <div class="tab-content">
   <div class="tab-pane active in fade" id="Home">
    <div class="page-header">
     <h1>首页</h1>
    </div>
    <p>我是首页我是首页我是首页我是首页我是首页我是首页</p>
   </div>
   <div class="tab-pane fade" id="New">
    <div class="page-header">
     <h1>新闻</h1>
    </div>
    <p>我是新闻我是新闻我是新闻我是新闻我是新闻我是新闻</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h1>关于</h1>
    </div>
    <p>我是关于我是关于我是关于我是关于我是关于我是关于</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之标签切换(17)

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

0x02 样式2

下面是带有下拉菜单的标签切换样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li class="dropdown" data-toggle="tab">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     新 闻
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#Tiyu" data-toggle="tab">体育新闻</a></li>
     <li><a href="#Yule" data-toggle="tab">娱乐新闻</a></li>
    </ul>
   </li>
   <li> <a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <div class="tab-content">
   <div class="tab-pane fade in active" id="Home">
    <div class="page-header">
     <h3>网站首页</h3>
    </div>
    <p>网站首页网站首页网站首页网站首页网站首页网站首页网站首页网站首页</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h3>关于</h3>
    </div>
    <p>关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于</p>
   </div>
   <div class="tab-pane fade" id="Tiyu">
    <div class="page-header">
     <h3>体育</h3>
    </div>
    <p>体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育</p>
   </div>
   <div class="tab-pane fade" id="Yule">
    <div class="page-header">
     <h3>娱乐</h3>
    </div>
    <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之标签切换(17)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

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

Bootstrap基本插件学习笔记之标签切换(17)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
ES6新特性七：数组的扩充详解
Apr 21 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 #Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js：理解stream
Dec 08 #Javascript
限速(1) update(2) 备份(2) 递归(1) tcp/ip(1) 内置模块(1) 数据库卡死(1) IP(1) 全局锁(1) 限流(2)
You might like
php的memcached客户端memcached
2011/06/14 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
javascript闭包的理解
2015/04/01 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
python监控键盘输入实例代码
2018/02/09 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python 两个数据库postgresql对比
2019/10/21 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
python自动化发送邮件实例讲解
2021/01/04 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
澳大利亚礼品卡商店：Gift Card Store
2019/06/24 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
超市开店计划书
2014/09/15 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
python b站视频下载的五种版本
2021/05/27 Python