一、html5
1.Bootstrap使用了Html元素和CSS属性。因此，需要使用Html5文档类型（doctype）。所以，要在bootstrap项目中加如下代码：
<!DOCTYPE html>
<html>
....
</html>
如果不适用上述代码，可能会出现浏览器显示相关的一些问题。
二、移动设备
1.?移动设备优先是 Bootstrap 3 的最显著的变化。
2.Bootstrap 3 的设计目标是移动设备优先，其次才是桌面设备。
3.为了确保在移动设备中适当的绘制和触屏缩放，需要在网页的 head 之中添加?viewport meta?标签，如：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
1）width=device-width : 确保网页在不同屏幕分辨率的设备上正常显示。
2）initial-scale=1.0 :保证网页加载时，以 1:1 的比例呈现，没有有任何缩放。
3）在移动设备浏览器上，通过为??viewport meta?标签添加
?user-scalable=no?
可以禁用其缩放（zooming）功能。
4）通常，maximum-scale=1.0?与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像应用。相关代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
***注意，这种方式我们并不推荐所有网站使用，具体视情况而定！
三、图像
1.通过添加?img-responsive?class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。
<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
1）height：auto; max-width: 100%; ? ?图像按比例缩放，不超过其父元素的尺寸。
2)display: inline-block; ? ??元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
3)height:auto，相关元素的高度取决于浏览器。
4)max-width?为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
四、布局和链接
1. body {margin: 0;}?：去除body的边距
2. 排版样式
? ? @font-family-base
? ? @font-size-base?
? ? @line-height-base?
3.?@link-color ?：设置链接的颜色
链接的样式：
a:hover,鼠标滑过或者悬停在上面
a:focus { 鼠标点击过后
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333; <span style="font-family: 'Microsoft Yahei',sans-serif; line-height: 16px;">?#333 的细的虚线轮廓</span>
outline: 5px auto -webkit-focus-ring-color; <span style="font-family: 'Microsoft Yahei',sans-serif; line-height: 16px;">?#333 的细的虚线轮廓</span>
outline-offset: -2px; 轮廓偏移2px
}
4.
Bootstrap 使用?Normalize?来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
5. container:
<div class="container">
...
</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
.container:before,.container:after {
display: table;
content: " ";
}
这会产生伪元素。
?display?:table ; ?会创建一个匿名的 table-cell 和一个新的块格式化上下文。
?before?伪元素防止上边距崩塌
?after?伪元素清除浮动。
如果?conteneditable?属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用?content: " "?来修复。
.container:after {
clear: both;
}
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。
@media (min-width: 768px) {
.container {
width: 750px;
}
五、Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| ? |
Chrome |
Firefox |
IE |
Opera |
Safari |
| Android
|
YES |
不适用 |
NO |
不适用 |
| iOS
|
YES |
| Mac OS X
|
YES |
Windows
| YES* |
NO |
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。
资料来源：http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html
