Bootstrap学习小小小小笔记

嗯，刚开始学，一点小tips，供 自己 回忆。
——————————————————————————————————–

（1）Bootstrap3已经是移动设备优先了。所以一般在head中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">

（2）Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
行必须放置在 .container内，在行内放置列。
不同设备会查找不同class前缀，例如

<div class="container">
    <div class="row" >
      <div class="col-sm-3 col-md-6 col-lg-4">....</div>
      <div class="col-sm-9 col-md-6 col-lg-8">....</div>
    </div> 
</div>

这里提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局（sm的3、9）。在平板电脑上，它将是 50%/50% 的布局（md的6、）。在大型视口的设备上，它将是 33%/66% 的布局（lg的4、8）。

（3）由于Bootstrap 3 是移动设备优先的，所以在设计上Bootstrap 代码应该从小屏幕设备开始，然后扩展到大屏幕设备上的组件和网格。
在布局上优先设计更小的宽度。随着屏幕大小的增加而添加元素。渐进增强。

（4）Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

（5） .col-md-offset-* 类是偏移列。就是在该列的左margin增加 * 列，其中 * 范围是从 1 到 11。当然，其他lg,sm也都是有偏移列的。

（6）列之间是可以嵌套的，但首先在父列中添加行，才能在行中嵌套子列

<div class="col-md-9">       <!--父列-->
         <div class="row">    <!--行-->
            <div class="col-md-6">...</div>   <!--子列-->
            <div class="col-md-6">...</div>   <!--子列-->
         </div>
 </div>

（7）Bootstrap有个特点，就是列可以排序。即以一种顺序编写列，然后以另一种顺序显示列。用.col-md-push-* 和 .col-md-pull-*实现。
如：class="col-md-8 col-md-pull-4"

（8）可以在<a>、<button> 或 <input>元素上使用按钮 class。但最好在<button>上使用按钮 class，避免跨浏览器的不一致性。