Bootstrap notes -- css overview

PART 1. Bootstrap CSS Overview

1) HTML5 文档类型(Doctype)

使用Bootstrap时,需要包含以下的代码段

1
2
3
4
<!DOCTYPE html>
<html>
....
</html>

2) 移动设备优先

为了更友好的让Bootstrap对移动端的兼容,需要在head中添加viewport meta标签

1
<meta name='viewport' content='width=devicewidth, initial-scale=1.0'>

width属性控制设备的宽度,设置成device-width可以确保在不同的设备上都能正确的显示内容。
initial-scale=1.0确保1:1的比例呈现,不会有任何的缩放。
为了让网站看上去更有原生应用,需要在viewport meta标签中添加
maximum-scale=1.0user-scalable=no
如下所示:

1
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

3) 响应式图像

1
<img src='... class='img-responsive' alt='响应式图像'>

通过添加img-responsive这个类让图像对响应式布局支持得更加友好。该类包含的css属性:

1
2
3
4
5
.img-responsive{
display:inline-block;
height:auto;
max-width:100%;
}

把图像设置成inline-block之后,图像相对于它周围的内容以内联形式呈现,但是可以设置图像的宽度和高度,这一点就与内联不同了。

4) 全局显示、排版和链接

.1 基本的全局显示

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。

1
2
3
4
5
6
7
body{
font-family:'Helvetica Neue', Helvetica, Arial, sansserif;
font-size:14px;
line-height:1.428571429;
color:#333333;
background-color:#ffffff;
}

第一条规则设置 body 的默认字体样式为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
第二条规则设置文本的默认字体大小为 14 像素。
第三条规则设置默认的行高度为 1.428571429。
第四条规则设置默认的文本颜色为 #333333。
最后一条规则设置默认的背景颜色为白色。

.2 排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

.3 链接样式

通过属性@link-color设置全局链接的颜色。
其默认样式如下:

1
2
3
4
5
6
7
8
9
10
11
a:hover,
a:focus{
color:#2a6496,
text-decoration:underline;
}
a:focus{
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}

5) 避免跨浏览器的不一致

Bootstrap使用Normalize来建立跨浏览器的一致性

6) Container

1
2
3
<div class='container'>
...
</div>

Bootstrap3中的containerclass用于包裹页面上的内容,其样式如下:

1
2
3
4
5
6
.container{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}

通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。
请注意,由于内边距(padding)是固定宽度,默认情况下容器是不可嵌套的。

1
2
3
4
5
6
7
8
9
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}

它创建了一个伪元素,并确保了所有的容器包含所有的浮动元素。

1
2
3
4
@media (min-width: 768px) {
.container {
width: 750px;
}

Bootstrap 3 CSS 有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width,用以匹配网格系统。

坚持原创技术分享,您的支持将鼓励我继续创作!