bootstrap tab页
---恢复内容开始--- <!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body> <div class="container">
<h2>选项卡切换</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu </a>
</li>
</ul> <!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu </h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu </h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div> </body>
</html>-- ---恢复内容结束--- <!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body> <div class="container">
<h2>选项卡切换</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu </a>
</li>
</ul> <!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu </h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu </h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div> </body>
</html>--
bootstrap tab页的更多相关文章
- bootstrap Tab页切换
<ul class="nav nav-tabs" id="otherInfoTab"> <li class="active" ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- Bootstrap 标签页（Tab）插件
摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...
- Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页
先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...
随机推荐
- Linux VNC客户端软件VNC Viewer | RealVNC
Linux很多时候是作为服务器操作系统,如果是桌面系统通常情况会远程管理linux服务器,很多时候通过VNC进行远程管理,这个时候就要在客户端安装VNC客户端软件,VNC Viewer | RealV ...
- js中split,splice,slice方法之间的差异。
首先我们先来林格斯双击翻译一下: split 劈开, 使分裂: splice 接合; 使结合: slice 切成薄片, 切: 我先是这么区分的:这三个方法最后一个字母是t的是字符串方法,是e的 ...
- 使用 docker 安装多版本的 MySQL
原文:使用 docker 安装多版本的 MySQL 首先从 docker 官网下载安装 docker. 检查 docker 安装是否成功,出现类似下面的信息就是安装好了 $ docker versio ...
- oracle 正序 逆序 排序查询
正序:从小到大 order by t.id asc 逆序:从大到小 order by t.id desc
- this对象的理解
(回答一:) (1).js的this指向是不确定的,也就是说是可以动态改变的.call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高 (2).this 一般情况下 ...
- 【Henu ACM Round#18 D】Looksery Party
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 假设现在每个人收到的信息条数存在cnt里面 那个人猜的条数为target 则如果cnt[i]==target[i] 则我们就让第i个 ...
- SYSU 6356 Dispatching
Dispatching Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on SYSU. Original ...
- 学一下gconv, gprof等知识
scons.gcc.gdb.valgrind.gcov SCons 是一个用 Python 语言编写的类似于 make 工具的程序.与 make 工具相比较,SCons 的配置文件更加简单清晰明了. ...
- leetcode第一刷_Rotate List
我提交了好多次,错误莫名其妙的,到后来才明确过来.原来我把题目给理解错了. 这个题的意思不是说让你把最后的那k个位置的元素移到前面来,这样的问题的做法就是用两个指针,先让一个走.走到一定的长度之后两个 ...
- Java编程思想(四) —— 复用类
看了老罗罗升阳的专訪,不由自主地佩服,非常年轻,我之前以为和罗永浩一个级别的年龄.也是见过的不是初高中编程的一位大牛之中的一个,专訪之后.发现老罗也是一步一个脚印的人. 别说什么难做,做不了.你根本就 ...