<!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. 关于给gridSelect控件设置默认值

    给这个选择表格框添加默认值: <td class="form_label">                            客户名称:              ...

  2. 让你的IDEA倍爽

    使用IDEA开发有 一段时间了,从陌生到熟悉的过程算是很平稳的度过,感谢IntelliJ IDEA交流群(群号244908708)里面的群友对我提供的帮助,感谢群主的github上面提供的资料. 这篇 ...

  3. Travelling (三进制+状压dp)

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline ll read(){ ,f= ...

  4. PAT甲级——1098 Insertion or Heap Sort (插入排序、堆排序)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90941941 1098 Insertion or Heap So ...

  5. POJ1020 Anniversary Cake

    题目来源:http://poj.org/problem?id=1020 题目大意:有一块边长为s的正方形大蛋糕,有n个客人,每个客人想分一块边长为si的正方形蛋糕.求这块大蛋糕能否恰好满足所有客人的需 ...

  6. CentOS7.3下Zabbix3.5之邮件报警配置

    一.邮件客户端以及脚本相关配置 1.安装sendmail,一般操作系统默认安装了安装 yum install sendmail 启动 service sendmail start 设置开机启动 chk ...

  7. 一些有关PyCharm使用总结

    目前在这里,你能看见 license server Python版本配置 添加另外版本的Python 设置字体大小 关于编码 关于模版 安装好之后,第一个问题就是 license server 问题, ...

  8. 使用命令行+代理更新Android SDK

    在无桌面的Linux上面安装Jenkins,要配置成Andorid 的持续集成环境Jenkins持续集成Android项目,需要在无桌面的Linux(ubuntu,centos)上安装Android ...

  9. LeetCode 137 Single Number II 数组中除了一个数外，其他的数都出现了三次，找出这个只出现一次的数

    Given an array of integers, every element appears three times except for one, which appears exactly ...

  10. maven安装,使用说明,及maven Repository如何使用.

    maven的使用方法总结一下 1.首先去apache官网下载maven, http://maven.apache.org/download.cgi2.如果是windows系统,选择 apache-ma ...