bootstrap中文手册指南.doc

Bootstrap简易指南
看完使用手册后所作的笔记,可以当做简易使用指南使用。


使用HTML5的doctype,,,

940px宽12列栅格,使用row与span[NUM]的class来控制,使用offset[NUM]来控制偏移,于non-fluid可以直接嵌套,提供了四种响应式方案

基于百分比,将row改为row-fluid即可使用,内嵌注意宽度是按照父列的百分比进行计算的

,默认列12,宽60px,间隔20px,

container为940px居中,container-fluid则为流体布局
响应式设计
query:
智能手机《=480px;流式列,非固定宽度
垂直平板《=767px;流式列,非固定宽度
水平平板》=768px;42px 20px
默认》=980px; ? ? ?60px ?20px
大分辨率》=1200px;70px 30px
要求添加meta标签,<meta name=”viewport” content=”width=device-width, initail-scale=″>
-phone等支持类

排版
***@baseFontSize与***@baseLineHeight两个变量;
强调:string加粗,em倾斜,abbr缩写【title属性存放显示信息,.initialism会减小缩略词字体】,address【使用br换行】
引用:blockquote【cite属性存放来源URL,.pull-left或right决定内容居左右】,small用于引言作者【会在内容前加入破折号】
列表:ul无序号有黑点,,ol有数字序号,dl描述,-horizontal水平描述

code行级代码,pre块级【<>需要转义,.pre-scrollable可以设置350px最大高度】,【使用google prettify】

table thead【tr】 tbody【tr】tr【td或th】th【必须在thead之内】 caption;
.table行之间有水平线分割【】.table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】.table-condensed 紧凑竖直方向padding减半几个可以组合使用

四种表单:.form-vertical【,控件标签文字左对齐】.form-inline【左对齐,控件inline-block】.form-search【文本框圆化】.form-horizonta