<!--标签-->
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#tab1" role="tab" data-toggle="tab">Tab1</a>
</li>
<li>
<a href="#tab2" role="tab" data-toggle="tab">Tab2</a>
</li>
</ul>
<!--标签内容-->
<div class="tab-content">
<div class="tab-pane active" id="tab1">
tab1内容
</div>
<div class="tab-pane" id="tab2">
tab2内容
</div>
</div>

指定某个tab打开,可以加jquery:

<script type="text/javascript">
$(document).ready(function(){
$('a[href="#tab2"]').tab('show')
});
</script>

详情:http://v3.bootcss.com/components/#nav-tabs

Bootstrap标签Tabs的更多相关文章

  1. Bootstrap 标签页(Tab)插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  2. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  3. Bootstrap 标签

    本章将讲解bootstrap标签,标签可用于计数,提示和页面上其它的标记显示.使用class.laber来显示标签,如下面的实例所示 <!DOCTYPE html><html> ...

  4. Bootstrap 标签页和工具提示插件

    一.标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

  5. Bootstrap标签

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.用外链加载的方式可以将Bootstrap链接进来 常用方式: <link rel="stylesheet" ...

  6. 针对BootStrap中tabs控件的美化和完善

    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎.但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题.另外,Bootstrap中的tabs必 ...

  7. Bootstrap 标签的变体 实例样式

    Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...

  8. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  9. 使用bootstrap标签页

    关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <html lang="en"> &l ...

随机推荐

  1. 【CF24D】Broken Robot (DP+高斯消元)

    题目链接 题意:给定一个\(n\times m\)的矩阵,每次可以向→↓←移动一格,也可以原地不动,求从\((x,y)\)到最后一行的期望步数. 此题标签\(DP\) 看到上面这个肯定会想到 方法一: ...

  2. bzoj 1942 斜率优化DP

    首先我们贪心的考虑,对于某一天来说,我们只有3中策略,第一种为不做任何行动,这时的答案与前一天相同,第二种为将自己的钱全部换成a,b货币,因为如果换a,b货币,代表在之后的某一天卖出去后会赚钱,那么当 ...

  3. linux基础了解的学习记录

    一.文件结构图 linux的储存结构为文件树 二.绝对路径.相对路径.权限 1.绝对路径: /usr/local/include       在路径的最前面是 / 开头的 使用环境:当在当前路径下想到 ...

  4. hdu 5185(动态规划)

    Equation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  5. 删除某个ros包之后catkin_make冒错

    CMake Error at /home/ubuntu/Workspaces/rosProject/workspace1/devel/share/costmap_2d/cmake/costmap_2d ...

  6. 前端读者 | 别人写的css,你敢用吗?

    本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...

  7. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  8. SpringCloud Gateway(八)

    搭建SpringCloud Gateway 创建microservicecloud-springcloud-gateway-9528工程 pom文件 依赖: <dependencies> ...

  9. 并查集【p2700】逐个击破

    题目描述-->p2700 逐个击破 题意概括 花费最小的代价,使得一些有标记的节点不连通. 分析 我们需要花费最小代价使得原来连通的图中一些节点之间不相互连通. 贪心显然是可行的(一点也不显然 ...

  10. hiho一下第134周 1468 : 2-SAT·hihoCoder新春晚会

    1468 : 2-SAT·hihoCoder新春晚会 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder新春晚会正在紧张地筹备中.晚会分为上半场和下半场, ...