Bootstrap入门

Bootstrap

1 栅格系统 与 响应式布局

页面划分为不同的格子，在不同的屏幕尺寸下，选择性的排列这些格子：横排或者竖排。

以往的判断，是根据media属性，如
：@media

<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">

bootstrap的底层原理就是 栅格系统+media查询

2 容器

.container （固定宽度） .container-fluid （100% 宽度）

页面内容要包含在这两个class的div里面

根据宽度，可有的列数可以自动增加到最多12

假如需要3个等宽的列，可以设置为三个.col-xs-4

3 行 列 与容器的关系

 <div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>

即 容器在最外层，然后写行，然后在行里面写列

4 嵌套使用栅格系统（比如上面的布局，要在其中一个格子里继续使用一个栅格系统）

<div class="container">   
    <div class="row">   
        <div class="col-md-8">   
            <div class="row">   
                <div class="col-md-6"></div>   
                <div class="col-md-6"></div>   
            </div>   
        </div>   
        <div class="col-md-4"></div>   
    </div>   
</div> 

如上面的样例代码，继续使用的话，是在col里面 继续写（除了不用.container或者.container-fluid）

5 媒体查询

解释.col-xx-y

.col-xx-y。 y是数字，表示该元素的宽度占据12列中的多少列。而xx只有特定的几个值可供选择，分别是xs、sm、md、lg。这些叫做断点类型。

当屏幕宽度大于等于 断点时，横排，否则剩下的竖排。
xs表示极小（默认左右理论的屏幕都会大于它），那么列都会横排；

6 流式布局例子

<div class="container">   
    <div class="row">   
        <div class="col-sm-6 col-lg-3">1</div>   
        <div class="col-sm-6 col-lg-3">2</div>   
        <div class="col-sm-6 col-lg-3">3</div>   
        <div class="col-sm-6 col-lg-3">4</div>   
    </div>   
</div> 

如果屏幕为sm（768px），那么样子类似：
1 2
3 4

如果为lg(1024)，那么：
1 2 3 4

如果小于sm， 那么
1
2
3
4

详细看http://www.blogways.net/blog/2016/06/05/web-bootstrap.html