bootstrap入门 - Pure nonsense

主要内容

1 环境搭建
- 1.1 移动设备优先
2 布局容器（container）
3 Grid系统
4 Bootstrap中的屏幕分类
- 4.1 创建两栏布局
5 媒体查询
6 列偏移（column offset）
7 列重排序
8 使用表单
9 静态控件
10 一些代码

环境搭建

bootstrap依赖的文件不多，一般只需要两个文件就可以使bootstrap框架工作，两个文件一个是css文件，另一个是JavaScript文件。这两个文件分别是：

bootstrap.css/bootstrap.min.css
bootstrap.js/bootstrap.min.js

这些文件可以从bootstrap官方网站下载，但更简单的方式是使用bootcdn提供的cdn加速服务引入这两个文件。

基本代码：

<!DOCTYPE html>

<head>

<title>Beginning Bootstrap</title>

</head>

<body>

</body>

</html>

移动设备优先

bootstrap3 一开始就是对移动设备友好的，因此，为了使页面在移动设备上能够正常缩放，必须在页面中添加下面这句话：

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta标签中还可以设置最大缩放倍数，是否允许用户对页面进行缩放。例如：

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

布局容器（container）

bootstrap中的元素基本都被包含在布局容器中，布局容器使用.container标识。bootstrap有两种容器，分别是固定宽度和100%宽度两种，固定宽度容器使用.container标识，100%宽度容器使用.container-fluid标识，重要的是，它们不能互相嵌套。

Grid系统

Grid系统由行（row）和列（column）组成，Grid系统中的行和列有如下特点：

row必须包含在container中
每一行只能有12列，多出的列会被自动排列到下一行中
只有column可以作为row的直接子元素
列使用以col开头的css类标识

创建一行一列：

</div>

Bootstrap中的屏幕分类

bootstrap的屏幕种类按从大到小被划分为4个种类：

超小屏幕（extra small），屏幕像素小于768，一般指手机
小屏幕（small），屏幕像素大于或等于768，一般指平板电脑
中等屏幕（medium），像素大于或等于992，中等桌面显示器（15寸）
大屏幕（large），像素大于或等于1200，大桌面显示器（17寸）

也就是说，4个种类的屏幕划分可以具体到3种设备，分别是手机，平板和桌面显示器。

bootstrap预定义了4种css样式，这些样式只能应用于column中，它们分别对应上面4种尺寸的屏幕，分别是：

col-xs-*
col-sm-*
col-md-*
col-lg-*

创建两栏布局

两栏布局是经典的页面布局，通常左侧用于内容布局，右侧用于边栏。

</div>

显示效果如下：

可以见到，当窗口缩少，两栏布局会变成单栏堆叠布局，如果不希望这种情况出现，可以为column添加更多限制：

</div>

修改之后，即使在手机这样小的屏幕中，页面依然可以维持两栏布局。

媒体查询

媒体查询的作用是检测运行当前代码的设备屏幕大小，使得我们可以根据不同的设备运用不同的设置。更具体一点，bootstrap列之间的补白（padding）是各15px，加起来间隔就是30px。通过媒体查询，可以在小屏幕设备中设置更小的padding。

less文件中的语法：

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

设置小屏幕下的padding为各5px：

该样式可直接写在style标签里面

@media (min-width: 768px)

{

div[class^="col"]{padding-left:5px; padding-right:5px;}

}

列偏移（column offset）

列偏移就是使column从原来的位置向目标点偏移指定列数。列偏移有4种不同的偏移选项，应用于4种不同屏幕大小的设备，它们分别是：

col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*

例如，在小屏幕设备使第二列向右偏移4列距离

</div>

实际上，你会发现，第二列不仅在小屏幕设备上会发生偏移，该偏移样式同样也应用到了更大的显示设备上。如果你不希望小屏幕以外的设备发生偏移，可以使用样式覆盖：

</div>

样式覆盖产生的效果和列偏移一样：小范围的样式会影响更大范围的样式，因此，设置了col-md-offset-0之后，范围比md更大的设备也不会产生列偏移。

列重排序

列的重排序通过向前推和往后拉的方式实现，向前推和往后拉具体由col-*-push-*和col-*-pull-*实现。

</div>

运行后第一列和第二列的位置互相交换。

使用表单

按照表单的排列方式划分，bootstrap有3类表单。分别是堆叠表单、内联表单和水平排列表单。

bootstrap中的表单使用样式form-control标识，且最好把表单元素放置于form-group元素标记的div中。

堆叠表单

所有表单元素从上到下排列，包括label标签本身也会占用一行

<label for="exampleInputEmail">Email address</label>

</div>

<label for="exampleInputPassword">Password</label>

</div>

内联表单

所有表单排列在一行，内联表单通过把表单元素放置于使用form-inline标记的form中来达到目的。

内联表单必须为每个input元素添加label标签，否则屏幕阅读器无法正确识别。如果确实不需要label标签，可以使用.sr-only样式标记该标签，使标签仅在屏幕阅读器下可见。

</div>

<label for="exmapleInputEmail">Email</label>

</div>

</form>

</div>

水平排列表单

一个表单排一行，这是最常用的方式。水平排列的表单使用.form-horizontal样式标记。

水平排列的表单元素配合预定义的栅格类，使表单元素可不被row包含。

<label for="inputEmail3" class="col-md-2 control-label">Email</label>

</div>

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

</div>

</form>

</div>

有两点需要注意的：

第一：配合栅格系统使用的label必须添加control-label样式修饰，否则label默认左对齐

第二：栅格系统的布局样式不能应用于input标签，label标签可以。因此input标签需要使用div包裹。

静态控件

静态控件指控件内容一般不会再改变的控件，最常见的如p标签。

如果需要在表单中将一行纯文本和label元素放置于一行，只需要为p元素添加.form-control-static样式即可。

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">email@example.com</p>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

</div>

</form>

一些代码

<!DOCTYPE html>

<head>

<title>Beginning Bootstrap</title>

.show-grid [class^=col-] {

padding-top: 10px;

padding-bottom: 10px;

background-color: #eee;

background-color: rgba(86, 61, 124, .15);

border: 1px solid #ddd;

border: 1px solid rgba(86, 61, 124, .2);

}

</style>

</head>

<body>

</div>

</body>

</html>

转载请注明：Pure nonsense » bootstrap入门

一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30