<!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>
