前端学习笔记:bootstrap(2)
二、栅格系统
1.组成
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的特点:
(1)“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内间距(padding)。
(2)通过“行(row)”在水平方向创建一组“列(column)”。
(3)你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
(4)栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
(5)如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
2.网页布局的两种容器
布局的两种容器的类样式名说明
container 在不同的分辨率下显示不同的固定宽度
container-fluid 始终以100%的宽度显示页面
案例代码:
<div class="container" style="border:1px solid red; height:200px;">
container容器:固定大小
</div>
<div class="container-fluid" style="border:1px solid red; height:200px">
container-fluid:100%宽度
</div>
3.媒体查询@media
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体(设备)类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小于或等于”。 打开文件:bootstrap.css,可以看到以下代码:
/* 当设备的最小宽度大于或等于768时,容器的宽度是750px */
@media (min‐width: 768px) {
.container {
width: 750px;
}
}
/* 当设备的最小宽度大于或等于992时,容器的宽度是970px */
@media (min‐width: 992px) {
.container {
width: 970px;
}
}
4.基本写法
栅格系统 描述 类似于表格
.container或.container-fluid 整个布局的容器 table
.row 容器中的一行 tr
.col-xx-n xx有四个取值:1)lg大型设备,如电视。2)md中型设备,如电脑。3)sm小型设备,如平板。4)xs微型设备,如手机。n这一列占几格,一行最多12格。 表示row中的一列,如:1)col-md-4中型设备上占4列。2)col-xs-6微型设备上占6列。 td
5.栅格的参数
超小设备手机(<768px) 小型设备平板电脑(>=768px) 中型设备台式电脑(>=992px) 大型设备台式电脑(>=1200px)
最大容器宽度 None(auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列# 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px(一个列的每边分别15px) 30px(一个列的每边分别15px) 30px(一个列的每边分别15px) 30px(一个列的每边分别15px)
可嵌套 Yes Yes Yes Yes