2019-04-09 网格系统(2)

1.普通网格系统

外框class = container

行class = row

列：

<div class="container">

<div class="row">

<div class="col-md-3 col-sm-3 col-xs-3">11</div>

<div class="col-md-3 col-sm-3 col-xs-3">12</div>

<div class="col-md-3 col-sm-3 col-xs-3">13</div>

<div class="col-md-3 col-sm-3 col-xs-3">14</div>

</div>

</div>

2.列排序

<div class="container"> 

 <h1>Hello, world!</h1> 

 <div class="row"> 

 <p> 排序前</p>       

 <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">        

 我在左边 </div>        

<div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">        

 我在右边 </div>    

</div>   

 <br>    

<div class="row">       

 <p>   排序后 </p>       

 <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">        我在左边 </div>        

<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">        

我在右边</div>    

</div>

</div>

3.偏移列

<div class="container"> 

 <h1>Hello, world!</h1>

 <div class="row" > 

 <div class="col-md-6 col-md-offset-3"

        style="background-color: #dedef8;box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">           

 <p>Lorem ipsum dolor sit amet, consectetur adipisicingelit.</p>        

</div>    

</div>

</div>