基于Bootstrap的网页开发
Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。Bootstrap是移动设备优先的，它针对移动设备的样式融合了框架的每个角落，使得只需要通过简单的代码，便可以实现漂亮的响应式布局。备注：使用的初始化css文件是normalize.css；
1、基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
温馨提示：
（1）上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！
（2）html5shiv.js 和 respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 ，用条件注释的方式引用。
（3）Bootstrap中的js插件依赖于jQuery，因此jQuery要在Bootstrap之前引用。
2、导航条
（1）导航条依赖JavaScript，响应式导航条依赖折叠collapse插件
（2）添加.navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给body元素设置padding。导航条的默认高度是50px，比如设置body{padding-top:70px;}可以包含一个.container或.container-fluid容器，从而让导航条居中或者自适应。
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<!--导航条logo及小屏幕图标-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">浏览器库</a>
</div>
<!--导航条logo及小屏幕图标-->
<!--导航条中导航栏目列表-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">综述</a>
</li>
<li>
<a href="#">简述</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">谷歌</a></li>
<li><a href="#">火狐</a></li>
<li><a href="#">欧朋</a></li>
<li><a href="#">苹果</a></li>
<li class="divider"></li>
<li><a href="#">IE</a></li>
</ul>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div>
<!--导航条中导航栏目列表-->
</div>
</nav>
注意：可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选样式。
3、滚动广告Carousel
Carousel是一个用于轮播内容的组件，也就是我们经常用到的滚动广告，或者滚动图片。一个Carousel基本结构：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
4、三栏布局
行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中。
使用 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的，在桌面（>970px）屏幕设备上变为水平排列。代码简写：div.container.summary>div.row#summary-container>div.col-md-4*3
<div class="container summary">
<div class="row" id="summary-container">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
5、标签页Tabs
标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。
标签
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
标签页内容
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
注意：无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab"，为ul添加nav和nav-tabs class。另外，注意标签页和标签页内容id属性的对应关系。
5、弹出框（模态框）Modal
弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单信息，表单内容。结构包括：modal-header、modal-body、modal-footer三部分。
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
注意：点击的标签部分需要设置和modal弹出框相同的id属性，以便于在多个弹出框中，弹出对应的弹出框。
6、菜单定位及总结
