小爱 Bootstrap全局样式
页面必须设置为html5文档类型
<!DOCTYPE html>
<html lang=”zh-CN”>
…
</html>
适应移动设备
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
排版/链接
scaffolding.less：
body{background-color:#fff／@font-family-base/@font-size-base/@line-height-base}
a(@link-color/@link-hover-color)
Normalize.css
栅格系统
容器：
.container(固定宽度响应式)/.container-fluid(百分比自适应)
不能互相嵌套（有padding的原因）
行：
.row
必须包含在容器.container或.container-fluid中
行内可以且只可以创建列(column)
列：
.col-*-*
内容放在列中
列与列之间的间隔有.col-*-*中的padding属性设置
第一个＊为xs、sm、md和lg，第二个＊为1-12
列数大于12，多余的列另起一行(本质上是浮动引起的换行)
媒体查询
超小屏幕(小于768)
无媒体查询代码——移动优先原则
容器宽度.container为自动
小屏幕(大于768)
@media (min-width:@screen-sm-width:768){}
容器宽度.container为720
中等屏幕(大于992)
@media(min- width:@screen-md-width:992){}
容器宽度.container为970
大屏幕(大于1200)
@media(min-width:@screen-lg-width:1200){}
容器宽度.container为1170
大屏幕媒体查询类覆盖小屏幕设备类
实例
1、根据媒体查询，相应宽度的屏幕展示相应的类(堆叠／水平排列)
<div class=”row”>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
<div class=”col-md-1″>.col-md-1</div>
</div>
<div class=”row”>
<div class=”col-md-8″>.col-md-8</div>
<div class=”col-md-4″>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4″>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-6″>.col-md-6</div>
<div class=”col-md-6″>.col-md-6</div>
</div>
2、.col数大于12，包含多余列的元素另起一行
<div class=”row”>
<div class=”col-xs-9″>.col-xs-9</div>
<div class=”col-xs-4″>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class=”col-xs-6″>.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
3、col-**-offset-*列偏移(通过margin-left设置偏移)
4、col-**-push-*(通过left值改变位置)和col-**-pull-*(通过right值改变位置)改变列排序
具体排版
1、标题和标题类 <h1> ~<h6>和.h1~h6｜副标题<small>和.small
font-size margin-top margin-bottom
h1 36px 20px 10px
h2 30px 20px 10px
h3 24px 20px 10px
h4 18px 10px 10px
h5 14px 10px 10px
h6 12px 10px 10px
2、内容、p段落 font-size:14px; line-height:20px;margin-bottom:10px;
3、强调突出内容 .leader{margin-bottom:20px;font-size:16px(min-width:768:21px);font-weight:300;}
4、标记文本<mark>和.mark {padding/background-color}
5、删除的文本<del> 浏览器自带样式
6、无用的文本<s> 浏览器自带样式
7、插入的文本<ins> 浏览器自带样式
8、带下划线文本<u> 浏览器自带样式
9、小号文本<small>和.small {font-size:85%;}
10、着重<strong> 浏览器自带样式 有语气
11、斜体<em> 浏览器自带样式 有语气
12、高亮文本<b> 浏览器自带样式 不带语气
13、斜体<i> 浏览器自带样式 不带语气 一般用于技术词汇、发言
14、文本对齐 .text-left .text-center .text-right .text-justify .text-nowrap
15、字母大小写 .text-lowercase .text-uppercase .text-capitalized
16、缩略语 <abbr title=””> {cursor/border-bottom}
17、首字母缩略语 <abbr title .initialism> {font-size:90%/uppercase}
18、地址 <address> {font-style}
19、引用 <blockquote> {padding/font-size/border-left}
20、引用＋命名来源 <footer> <cite>
21、引用反向风格 .blockquote-reverse
22、无序列表 <ul> {margin-top/margin-bottom}
23、有序列表 <ol> {margin-top/margin-bottom}
24、无样式列表 .list-unstyled {padding-left/list-style}
25、内联样式 .list-inline {padding-left/margin-left/list-style} {display/padding}
26、定义列表 <dl> {margin-top/margin-bottom} {font-weight} {margin-left}
27、定义列表水平排列 .dl-horizontal
28、代码 <code> {padding/font-size/color/background-color/border-radius}
29、用户输入 <kbd> {padding/font-size/color/background-color/border-radius /box-shadow}
30、代码块 <pre> {padding/margin/font-size/color/background-color/word-break/word-wrap/border/border-radius}
31、变量 <var> 浏览器自带样式
32、程序输出 <samp> {font-family}
表格
1、基本类 .table {width/margin-bottom/} {padding/border-top}
2、条纹表格 .table-striped {nth-of-type(odd):background-color}
3、边框表格 .table-border {border}
4、鼠标悬停 .table-hover {background-color}
5、紧缩的表格 .table-condesed
6、状态类 .active .success .warning .danger .info
7、响应式表格 .table-responsive
表单
1、使用label和控件组合使用，包裹在.from-group里面获得最好的排列 {margin-bottom}
2、<input>、<select>、<textarea>加类.form-control {width/padding/border-radius/border}
3、内联表单 .form-inline
4、水平排列 .form-horizontal+栅格类+.control-label
5、输入框 input:text 几乎浏览器自带样式
6、文本域 input:textarea 几乎浏览器自带样式
7、单选和多选 div+.radio/.radio-inline/.checkkbox/.checkbox-inline+属性disabled/.disabled
8、内联单选和多选 .radio-inline／.checkbox-inline
9、下拉列表 几乎浏览器自带样式
10、静态控件 .form-control-staitic+p
11、禁用状态 disable属性 {cursor/background-color}
12、<filedset> disable属性 禁用包含的所有控件
13、只读状态 readonly属性 {background-color}
14、校验状态 .has-success .has-warning .has-error
15、校验状态＋图标 .has-feedback+feedback icon
16、 水平排列／内联＋校验＋图标 .form-horizontal/.form-inline+校验类+.has-feedback+feedback icon
17、控件尺寸 .input-lg {height/padding/border-radius/font-size}
18、水平排列控件尺寸 .form-group-lg/.form-group-sm
19、列尺寸 栅格类.row+.col-**-*控制尺寸
关爱邦 | 网站源码程序下载_免费商业源码分享！ » Bootstrap全局样式
