<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<!--[if lt IE 9]-->
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<!--[endif]-->
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />

</head>
<body>
<div class="container"style="padding:50px">
<ul class="nav nav-tabs"role="tablist"id="feature-tab">
<li class="active"><a href="#tab-chrome"data-toggle="tab"role="tab">Chrome</a></li>
<li><a href="#tab-firefox"data-toggle="tab"role="tab">Firefox</a></li>
<li><a href="#tab-safari"data-toggle="tab"role="tab">Safari</a></li>
<li><a href="#tab-opera"data-toggle="tab"role="tab">Opera</a></li>
<li><a href="#tab-ie"data-toggle="tab"role="tab">IE</a></li>
</ul>
<div class="tab-content">
<div id="tab-chrome" class="tab-pane active">
<div class="row feature">
<div class="col-md-7">
<h2 class="featurette-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 src="Images/chrome-logo.jpg"alt="chrome-logo" />
</div>
</div>
</div>
<div id="tab-firefox" class="tab-pane">
<div class="row feature">
<div class="col-md-7">
<h2 class="featurette-heading">Mozilla Firefox<sap class="text-muted">美丽的狐狸</sap></h2>
<p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
</div>
<div class="col-md-5">
<img src="Images/firefox-logo.jpg"alt="firefox-logo" />
</div>
</div>
</div>
<div id="tab-safari" class="tab-pane">
<div class="row feature">
<div class="col-md-7">
<h2 class="featurette-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 src="Images/safari-logo.jpg"alt="safari-logo" />
</div>
</div>
</div>
<div id="tab-opera" class="tab-pane">
<div class="row feature">
<div class="col-md-7">
<h2 class="featurette-heading">Opera<span class="text-muted">小众但易用</span></h2>
<p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
</div>
<div class="col-md-5">
<img src="Images/opera-logo.jpg"alt="opear-logo" />
</div>
</div>
</div>
<div id="tab-ie"class="tab-pane">
<div class="row feature">
<div class="col-md-7">
<h2 class="featurette-heading">IE<span class="text-muted">对新的Html5元素兼容性不是很好，你懂的。</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 src="Images/ie-logo.jpg"alt="ie-logo" />
</div>
</div>
</div>
</div>

</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：响应式标签页的更多相关文章

  1. bootstrap下拉框式标签页

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...

  2. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  4. Bootstrap历练实例：标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  6. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  7. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  8. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  9. Bootstrap历练实例：标签修饰

    您可以使用修饰的 class label-default.label-primary.label-success.label-info.label-warning.label-danger 来改变标签 ...

随机推荐

  1. 牛客 PUBG

    题目链接:点击打开链接 题目大意:跑毒,跑到安全区,每个地方有敌人,输出路线经过的最少敌人的数量:-1是起点. -2是安全区 输入 5 6 6 0 -2 3 4 2 1 2 1 2 2 8 9 7 8 ...

  2. mysql执行计划 const eq_ref ref range index all

    explain:查询查询性能或者需要查看使用索引状态 一.type:连接类型  最关键的一列  效率(const>eq_ref>ref>range>index>all) ...

  3. mediawiki登录时第一次会跳回登录页面，第二次才能登录成功

    原因是:LocalSetting.php中的$wgServer属性使用的是ip,改为域名后成功解决问题 补充:改为域名后使用ip访问会出现第一次登录跳回登录界面的情况,应该根据实际情况来设置$wgSe ...

  4. 四，JVM 自带工具之jvisualvm

    http://www.ibm.com/developerworks/cn/java/j-lo-visualvm/index.html?ca=drs- https://visualvm.java.net ...

  5. Angular 8 发布

    原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ec ...

  6. Eclipse下git如何创建分支

    1.项目–Team–Switch To –New Branch 2.Branch name 填写自己的版本号,然后Finish即可 3.将分支内容Push到远程服务器上

  7. java关于类的构建

    一开始老是把类的构建和代码的重构搞的混淆,现在理解的可能还好点(至少概念上不会出错了),简单的说类就是一个复杂的变量,这个变量里面含有属性.方法和构造方法,注意方法和构造方法是完全不同的两个概念,而且 ...

  8. 从零开始的全栈工程师——js篇2.11（原型）

    原型 原型分析 1.每个 函数数据类型(普通函数,类)都有一个prototype属性 并且这个属性是一个对象数据类型2.每个Prototype上都有一个constructor属性 并且这个属性值是当前 ...

  9. This is your path and you will pursue it with excellence.

    This is your path and you will pursue it with excellence.自己选的路就要走出精彩.

  10. FMCW 雷达原理（转）

    FMCW(Frequency Modulated Continuous Wave),即调频连续波.FMCW技术和脉冲雷达技术是两种在高精度雷达测距中使用的技术.其基本原理为,发射波为高频连续波,其频率 ...