首页
所有分类
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 相关文章推荐
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
理解javascript中的with关键字
Feb 15 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 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
DE1102(1) WR-800F(1) R72E(1) ICOM(2) R9700(1) 对讲机(1) React(6) R71E(1) 胆机(1) GTX1660(1)
You might like
php csv操作类代码
2009/12/14 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP OPP机制和模式简介（抽象类、接口和契约式编程）
2014/06/09 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
vue中如何使用ztree
2018/02/06 Javascript
vue组件（全局，局部，动态加载组件）
2018/09/02 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
VUE+node（express）实现前后端分离
2019/10/13 Javascript
react的hooks的用法详解
2020/10/12 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python aiohttp的使用详解
2019/06/20 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python3跳出一个循环的实例操作
2020/08/18 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Volcom英国官方商店：美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Douglas意大利官网：购买香水和化妆品
2020/05/27 全球购物
英国名牌男装店：Standout
2021/02/17 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
贫困证明模板（3篇）
2014/09/16 职场文书
护士先进个人总结
2015/02/13 职场文书
九年级数学教学反思
2016/02/17 职场文书
《鲸》教学反思
2016/02/23 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js