首页 > 代码库 > bootstrap 学习总结
bootstrap 学习总结
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。当前最新版本是3.2.0;
使用的第一步,可以直接复制官方的模版,另存为index.html. 这一过程相当于是搭好一个框架,像我们使用yii需要引入它的框架文件一样。
模板是这个样子的:
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://www.mamicode.com/js/bootstrap.min.js"></script> </body></html>
如果只是初步的学习,其实可以只引入“bootstrap.min.css”这一个就可以了。其它文件都可以看成是功能的扩展和增强。
说到bootstrap,首先要了解的是它的栅格系统。这让我不禁想起了用表格布局的年代,但是这个栅格和表格还是有很大的不同的。
要用珊格系统呢,首先要创建一个容器,container或container-fluid.
<div class="container"> ...</div>
<div class="container-fluid"> ...</div>
这相当于是创建一个<table></table>,所以接下来,要创建行和列也是情理之中的啦。
<div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-8">col-xs-8</div></div>
<div class="row"></div> 这个就相当于是<tr></tr>,<div class="col-xs-4"></div>就相当于是<td></td>
col-xs-4 是代表了三个意义:col表是创建的是一个列,xs表示小屏设备,4呢,表示把一行划分成12份,它占4份。它就是用这种方法来实现布局的,所以,这和表格的布局方式多少有几分相似,但是表格呢不会根据屏幕的宽度实现自动增减列数和调整列宽,栅格系统可以看成是一个更灵活的表格。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - The negative margin is why the examples below are outdented. It‘s so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4
. - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
.container
修改为 .container-fluid
,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。.col-xs-*
和 .col-md-*
。请看下面的实例,研究一下这些是如何工作的。<!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>
通过观察css样式,可以发现,如果在class中写了多个不同类型的col,那么bootstrap会自动匹配当前屏莫的宽度,来选择最适合的col类型。通过观察css可以发现,
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }
原来是应用了媒体查询。
关于布局,还有一个知识点,那就是列偏移。
列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
学会用bootstrap的第一步呢,就是要撑握它的栅格布局。
bootstrap 学习总结