简介

scaffolding查到的意思是：脚手架。

在rails中也有scaffolding的概念。

 

 
  
  1. rails generate scaffold post title:string content:text published:boolean 
 
  
执行之后，在提示信息中，我们会看到创建migration、controller、model、view、helper、js.coffee、sass、unit test等一系列东西，post的增删改查，存储，后台，前台都有了。
 
  
我理解就是一个框架，就是外围的基础都帮你搭建好了，你可以即插即用，基于这个脚手架进行修改，升级。
 
  
 
 
  
全局设置
 
  
全局设置在bootstrap的scaffolding.less  文件中。
 
  
包括
 
  
body的样式，字体，行高，字体颜色，背景色，css的值大多是对变量的引用。变量都在variables.less中定义。
 
  
a标签的样式，颜色和下划线。
 
  
定义了三个img类。一个是小圆角，一个是大圆角，还有一个是产生一个边框，然后还有留白。
 
  
 
 
  
传统Grid效果
 
  
定义了一些css类，row，span，offset，将这些类用在div上，实现网格的效果。
 
  
 
 
  
基本的网格
 
  
row就是行的意思，span1-span12，分别代表不同的宽度，且span之间默认是有margin的。
 
  
 
  
  1. <div class="row"> 
  2.  <div class="span4">...</div> 
  3.  <div class="span8">...</div> 
  4. </div> 
 
  
上面的效果是一个普通的网格，有一行，两列。一列占用四个位置的宽度，一列占用八个位置的宽度。
 
  
 
 
  
offset偏移
 
  
offset就是偏移的意思，offset1-offset12，效果是增加margin-left，数字越大，增加加的margin就越大。
 
  
 
  
  1. <div class="row"> 
  2.   <div class="span4">...</div> 
  3.   <div class="span3 offset2">...</div> 
  4. </div> 
 
  
第二行占用3个位置，但是要向右增加两个位置的margin。
 
  
 
 
  
列嵌套
 
  
 
  
  1. <div class="row"> 
  2.  <div class="span9"> 
  3.  Level 1 column 
  4.  <div class="row"> 
  5.  <div class="span6">Level 2</div> 
  6.  <div class="span3">Level 2</div> 
  7.  </div> 
  8.  </div> 
  9. </div> 
 
  
可以实现表格的效果。
 
  
 
 
  
流式网格效果fluid grid
 
  
流式网格，类从.row变成了.row-fluid，用百分比来替代传统网格的像素指定宽度。
 
  
 
 
  
普通流式网格
 
  
 
  
  1. <div class="row-fluid"> 
  2.  <div class="span4">...</div> 
  3.  <div class="span8">...</div> 
  4. </div> 
 
  
 
 
  
流式网格中的offset
 
  
偏移量的单位也从px变成了%，含义没有变，还是向右移，增加margin-left。
 
  
 
 
  
 
  
  1. <div class="row-fluid"> 
  2.  <div class="span4">...</div> 
  3.  <div class="span4 offset2">...</div> 
  4. </div> 
 
  
 
 
  
布局layout
 
  
bootstrap提供了两种布局：单个container和左右分栏的container。
 
  
 
 
  
固定布局
 
  
固定container的宽度，只用一个div，或者是根据响应变化。
 
  
 
  
  1. <body> 
  2.   <div class="container"> 
  3.   ... 
  4.   </div> 
  5. </body> 
 
  
 
 
  
流式布局
 
  
利用流式网格来实现左右分栏的流式布局。
 
  
 
  
  1. <div class="container-fluid"> 
  2.   <div class="row-fluid"> 
  3.     <div class="span2"> 
  4.       <!--Sidebar content--> 
  5.     </div> 
  6.     <div class="span10"> 
  7.       <!--Body content--> 
  8.     </div> 
  9.   </div> 
  10. </div> 
 
  
 
 
  
响应式设计
 
  
根据访问的设备不同，普通PC浏览器，还是pad，还是手机，对css进行动态调整。
 
  
 
 
  
开启动态响应功能
 
  
在html文件的head中加入下面两句。
 
  
 
  
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" /> 
 
  
 
 
  
自适应调整
 
  
调整网格中的列宽。
 
  
在需要的时候，将元素从float排列调整为stack排列。
 
  
重定义文字的大小来适应不同的设备。
 
  
 
 
  
支持的设备
 
  
LabelLayout widthColumn widthGutter width
大屏幕1200px and up70px30px
默认980px and up60px20px
平板类768px and above42px20px
大屏幕手机767px and belowFluid columns, no fixed widths
普通手机480px and belowFluid columns, no fixed widths