首页
所有分类
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实现切换td中的值
Dec 05 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
详解puppeteer使用代理
Dec 27 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
德劲1107(1) PR-D3L(1) 上海永华(1) 华普R-96(1) ICF-SW100(1) 安健(1) A254(1) SRF-22W(1) YH-R296(1) SRF-40W(1)
You might like
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
JavaScript 自动分号插入（JavaScript synat:auto semicolon insertion）
2009/11/04 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jquery自定义表格样式
2015/11/23 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python调用C语言的实现
2019/07/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python操作gitlab API过程解析
2019/12/27 Python
pytorch 修改预训练model实例
2020/01/18 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python学习之os模块及用法
2020/06/03 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
教师节商场活动方案
2014/02/13 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
go xorm框架的使用
2021/05/22 Golang