<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap 练习</title>
<!--Bootstrap3的设计目标是移动设备优先，然后才是桌面设备。为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta 标签-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--width属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device_width可以确保它能正确的呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放-->
<!--在移动浏览设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。通常情况下，maximum-scale=1.0与user-scalable=no 一起使用。这样 禁用其缩放(zooming)功能。注意，这种方式我们并不推荐所有网站使用。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!-- 引入 Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
/*bootstrap3使用body{margin:0;}来移除body的边距。*/
body{font-family:"Helvetica Neua",Helvetica,Arial,sana-serif; font-size:14px; line-height:1.428571429; color:#333; background-color:#fff;}
/*css代码，img-responsive class为图像赋予了max-width和height属性，可以让图像按比例缩放，不超过其父元素尺寸。这表明相关的图像呈现为inline-block。当元素的display属性设置为inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。设置height：auto，相关元素的高度取决于浏览器。设置max-width为100%会重写任何通过width属性指定的宽度。让图片对响应式布局更友好*/
.img-responsive{display:inline-block;height:auto; max-width:100%;}
/*当鼠标悬停在连接上，或者点击过的连接，颜色会被设置为#2a6496 同时，会呈现一条下划线，点击过的连接，会呈现一个颜色为#333的细的虚线框，框为5像素，且基于webkit浏览器有一个-webkit-focus-rings-color的浏览器扩展。轮廓偏移设置为-2像素*/
a:hover,
a:focus{color:#2a6496; text-decoration:underline;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}
/*把container的左右外边距(margin-right、margin-left)交由浏览器决定，注意，由于内边距(padding)是固定宽度，默认情况下容器是不可镶嵌的*/
.container{padding-right:15px; padding-left:15px; margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h2>响应式图像</h2>
<img class="img-responsive" src="QQ截图20160603133912.png" alt="响应式图像">
<!--通过添加img-responsive class可以让Bootstrap 3中的图像对响应式布局的支持更友好--><br>
<h2>排版</h2>
<p>使用@font-family-base、@font-size-base和@line-height-base属性作为排版样式</p><br>
<h2>连接样式</h2>
<p>通过属性@link-color设置全局链接的颜色。对于链接的默认样式，如上a css</p>
<h3>以上所有样式都可以在scaffolding.less中找到</h3>
<h2>避免跨浏览器的不一致性</h2><p>Normalize.css是很小的css文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性</p>
<h2>容器(container)</h2>
<div>Bootstrap3的container class用于包裹页面上的内容。
<p><div>.container:before,.ontainer:after{display:table;content:"";}</div>
这会产生伪元素。设置display为table，会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌，：after伪元素清除浮动。如果conteneditable属性出现在HTML中，由于Opera bug，围绕上述元素创建一个空格这可以通过使用content:""来修复。
<div>.container:after{clear:both;}</div>
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。Bootstrap 3 CSS有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配网格系统。
<div>@media(min-width:768px){
.container{
width:750px;
}}</div>
</p>
</div><br>
<h2>Bootstrap浏览器、设备支持</h2>
<p>下表为Bootstrap支持最新版本的浏览器和平台：</p>
<table border="3px" width="100%" cellpadding="1" cellspacing="2" color="#3366CC">
<tr><td></td>
<td>Chrome</td>
<td>Firefox</td>
<td>IE</td>
<td>Opera</td>
<td>Safair</td>
</tr>
<tr>
<td>Android</td>
<td>YES</td>
<td>YES</td>
<td>不适用</td>
<td>NO</td>
<td>不适用</td>
</tr>
<tr>
<td>IOS</td>
<td>YES</td>
<td>不适用</td>
<td>不适用</td>
<td>NO</td>
<td>YES</td>
</tr>
<tr>
<td>Mac OS X</td>
<td>YES</td>
<td>YES</td>
<td>不适用</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr>
<td>Windows</td>
<td>YES</td>
<td>YES</td>
<td>YES*</td>
<td>YES</td>
<td>NO</td>
</tr>
*Bootstrap支持Internet Explorer 8及更高版本的IE浏览器
</table><br>
<h2>Bootstrap网格系统</h2>
<p>Bootstrap提供了一套响应式、移动设备优先的网格流式网格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列</p><br>
<h3>什么是网格(Grid)</h3>
<p>在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法</p><br>
<h3>什么是bootstrap网格系统(Grid System)</h3>
<p>Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p>
<ul type="circle"><li>一、内容</li>
<li>决定什么是最重要的</li>
<li>二、布局</li>
<li>优先设计更小的宽度</li>
<li>基础的css是移动设备优先，媒体查询是针对于平板电脑、台式电脑。</li>
<li>三、渐进增强</li>
<li>随着屏幕大小的增加而添加元素</li>
<li>响应式网格系统随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多的12列。</li>
</ul> <br>
<h2>Bootstrap网格系统(Grid System)的工作原理</h2>
<p>网格系统通过一系列包含内容的行和列来创建页面布局。</p>
<ul><li>行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)。</li>
<li>使用行来创建列的水平组。</li>
<li>内容应该放置在列内，且唯有列可以是行的直接子元素。</li>
<li>预定义的网格类，比如.row和.col-xs-4,可用于快速创建网格布局。LESS混合类可用于更多的语义布局。</li>
<li>列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负，表示第一列和最后一列的行偏移。</li>
<li>网格系统是通过指定想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。</li>
</ul><br>
<h2>媒体查询</h2>
<p>媒体查询是非常别致的"有条件的css规则"。它只适用于一些基于某些规定条件的css。如果满足那些条件，应用相应的样式。<br>
Bootstrap中的媒体查询允许基于视口大小移动、显示并隐藏内容。下面的媒体查询在LESS文件中使用，用来创建Bootstrap网格系统中的分界点阈值。</p><br>
<h2>网格选项</h2>
<p>下表总结了Bootstrap网格系统如何跨多个设备工作：</p>
<table width="100%" cellpadding="1" cellspacing="2" border="5px">
<tr><td></td>
<td>超小设备手机(<768px)</td>
<td>小型设备平板电脑(>=786px)</td>
<td>中型设备台式电脑(>=992px)</td>
<td>大型设备台式电脑(>=1200px)</td>
</tr>
<tr><td>网格行为</td>
<td>一直都是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
<td>以折叠开始，断点以上的是水平的</td>
</tr>
<tr><td>最大容器宽度</td>
<td>None(auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr><td>Class前缀</td>
<td>.col-xs-</td>
<td>.col-sm-</td>
<td>.col-md-</td>
<td>.col-lg-</td>
</tr>
<tr><td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr><td>最大列宽</td>
<td>Auto</td>
<td>60px</td>
<td>78</td>
<td>95px</td>
</tr>
<tr><td>间隙宽度</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
<td>30px(一个列的每边分别15px)</td>
</tr>
<tr><td>可嵌套</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>
<tr><td>偏移量</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>
<td>列排序</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</td>
</table><br>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>