bootstrap学习

一、 环境挞建
     1.下载生产环境
     2.引入css/js文件

        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

二、 Less快速入门
       Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。(略过先不看了，先知道干嘛的就行。)

三、bootstrap的css概念
       1.移动设备优先:需要在head中添加一个viewport的meat

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

          width 属性控制设备的宽度。置为 device-width确保正确呈现在不同设备上。
          initial-scale=1.0网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
          user-scalable=no禁用其缩放（zooming）功能。
          maximum-scale=1.0 与 user-scalable=no一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

四、网格(Grid)
      行必须放置在 .container class 内
      使用行来创建列的水平组
      内容应该放置在列内，且唯有列可以是行的直接子元素
      预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局
      列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移
      网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4(最多一行显示12列)
      列Class前缀:col-xs- 手机(<768px),col-sm- 平板(>=768px),col-md- 台式(>=992px),col-lg- 台式(>=1200px)

      例子1：

    <style>
        div {text-align:center;}
        .col-lg-1 {background-color:#f00;}
        .col-lg-2 {background-color:#0f0;}
        .col-lg-3 {background-color:#00f;color:#fff}
        .col-lg-4 {background-color:#f0f;}
        .col-lg-6 {background-color:#000;color:#fff}
        .col-lg-12 {background-color:#0ff;}
    </style>

    <div class="container">
        <div class="row">
            <div class="col-lg-1 col-xs-1">111</div>
            <div class="col-lg-1 col-xs-1">222</div>
            <div class="col-lg-1 col-xs-1">333</div>
            <div class="col-lg-1 col-xs-1">444</div>
            <div class="col-lg-1 col-xs-1">555</div>
            <div class="col-lg-1 col-xs-1">666</div>
            <div class="col-lg-1 col-xs-1">777</div>
            <div class="col-lg-1 col-xs-1">888</div>
            <div class="col-lg-1 col-xs-1">999</div>
            <div class="col-lg-1 col-xs-1">000</div>
            <div class="col-lg-1 col-xs-1">111111</div>
            <div class="col-lg-1 col-xs-1">121212</div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-xs-2">111</div>
            <div class="col-lg-2 col-xs-2">222</div>
            <div class="col-lg-2 col-xs-2">333</div>
            <div class="col-lg-2 col-xs-2">444</div>
            <div class="col-lg-2 col-xs-2">555</div>
            <div class="col-lg-2 col-xs-2">666</div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-xs-3">111</div>
            <div class="col-lg-3 col-xs-3">222</div>
            <div class="col-lg-3 col-xs-3">333</div>
            <div class="col-lg-3 col-xs-3">444</div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-xs-4">111</div>
            <div class="col-lg-4 col-xs-4">222</div>
            <div class="col-lg-4 col-xs-4">333</div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-xs-6">111</div>
            <div class="col-lg-6 col-xs-6">222</div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-xs-12">111</div>
        </div>
    </div>

具体的各控件class用法参照：http://www.runoob.com/bootstrap/bootstrap-tutorial.html