<spanclass="tag"></<spanclass="title">html</span>></span></code></pre></div><h3id="overview-mobile">移动设备优先</h3><p>在Bootstrap 2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。</p><p>为了确保适当的绘制和触屏缩放，需要在<code><head></code>之中<strong>添加viewport元数据标签</strong>。</p><divclass="highlight"><pre><codeclass="language-html xml"><spanclass="tag"><<spanclass="title">meta</span><spanclass="attribute">name</span>=<spanclass="value">"viewport"</span><spanclass="attribute">content</span>=<spanclass="value">"width=device-width, initial-scale=1.0"</span>></span></code></pre></div><p>在移动设备浏览器上，通过为viewport meta标签添加<code>user-scalable=no</code>可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p><divclass="highlight"><pre><codeclass="language-html xml"><spanclass="tag"><<spanclass="title">meta</span><spanclass="attribute">name</span>=<spanclass="value">"viewport"</span><spanclass="attribute">content</span>=<spanclass="value">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span>></span></code></pre></div><h3id="overview-responsive-images">响应式图片</h3><p>通过添加<code>.img-responsive</code> class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了<code>max-width: 100%;</code> 和<code>height: auto;</code>属性，可以让图片按比例缩放，不超过其父元素的尺寸。</p><divclass="highlight"><pre><codeclass="language-html xml"><spanclass="tag"><<spanclass="title">img</span><spanclass="attribute">src</span>=<spanclass="value">"..."</span><spanclass="attribute">class</span>=<spanclass="value">"img-responsive"</span><spanclass="attribute">alt</span>=<spanclass="value">"Responsive image"</span>></span></code></pre></div><h3id="overview-type-links">排版和链接</h3><p>Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：</p><ul><li>为<code>body</code>标签设置了<code>background-color: #fff;</code>样式</li><li>设置了排版的基本属性<code>@font-family-base</code>、<code>@font-size-base</code>和<code>@line-height-base</code></li><li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li></ul><p>这些样式可以在<code>scaffolding.less</code>文件中找到。</p><h3id="overview-normalize">Normalize</h3><p>为了增强跨浏览器表现的一致性，我们使用了<ahref="http://necolas.github.io/normalize.css/"target="_blank">Normalize</a>，这是由<ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a>和 <ahref="http://twitter.com/jon_neal"target="_blank">Jonathan Neal</a>维护的一个reset库。</p><h3id="overview-container">Containers</h3><p>用<code>.container</code>包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了<code>max-width</code>，用以匹配栅格系统。</p><divclass="highlight"><pre><codeclass="language-html xml"><spanclass="tag"><<spanclass="title">div</span><spanclass="attribute">class</span>=<spanclass="value">"container"</span>></span>
...
<spanclass="tag"></<spanclass="title">div</span>></span></code></pre></div></div><divclass="bs-docs-section"><divclass="page-header"><h1id="grid">栅格系统</h1></div><pclass="lead">Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的<ahref="http://v3.bootcss.com/css/#grid-example-basic">预定义classe</a>，还有强大的<ahref="http://v3.bootcss.com/css/#grid-less">mixin用于生成更具语义的布局</a>。</p><h3id="grid-intro">简介</h3><p>栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：</p><ul><li>“行（row）”必须包含在<code>.container</code>中，以便为其赋予合适的排列（aligment）和内补（padding）。</li><li>使用“行（row）”在水平方向创建一组“列（column）”。</li><li>你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。</li><li>类似Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。</li><li>通过设置<code>padding</code>从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的<code>margin</code>从而抵消掉padding的影响。</li><li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个<code>.col-xs-4</code>来创建。</li></ul><p>通过研究案例，可以将这些原理应用到你的代码中。</p><divclass="bs-callout bs-callout-info"><h4>栅格与全宽布局Grids and full-width layouts</h4><p>对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予<code>padding: 0 15px;</code>，为的是抵消掉为<code>.row</code>所设置的<code>margin: 0 -15px;</code>（如果不这样的话，你的页面会左右超出视口15px，页面底部出现横向滚动条）。</p></div><h3id="grid-media-queries">媒体查询</h3><p>在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。</p><divclass="highlight"><pre><codeclass="language-css"><spanclass="comment">/* Extra small devices (phones, less than 768px) */</span>
<spanclass="comment">/* No media query since this is the default in Bootstrap */</span>
<spanclass="comment">/* Small devices (tablets, 768px and up) */</span>
<spanclass="comment">/* Large devices (large desktops, 1200px and up) */</span>
<spanclass="at_rule">@<spanclass="keyword"><spanclass="keyword">media</span></span> (min-width: @screen-lg-min) </span>{ ... }</code></pre></div><p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p><divclass="highlight"><pre><codeclass="language-css"><spanclass="at_rule">@<spanclass="keyword"><spanclass="keyword">media</span></span> (max-width: @screen-xs-max) </span>{ ... }
<spanclass="at_rule">@<spanclass="keyword"><spanclass="keyword">media</span></span> (min-width: @screen-sm-min) and (max-width: @screen-sm-max) </span>{ ... }
<spanclass="at_rule">@<spanclass="keyword"><spanclass="keyword">media</span></span> (min-width: @screen-md-min) and (max-width: @screen-md-max) </span>{ ... }
