<!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. 当重装eclipse后，给现有web项目添加tomcat的构建路径

    在eclipse“首选项”-“service environment”中配置好tomcat后,给现有web项目添加构建路径: 1.选中一个web项目右键选中“构建路径”-“配置构建路径”

  2. Java中的生产者和消费者实例（多线程 等待唤醒机制）

    1.什么是等待唤醒 我们实现的效果 创建生产者和消费者  对服装进行生产  和售卖 实现生产一个就消费一个 来观察线程的各种状态 下面是用到的方法: wait()方法:让一个线程进行等待 另外一个线程 ...

  3. 通过ps给透明通道的图片添加灰度（适用于需要兼容IE7，效果很好）

    原始的图片是这样的 第一步: 第二步: 第三步: 第四步: 更多(文字居中): 1: 2: 3: 4:

  4. AngularJS模块——module

    angular.module('myApp',[]) 1.定义模块 2.第一个参数:定义的模块名: 3.第二个参数:依赖列表,也就是可以被注入到模块中的对象列表:依赖的这些模块需要在本模块加载之前由注 ...

  5. Luogu P2391 白雪皑皑 && BZOJ 2054: 疯狂的馒头 并查集

    4月的时候在luogu上做过 白雪皑皑 这道题,当时一遍AC可高兴了qwq,后来去了个厕所,路上忽然发现自己的做法是错的qwq...然后就咕咕了qwq 今天看到了 疯狂的馒头 ,发现一毛一样OvO.. ...

  6. python_魔法方法(二)：算术运算

    python2.2之后,对类和类型做了同意,将int().float().str().list().touple()这些BIF转换为工厂函数 >>> type(len) <cl ...

  7. mycat1.6.5分片（字符串拆分hash）

    https://blog.csdn.net/webnum/article/details/78313525   分片规则:字符串拆分hash 一.conf/schema.xml文件   <?xm ...

  8. LeetCode 024 Swap Nodes in Pairs 交换链表中相邻的两个节点

    Given a linked list, swap every two adjacent nodes and return its head.For example,Given 1->2-> ...

  9. (转)linux内核参数注释与优化

    linux内核参数注释与优化 原文:http://blog.51cto.com/yangrong/1321594 http://oldboy.blog.51.cto.com/2561410/13364 ...

  10. (转) Linux命令学习手册-arp命令

    arp 原文:http://blog.chinaunix.net/uid-9525959-id-3318814.html [功能] 管理系统的arp缓存. [描述] 用来管理系统的arp缓存,常用的命 ...