首页
所有分类
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 相关文章推荐
非常好的js代码
Jun 27 Javascript
在Javascript中定义对象类别
Dec 22 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
FF（火狐）浏览器无法执行window.close()解决方案
Nov 13 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
Aug 28 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
Selenium(1) 短信验证码(1) dockerfile(1) reduce(2) Tsmoothie(1) GoFrame(3) pytz(1) SQLite3(1) 分布式锁(3) filter(1)
You might like
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
javascript修改IMG标签的src问题
2014/03/28 Javascript
Javascript基础知识（二）事件
2014/09/29 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
javascript控制台详解
2015/06/25 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Js代码中的span拼接问题解决
2019/11/22 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python生成器推导式用法简单示例
2019/10/08 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python中with用法讲解
2020/02/07 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python修改DBF文件指定列
2020/12/19 Python
10条PHP编程习惯
2014/05/26 面试题
do you have any Best Practice for testing
2016/06/04 面试题
优秀员工自荐书
2013/12/19 职场文书
小学二年级评语
2014/04/21 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
反对邪教标语
2014/06/30 职场文书
幼儿生日活动方案
2014/08/27 职场文书
SQL Server中使用判断语句（IF ELSE/CASE WHEN ）案例
2021/07/07 SQL Server
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL