Bootstrap-sass<2>基本布局

Boostrap对于布局的核心在于它的栅格系统，即对不同分辨率下设置了一套相对普适的样式，我们先看Boostrap.css中预定义的几种设备分类。



如果你想查询更多，可以转到Bootstrap官网：http://getbootstrap.com/css；

所以，在bootstrap下，我们常常是这样进行流式布局的：

<div class="container-fluid">

  <div class="row">

    ...

  </div>

</div>

适应不同分辩率时是采取如下代码：(如为手机和笔记本做分辨率适配)

<div class="row">

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

但是，在bootstra-sass里面：

打开_variables.scss文件 里，我用sublime打开的。



我们可以看到，它已经变成几个变量了，所以当你适配部分分辨率时就变成如下方式；

<1>简单的布局：

<-- bootstrap方式-->

<div class="container">

  <div class="row">

    <div class="col-md-4 col-sm-6 col-xs-12">Sidebar content</div>

    <div class="col-md-8 col-sm-6 col-xs-12">Article content</div>

  </div>

</div>

<--boostrap-sass方式-->

<div class="container">

  <div class="main">

    <div class="sidebar">Sidebar content</div>

    <div class="content">Article content</div>

  </div>

</div>

<--sass code-->

.main {

 @include make-row;

  .sidebar {

 @include make-xs-column(12);

 @include make-sm-column(6);

 @include make-md-column(4);

  }

  .content {

 @include make-xs-column(12);

 @include make-sm-column(6);

 @include make-md-column(8);

  }

}

从这个例子也许你感觉两者差别不大，但当工程量不是一两个页面时，你就会发现层次关系的重要性，也就是sass语法在组织和之后的调试，可读等方面的优势。

<2>offset属性

<-- bootstrap方式-->

<div class="container">

  <div class="row">

    <div class="col-md-4 col-sm-6 col-xs-12">Sidebar content</div>

    <div class="col-md-8 col-sm-6 col-xs-12">Article content</div>

  </div>

</div>

<--boostrap-sass方式-->

<div class="main">

  <div class="col">Column</div>

  <div class="col">Column</div>

</div>

<--sass code-->

.main {

 @include make-row;

  .col {

 @include make-md-column(4);

    &:nth-child(2) {

 @include make-md-column-offset(4);//&表示父选择器

    }

  }

}

当你看完这两个例子，你是否有所感觉就是，后者或者说sass的html与css样式分离的更清晰，也更好编辑，语言更加自由点；