首页
所有分类
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获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
每天一篇javascript学习小结（Function对象）
Nov 16 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
JavaScript Promise 用法
Jun 14 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
Sep 03 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
巴基斯坦购物网站(2) 乌克兰购物网站(27) 越南购物网站(9) 马耳他购物网站(1) 罗马尼亚购物网站(10) 北美洲购物网站(1) 缅甸购物网站(1) 摩纳哥购物网站(1) 亚洲购物网站(6) 希腊购物网站(6)
You might like
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
从零学习node.js之简易的网络爬虫（四）
2017/02/22 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python中的随机函数random的用法示例
2018/01/27 Python
python yield关键词案例测试
2019/10/15 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
美国领先的商务贺卡出版商：The Gallery Collection
2018/02/13 全球购物
最好的商品表达自己：Cafepress
2019/09/04 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
计算机应用专业毕业生求职信
2013/10/24 职场文书
英语教师岗位职责
2014/03/16 职场文书
会计学专业求职信
2014/07/17 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
python requests模块的使用示例
2021/04/07 Python
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS