Bootstrap 轻松实现选项卡
来源:互联网 发布:路径规划仿真软件 编辑:程序博客网 时间:2024/05/22 01:28
轻松实现选项卡切换想过,不需要编辑复杂的javascript代码就可轻松实现。
来看看吧,自需要使用Bootstrap中的javascript插件(标签页),即可轻松实现。
演示地址:https://haochn.github.io/BootStrap/TabPanes.html
源代码:
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 轻松实现选项卡</title><style>.body { display: block; margin-left: auto; margin-right: auto; float: none; width:800px;}.content { padding-top:50px; height:200px; border:1px solid #ddd; border-top:0;}</style><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="js/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="js/bootstrap.min.js"></script> </head> <body><div class="body"> <h1 class="text-center">Bootstrap 轻松实现选项卡</h1> <!-- 导航标签 --><ul class="nav nav-tabs" role="tablist"> <!-- 默认标签 --> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">春风</a></li> <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">烈阳</a></li> <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">晚秋</a></li> <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">冬雪</a></li></ul> <!-- 选项卡内容 --><div class="tab-content"> <!-- 默认显示内容 --> <div role="tabpanel" class="tab-pane active" id="home"> <p class="text-center content">春风如醇酒,著物物不知。</p> </div> <div role="tabpanel" class="tab-pane" id="profile"> <p class="text-center content">烈日炎炎似火烧,野田禾稻半枯焦。</p> </div> <div role="tabpanel" class="tab-pane" id="messages"> <p class="text-center content">空山新雨后,天气晚来秋。</p> </div> <div role="tabpanel" class="tab-pane" id="settings"> <p class="text-center content">忽如一夜春风来,千树万树梨花开。</p> </div></div></div> </body></html>
自己动手试试吧!
0 0
- Bootstrap 轻松实现选项卡
- Bootstrap tabs选项卡实现
- Div+CSS+JQuery轻松实现选项卡"选项卡"
- bootstrap选项卡效果
- Bootstrap Js选项卡
- bootstrap选项卡
- 图片无缝滚动BootStrap 轻松实现
- Bootstrap-table:轻松实现多层表头
- bootstrap 左侧横向选项卡
- Bootstrap 选项卡和面板
- bootstrap之Tab选项卡
- Bootstrap动态切换选项卡
- bootstrap的tab选项卡
- 轻松控制EasyUI-Tab选项卡
- 使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;
- bootstrap实现标签页,鼠标滑过激活当前选项卡。
- bootstrap的选项卡和选项卡的内容
- bootstrap的选项卡和选项卡的内容
- 第八周作业——三色球问题
- 浅拷贝和深拷贝
- SurfaceView
- MySQL语法复习--触发器与事件
- leetcode344: Reverse String
- Bootstrap 轻松实现选项卡
- linux网络编程之socket(六):利用recv和readn函数实现readline函数
- Codeforces 711D Directed Roads【Dfs+思维】
- java中的正则表达式
- linux两个版本 php命令使用其中一个版本运行
- 第八周-OJ-D小球自由下落
- 蚂蚁爬杆问题 UVA 10881
- 回文字符串
- VIEWGROUP