全局样式
1.要求html5文档类型
Bootstrap使用的css属性和html元素依赖于html5的文档类型声明,请确保每个Bootstrap的页面包含下面的代码:
2.排版和链接样式
全局的排版和链接样式放在scaffolding.less文件内(关于less教程后面会有详细说明)。默认做了如下处理:
- 移除body的外边距
- 设置body的背景颜色为白色
background-color: white;
- 使用
@baseFone
,@baseFontSize
,@baseLineHeight
属性作为排版基础 - 使用
@linkColor
设置了全局链接颜色和:hover
伪属性的下划线
3.默认样式重置
从 Bootstrap 2开始,CSS重置样式基于Normalize.css,新的重置样式,可以在reset.less中找到(Bootstrap做了许多的简化)。
默认栅格布局系统
Bootstrap的默认布局系统由总宽度为940px的12列组成。
它能够适应各个分辨率的显示设备,比如手机、平板、超高分辨率屏幕等。
(ps:请看demo)
<
div
class
=
"row"
>
<
div
class
=
"span4"
>...</
div
>
<
div
class
=
"span8"
>...</
div
>
</
div
>
|
上面的代码将创建二列栅格,span4容器占总宽度的4/12即(1/3)。
1.如何处理列的偏移
比如我们希望有个栅格是右靠齐。
<
div
class
=
"row"
>
<
div
class
=
"span4"
>...</
div
>
<
div
class
=
"span4 offset4"
>...</
div
>
</
div
>
|
第二个span4容器,增加个offset4样式名,表示跟前一个容器相隔4个列距离。
2.处理列的嵌套
(ps:请看demo)
在Bootstrap中使用静态(非浮动)的布局处理栅格的嵌套是非常简单的事。
<
div
class
=
"row"
>
<
div
class
=
"span12"
>
Level 1 of column
<
div
class
=
"row"
>
<
div
class
=
"span6"
>Level 2</
div
>
<
div
class
=
"span6"
>Level 2</
div
>
</
div
>
</
div
>
</
div
>
|
.row的容器内部是一个占满12列的层(.span12),下面嵌套个新的.row容器,内部是span6二列布局。
浮动布局系统
浮动布局系统,就是我们经常使用的float:left;布局方式,比较特殊的是bootstrap使用百分比来定义栅格的宽度。
1.浮动栅格的行容器
(ps:请看demo)
<
div
class
=
"row-fluid"
>
<
div
class
=
"span4"
>...</
div
>
<
div
class
=
"span8"
>...</
div
>
</
div
>
|
流动布局,行容器使用. row-fluid 样式名,其他地方不变。
.row-fluid {
width
:
100%
;
}
.row-fluid:before, .row-fluid:after {
content
:
""
;
display
: table;
}
.row-fluid:after {
clear
:
both
;
}
|
2.宽度使用百分比,而不是像素值
浮动布局系统比静态布局系统,拥有更强的适应性,同样适应不同分辨率的屏幕。
.row-fluid > [class*=
"span"
] {
float
:
left
;
margin-left
:
2.5641%
;
}
.row-fluid > [class*=
"span"
]:first-child {
margin-left
:
0
;
}
|
3.浮动布局中处理容器的嵌套
(ps:请看demo)
浮动布局中的嵌套处理有点不大一样:嵌套的栅格不需要匹配父容器的栅格数,每一行的宽度都占用父容器的100%宽度。
<
div
class
=
"row-fluid"
>
<
div
class
=
"span12"
>
Level 1 of column
<
div
class
=
"row-fluid"
>
<
div
class
=
"span6"
>Level 2</
div
>
<
div
class
=
"span6"
>Level 2</
div
>
</
div
>
</
div
>
</
div
>
|
定制栅格
变量 | 默认值 | 描述 |
@gridColumns | 12 | 列的数量 |
@gridColumnWidth | 60px | 列的宽度 |
@gridGutterWidth | 20px | 列的间隔 |
LESS中的变量
Bootstrap中定制一套自己的940px栅格系统,只需要很少的less变量。这些变量可以在variables.less中找到。
如何定制
你需要修改@grid*三个变量(指的是上面表格中的三个变量),并重新编译Bootstrap(less重新编译出新的css文件)。关于less的编译可以看 four ways documented to recompile,如果新增了列,务必在grid.less增加上对应的样式。
保留适应性
自适应的栅格系统只能用于默认的940px栅格。为了维持Bootstrap的自适应性,需要额外在 responsive.less中自定义栅格样式。
布局
静态布局
<
div
class
=
"container"
>
...
</
div
>
|
浮动布局
使用container-fluid样式名,产生浮动页面结构,下面的demo中演示了生成常用的2列布局。
<
div
class
=
"container-fluid"
>
<
div
class
=
"row-fluid"
>
<
div
class
=
"span2"
>
<!--Sidebar content-->
</
div
>
<
div
class
=
"span10"
>
<!--Body content-->
</
div
>
</
div
>
</
div
>
|
自适应设计
如何让栅格布局系统适应不同分辨率的屏幕?
需要用到css3的media queries,严重推荐阅读《CSS3 media queries使用参考指南》和《CSS3 Media Queries 详解》。Media Queries的引用,让你可以针对不同的设备定制不一样的css样式,可以很方便的让布局系统适应不同的媒体设备。
原文讲得比较晦涩,明河借用《CSS3 Media Queries 详解》举个简单例子:
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"swordair.css"
media
=
"screen and (min-width: 400px)"
>
|
样式表引用增加media属性。
- screen: 媒体类型里的一种,10种媒体类型
- and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
- (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
screen and (min-width: 400px)的意思是当屏幕的宽度大于等于400px的时候,应用此条CSS,也就是说media非常像条件语句。
bootstrap支持的设备
Label | Layout width | Column width | Gutter width |
智能手机 | 等于小于480px | 无固定宽度 | 无固定宽度 |
介于智能手机和平板电脑之间 | 等于小于767px | 无固定宽度 | 无固定宽度 |
平板电脑 | 等于大于768px | 42px | 20px |
默认 | 等于大于980px | 60px | 20px |
超分辨率 | 等于大于1200px | 70px | 30px |
需要meta标签
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
|
使用media queries
Bootstrap默认不包含这些media queries的样式,你可以通过下列的方式引入:
- 页面引入bootstrap-responsive.css
- 重编译bootstrap时,增加@import “responsive.less”
- 修改和单独编译responsive.less为一个独立的文件
Bootstrap 的media queries代码
// Landscape phones and down
@media (
max-width
:
480px
) { ... }
// Landscape phone to
portrait
tablet
@media (
max-width
:
767px
) { ... }
// Portrait tablet to
landscape
and desktop
@media (
min-width
:
768px
) and (
max-width
:
979px
) { ... }
// Large desktop
@media (
min-width
:
1200px
) { ... }
|