bootstrap 选项卡的使用
1.页面中的tab
在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图
就直接使用了bootstrapd的选项卡
学习源头:
http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html
<!--图表信息 -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#zfbt" data-toggle="tab">
支付成功订单数量
</a>
</li>
<li><a href="#cjbt" data-toggle="tab">总计成交金额</a>
</li><li><a href="#pvbt" data-toggle="tab">PV</a></li>
</li><li><a href="#uvbt" data-toggle="tab">UV</a></li>
</ul>
<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
<div class="tab-pane fade in active" id="zfbt">
<div id="zf" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="cjbt">
<div id="cj" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="pvbt">
<div id="pv" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="uvbt">
<div id="uv" style="width: 1688px;height:400px;"></div>
</div>
</div>
2.弹窗中的tab
学的时候翻看到了layer的 tab层
//tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
bootstrap 选项卡的使用的更多相关文章
- Bootstrap选项卡
前面的话 选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍Bootstrap选项卡 基本用法 Bootstrap框架中的选项卡主要有两部分内容组成: 1 ...
- echarts之bootstrap选项卡不能显示其他标签echarts图表
在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...
- bootstrap选项卡页面中如何关闭当前选项卡及页面
再具体说一下现在的需求: 如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭 实现思路: 1)关闭选项卡对应的页面 2)去除上方选项卡 3)激活前一 ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- bootstrap如何设置每一个选项卡对应一个页面
bootstrap选项卡如果直接在每一个选项div中直接插入页面,可以使用<object type="text/html" data="test.html" ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- Bootstrap学习目录
前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...
- 前端之移动端库和框架bootstrap
学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...
- 解决Bootstrap标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
随机推荐
- oracle角色、权限和用户
oracle角色.权限和用户 [转贴 2010-1-25 10:29:45] 字号:大 中 小 Oracle内置角色connect与resource的权限 首先用一个命令赋予user用户con ...
- [转]web服务器压力测试工具
http_load学习心得: 测试网站每秒所能承受的平均访问量(吞吐量) http_load -parallel 5 -fetches 1000 urls.txt这段命令行是同时使用5个进程,随机访问 ...
- TabBarController和其他view无法建立Relationship segue的原因
拖拽怎么也没有那个出现,最后看sourcecode发现是那个那个viewcrontroler的XML 元素不是TabBarController.在Sourcecode里面改了一下,解决了这个问题. 总 ...
- 几大时尚前端UI框架的IE支持
这个文章的Topic比较符合我们这些身在Stone Age用户环境中的开发者所考虑的因素 1.先说目前最火最酷的:Semantic-UI 目前版本:0.17.0 Browser Support Las ...
- Linux 命令行输入
这几天刚刚接触到Linux,在windows上安装的VMWare虚拟机,Centos7.安装什么都是贾爷和办公室的同事帮忙搞定的. 在虚拟机界面,按快捷键Ctrl+Alt+Enter,可以全屏显示Li ...
- 深入理解javascript 匿名函数和闭包
代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其 ...
- 基于分支限界法的旅行商问题(TSP)二
和上篇一样,考前写写伪代码,考完了补上具体的解释和代码. 状态{矩阵,结果集,下界} 全局结果集列表,全局上界初始为Infinite 建立一个heap,存储状态,出堆规则为拥有最小的下界. 利用red ...
- oozie: GC overhead limit exceeded 解决方法
1.异常表现形式 1) 提示信息 Error java.lang.OutOfMemoryError: GC overhead limit exceeded 2)提示出错 Erro ...
- Effective C++ 读书笔记(13-32)
条款一十三:以对象管理资源 1.把资源放进对象内,我们便可依赖C++的“析构函数自动调用机制“确保资源被释放. 2.auto_ptr是个”类指针对象“,也就是所谓”智能指针“,其析构函数自动对其所指对 ...
- vue中keep-alive的用法
1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...