Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.bg_main {
height: 100%;
width: 100%;
background: gray;
margin: 0 auto;
}
.bg_left {
position: relative;
top: 3.5%;
left: 2.5%;
float: left;
width: 15%;
height: 85%;
background: #404040;
color: white;
} .bg_body {
position: relative;
top: 3.5%;
left: 2.5%;
float: left;
width: 80%;
height: 85%;
background: green;
color: white;
display: flex;
align-items: center;
justify-content: center; }
</style>
</head>
<body>
<div class="bg_main">
<div class="bg_left">
<ul class="nav nav-pills nav-stacked" style="width: 100%;">
<li class="active"><a href="#home" data-toggle="tab">检测1</a></li>
<li><a href="#profile" data-toggle="tab">检测2</a></li>
<li><a href="#haha" data-toggle="tab">检测3</a></li>
</ul>
</div>
<div class="bg_body">
<div class="tab-content" style="float: left; height: 90%;width: 90%; background: gray;">
<div class="tab-pane active" id="home">检测1内容 </div>
<div class="tab-pane" id="profile">检测2内容</div>
<div class="tab-pane" id="haha">检测3内容</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
运行效果:
Bootstrap——设置Tab标签切换的更多相关文章
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
分页菜单(分段菜单)在许多 App 上都会用到.比如大多数新闻 App,如网易新闻.今日头条等,顶部都有个导航菜单.这个导航菜单是一组标签的集合,每个标签表示一个新闻类别,我们点击这个标签后下面就会切 ...
- JavaScript CSS 实现简单的 TAB 标签切换
使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换. 如鼠标放置到shwww时 ...
随机推荐
- Dart编程变量
变量是"存储器中的命名空间",用于存储值.换句话说,它作为程序中值的容器.变量名称称为标识符.以下是标识符的命名规则 - 标识符不能是关键字. 标识符可以包含字母和数字. 标识符不 ...
- JZOJ5143:无心行挽
Description “What’s left to do when we’ve lost all hope?”“若内心万念俱灰,是否注定无心行挽?”------来自网易云音乐<Golden ...
- 兼容火狐浏览器的select下拉框样式
经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...
- HAOI 2006 受欢迎的牛 (洛谷2341)
题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的"喜欢"是可以传递的--如果A喜 欢B,B喜 ...
- 数学相关比较 牛顿迭代法求开方 很多个n的平方分之一
牛顿迭代法求开方 牛顿迭代法 作用: 求f(x) = 0 的解 方法:假设任意一点 x0, 求切线与x轴交点坐标x1, 再求切线与x轴交点坐标x2,一直重复,直到f(xn) 与0的差距在一个极小的范围 ...
- 关于resin的一个错误,Resin 启动报错,访问页面500
背景 客户集成javaagent报错,客户用的是resin,在本地复现问题,修改了bug,其中在resin中发布war包遇到的错误. 完整错误 500 [show] WEB-INF/web.xml:5 ...
- XStream入门应用程序
在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...
- servlet的xml配置详解
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns ...
- 如何优雅的使用Objects.requireNonNull(T obj, String message)定制你的NPE异常
IDEA中习惯跟踪源码实现逻辑,多次碰到Objects.requireNonNull(T obj)这个方法,改方法主要用于提早判断对象是否为空,以便更早的抛出NPE 平时小组开发中强调程序健壮性,不允 ...
- 我写的界面,在ARM上跑
这个...其实,我对ARM了解并不多,我顶多也就算是知道ARM怎么玩,EMMC干啥,MMU干啥,还有早期的叫法,比如那个NorFlash NandFlash ,然后也就没啥了. 然后写个裸机什么的,那 ...