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 ...
随机推荐
- 服务器无法远程管理客户端”计算机配置"解决方法
1.确认是否可ping 通 如无法ping通, 在入门规则中找到“文件和打印机共享(回显请求-ICMPv4-In)”,设定为启用(配置文件为:域) 2. 打开139端口 1.2在防火墙中设置如下:
- 网络爬虫与web之间的访问授权协议——Robots
网站的管理者们通常会有这样一种心态:一方面期待百度.Google这样的搜索引擎来抓取网站的内容,另一方面又很厌恶其他来路不明的网络爬虫抓取自己的信息.正是因为这样,才有“好爬虫”.“坏爬虫”这样的说法 ...
- vuex 快速入门( 基于vue2.0,vue1.0未知可否)
1.原理概述 2.用户登录例子解析: 由上图可以看到: 1.组件的数据是username,我们把它以name放在state中: 2.更改name发生在mutations的回调里,事件名字是showUs ...
- PatentTips - System and method to deprivilege components of a virtual machine monitor
BACKGROUND INFORMATION An embodiment of the present invention relates generally to virtualization pl ...
- 为什么我们须要复杂的password
前两天我打开邮箱一看.收到公司1331一封要求改动邮箱password的邮件. 为什么我们须要一个复杂的password呢?尽管我一直以来设置的password都非常复杂.可是公司这次要求改动pass ...
- PostgreSQL递归查询实现树状结构查询
在Postgresql的使用过程中发现了一个非常有意思的功能,就是对于须要相似于树状结构的结果能够使用递归查询实现.比方说我们经常使用的公司部门这样的数据结构.一般我们设计表结构的时候都是相似以下的S ...
- json和XML
发请求(url) 1.client ---------------->服务端 发送数据(Json/xml) < - ...
- C#加减乘除
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- sublime 支持 vue 语法
具体步骤如下: 1.如果你没安装Package Control,请先安装,安装方法请自行百度.安装OK后,接下来步骤请参考第2步即可. 2.如果你已经安装过Package Control,安装vue高 ...
- google dataflow model 论文
http://www.chinacloud.cn/show.aspx?id=24446&cid=17