首页
所有分类
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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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
cypress(1) ant design(2) form表单(1) 变量提升(1) JOIN(1) pdf(1) 缓冲区(1) json_extract(1) Eclipse(1) 弹窗(1)
You might like
Re：从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php park、unpark、ord 函数使用方法（二进制流接口应用实例）
2010/10/19 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php定界符
2014/06/19 PHP
php中return的用法实例分析
2015/02/28 PHP
php自定义urlencode，urldecode函数实例
2015/03/24 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
Python中的__slots__示例详解
2017/07/06 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
集体婚礼策划方案
2014/02/22 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年新教师工作总结
2015/04/28 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis