Bootstrap 随笔

标签：

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

1 <img src="..." class="img-responsive" alt="响应式图像">

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

1 <div class="container-fluid">
2   ...
3 </div>

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-<em> 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg- 不存在， 也影响大屏幕设备。

　　列偏移：

1 <div class="row">
2   <div class="col-xs-3 col-xs-offset-3">.col-md-3 .col-md-offset-3</div>
3   <div class="col-xs-3 col-xs-offset-3">.col-md-3 .col-md-offset-3</div>
4 </div>

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序，其中 * 范围是从 1 到 11 。

1 <div class="row">
2   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
3   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
4 </div>

文本过长自动截断设置 text-overflow 属性

通过 <code> 标签包裹内联样式的代码片段。

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

1 <p>Sample text here...</p>

还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

通过 <var> 标签标记变量。

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

 1  <table class="table table-striped"><caption>Optional table caption.</caption>
 2 <thead>
 3 <tr>
 4 <th>#</th>
 5 <th>First Name</th>
 6 <th>Last Name</th>
 7 <th>Username</th>
 8 </tr>
 9 </thead>
10 <tbody>
11 <tr>
12 <th scope="row">1</th>
13 <td>Mark</td>
14 <td>Otto</td>
15 <td>@mdo</td>
16 </tr>
17 <tr>
18 <th scope="row">2</th>
19 <td>Jacob</td>
20 <td>Thornton</td>
21 <td>@fat</td>
22 </tr>
23 <tr>
24 <th scope="row">3</th>
25 <td>Larry</td>
26 <td>the Bird</td>
27 <td>@twitter</td>
28 </tr>
29 </tbody>
30 </table>

Bootstrap 随笔

标签：

原文地址：http://www.cnblogs.com/wangzhebig/p/5050527.html