bootstrap的架构原理
先来看一段哪儿都能搜到的文字简单了解一下bootstrap：
bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备有先的web项目（bootstrap中文网）。作用是使用一份代码适配多种设备，当然这是离不开CSS媒体查询的。
它的架构组成就好像是一个金字塔，每一层都是基于它底下一层的基础之上。最底层到最顶层依次是：
- 响应式设计（一个网站可以兼容多种终端设备）
- 栅格系统
- HTML基础布局组件
- CSS组件
- JS插件
bootstrap栅格系统
在bootstrap中，栅格系统将网页均分为12等份，自由按份组合出不同布局的网页界面。下面介绍一下栅格系统的工作原理：
- 行必须包括在.container（固定宽度）或.container-fluid（100%宽度）中
- 通过行，在水平方向创建一组列
- 内容应放置于列内，列是行的直接子元素
- 通过给列设置padding属性，形成列与列之间的间隔
- 通过为第一列和最后一列设置负值margin，来抵消为.container元素设置的padding
- 列是指通过指定1-12的值表示其跨越的范围
- 如果一行中包含的列大于12，多余的列中的元素将被作为一个整体另起一行排列
- col-xx-push设置的是left值，col-xx-pull设置的是right值，col-xx-offset设置的是margin-left值（可以实现列偏移）
- 多种设备上栅格系统的行为：
| 超小屏幕（手机）：<768px | 小屏幕（平板）：≥768px | 中等屏幕（桌面显示器）：≥992px | 大屏幕（大桌面显示器）：≥1200px | |
|---|---|---|---|---|
| 栅格系统 | 总是水平排列 | 开始时堆叠在一起，当到达这些阈值时变为水平排列 | ||
| 列数 | 12 | |||
| 槽宽 | 30px（左右各15px） | |||
| 是否可嵌套 | 是 | |||
| .container最大宽度 | 自动 | 750px | 970px | 1170px |
| 最大列宽 | 自动 | 62px | 81px | 97px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
bootstrap布局方式
bootstrap提供了两种布局方式：固定（fixed）布局 and 流式（fliud）布局。如下图所示，左固定，右流式：
- 固定布局
<body> <div class="container"> </div> </body> - 流式布局
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div>
bootstrap的使用
有三种方式：
- 用于生产环境的bootstrap：包括CSS、JavaScript和字体文件。初学者常用。
- bootstrap源码：包含Less、JavaScript和字体文件的源码，编译压缩后就是第一种用于生产环境的bootstrap。
- Sass：这是bootstrap从Less到Sass的移植项目。
Less
Less是一门预处理语言，支持变量、mixin、函数等额外功能。bootstrap的CSS文件是通过Less源码编译而来。编译bootstrap有两种方式：使用编译后的CSS文件或使用Less源码文件。
bootstrap中文网对bootstrap的下载安装等都有详细的介绍说明，此篇就不再班门弄斧，更多请读：https://www.bootcss.com/
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
