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选项卡整合的时候,默认 ...
随机推荐
- 如何安装Pycharm官方统计代码行插件
最近一直想统计Pycharm的总计代码行数,找到了官方的统计行数插件,发现效果还不错. 官方代码统计插件指导: https://plugins.jetbrains.com/plugin/4509-st ...
- 初识Java——循环语句
循环语句就是在一定条件下反复执行某一个操作.具体有三种方法实现: 1while循环语句 while语句也称作条件判断语句,它的循环方式为利用一个条件来控制是否要反复执行.语法如下: while(条件语 ...
- P3370 【模板】字符串哈希
题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. 输入输出格式 输入格式: 第一行包含一个整数N,为字符串 ...
- vfd折腾(一)
从一开始驱动一块翻出来的液晶显示屏就想做一个电子时钟,偶然翻到了vfd(Vacuum Fluorescent Display的缩写,意为真空荧光显示屏). 此后就走上了不归路
- Invoke-ASCmd 部署SSAS database
Install-Module -Name SqlServer -RequiredVersion 21.0.17099 -AllowClobberInvoke-ASCmd -Server 10.162. ...
- EF Linq中的左连接Left Join查询
linq中的join是inner join内连接,就是当两个表中有一个表对应的数据没有的时候那个关联就不成立. 比如表A B的数据如下 from a in A join b in B on a.BId ...
- hadoop is running beyond virtual memory limits问题解决
单机搭建了2.6.5的伪分布式集群,写了一个tf-idf计算程序,分词用的是结巴分词,使用standalone模式运行没有任何问题,切换到伪分布式模式运行一直报错: hadoop is running ...
- vue UI库iview源码解析(2)
上篇问题 在上篇<iview源码解析(1)>中的index.js 入口文件的源码中有一段代码有点疑惑: /** * 在浏览器环境下默认加载组件 */ // auto install if ...
- HBuilder 打包流程
1.运行HBuilder---百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe.注册账号,并登陆 2.新建app---在左边右键,选择新建APP,或者,点击中间的新建app ...
- Springboot 框架学习
Springboot 框架学习 前言 Spring Boot是Spring 官方的顶级项目之一,她的其他小伙伴还有Spring Cloud.Spring Framework.Spring Data等等 ...