BootStrap便签页的简单应用
效果图如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签页</title>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.container{
padding: 50px;
text-align: center;
}
.feature {
padding: 30px 0;
}
.feature-heading {
font-size: 50px;
color: #2a6496;
margin-top: 120px;
}
.text-muted {
font-size: 28px;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist" id="feature-tab">
<li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
<li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-chrome">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">Google Chrome <span
class="text-muted">使用最广的浏览器</span></h2>
<p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/chrome-logo.jpg"
alt="Chrome">
</div>
</div>
</div>
<div class="tab-pane" id="tab-firefox">
<div class="row feature">
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/firefox-logo.jpg"
alt="Firefox">
</div>
<div class="col-md-7">
<h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>
</h2>
<p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab-safari">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2>
<p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
</div>
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/safari-logo.jpg"
alt="Safari">
</div>
</div>
</div>
<div class="tab-pane" id="tab-opera">
<div class="row feature">
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/opera-logo.jpg"
alt="Opera">
</div>
<div class="col-md-7">
<h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span>
</h2>
<p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab-ie">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2>
<p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
Explorer(7，8，9，10版本)，
简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
</div>
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/ie-logo.jpg"
alt="IE">
</div>
</div>
</div>
</div>
</div>
<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script>
<script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
以上所述是小编给大家介绍的BootStrap便签页的简单应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
主要内容：用法,淡入淡出效果,实例,方法,实例,事件,实例标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。 如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min
-
如您希望快速搭建属于您的GIS服务器，打造简单的平台来实现GIS信息展示、查询等功能，您可以购买云主机作为您的服务器，结合云分析API和云存储API服务进行二次开发。 如您希望在不搭建GIS服务器的条件下快速拥有GIS服务能力，SuperMap Online提供以租代买的方式搭建专属GIS服务器。基于云存储，您可以便捷地上传数据和发布服务。同时结合为您提供的云分析API和云存储API服务进行二次开
-
下边的程序在端口8088上启动了一个网页服务器；SimpleServer会处理/test1url使它在浏览器输出hello world。FormServer会处理/test2url：如果url最初由浏览器请求，那么它就是一个GET请求，并且返回一个form常量，包含了简单的input表单，这个表单里有一个文本框和一个提交按钮。当在文本框输入一些东西并点击提交按钮的时候，会发起一个POST请求。Fo
-
本文向大家介绍浅析BootStrap Treeview的简单使用，包括了浅析BootStrap Treeview的简单使用的使用技巧和注意事项，需要的朋友参考一下 bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。 废话不多说，直接上干干货。 1、bootstrap-treeview Github网址： https:/
-
本文向大家介绍jQuery实现简单的tab标签页效果，包括了jQuery实现简单的tab标签页效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现简单的tab标签页效果。分享给大家供大家参考，具体如下： 运行效果图如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结
-
本文向大家介绍bootstrap导航栏、下拉菜单、表单的简单应用实例解析，包括了bootstrap导航栏、下拉菜单、表单的简单应用实例解析的使用技巧和注意事项，需要的朋友参考一下 制作效果图如下： 代码如下（以后做东西可以改改就能直接用）： 以上所述是小编给大家介绍的bootstrap导航栏、下拉菜单、表单的简单应用实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。