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个精彩的专题:

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

Javascript 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
运动检测ViBe算法python实现代码
2018/01/09 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python中url标签使用知识点总结
2020/01/16 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
考试退步检讨书
2014/01/15 职场文书
文秘求职信范文
2014/04/10 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS