前端学习笔记：bootstrap(2)

前端学习笔记：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