首页
所有分类
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 26 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
js倒计时抢购实例
Dec 20 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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
python小游戏(5) cvzone(1) 贪吃蛇(2) 备份(2) 索引(8) SnakeGame(1) 计算机视觉(2) 索尼ICF-36(1) 德生2P3(1) mediapipe(1)
You might like
一个捕获函数输出的函数
2007/02/14 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP命名空间（Namespace）简明教程
2014/06/11 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
英文简历自荐信范文
2013/12/11 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
阿甘正传观后感
2015/06/01 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL