简介
scaffolding查到的意思是:脚手架。
在rails中也有scaffolding的概念。
- 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的。
- <div class="row">
- <div class="span4">...</div>
- <div class="span8">...</div>
- </div>
上面的效果是一个普通的网格,有一行,两列。一列占用四个位置的宽度,一列占用八个位置的宽度。
offset偏移
offset就是偏移的意思,offset1-offset12,效果是增加margin-left,数字越大,增加加的margin就越大。
- <div class="row">
- <div class="span4">...</div>
- <div class="span3 offset2">...</div>
- </div>
第二行占用3个位置,但是要向右增加两个位置的margin。
列嵌套
- <div class="row">
- <div class="span9">
- Level 1 column
- <div class="row">
- <div class="span6">Level 2</div>
- <div class="span3">Level 2</div>
- </div>
- </div>
- </div>
可以实现表格的效果。
流式网格效果fluid grid
流式网格,类从.row变成了.row-fluid,用百分比来替代传统网格的像素指定宽度。
普通流式网格
- <div class="row-fluid">
- <div class="span4">...</div>
- <div class="span8">...</div>
- </div>
流式网格中的offset
偏移量的单位也从px变成了%,含义没有变,还是向右移,增加margin-left。
- <div class="row-fluid">
- <div class="span4">...</div>
- <div class="span4 offset2">...</div>
- </div>
布局layout
bootstrap提供了两种布局:单个container和左右分栏的container。
固定布局
固定container的宽度,只用一个div,或者是根据响应变化。
- <body>
- <div class="container">
- ...
- </div>
- </body>
流式布局
利用流式网格来实现左右分栏的流式布局。
- <div class="container-fluid">
- <div class="row-fluid">
- <div class="span2">
- <!--Sidebar content-->
- </div>
- <div class="span10">
- <!--Body content-->
- </div>
- </div>
- </div>
响应式设计
根据访问的设备不同,普通PC浏览器,还是pad,还是手机,对css进行动态调整。
开启动态响应功能
在html文件的head中加入下面两句。
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
自适应调整
调整网格中的列宽。
在需要的时候,将元素从float排列调整为stack排列。
重定义文字的大小来适应不同的设备。
支持的设备
Label | Layout width | Column width | Gutter width |
---|---|---|---|
大屏幕 | 1200px and up | 70px | 30px |
默认 | 980px and up | 60px | 20px |
平板类 | 768px and above | 42px | 20px |
大屏幕手机 | 767px and below | Fluid columns, no fixed widths | |
普通手机 | 480px and below | Fluid columns, no fixed widths |