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
4000
">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