1.CSS12栅格系统是整个Bootstrap的核心功能
2.Bootstrap所有的jquery都要用到jquery1.10+
3.栅格系统的工作原理：
一行数据必须包含在.container或.container-fluid中
使用row在水平方向创建一组column
具体内容要放在column中只有column才是row的直接子元素
内置很多样式
通过padding创建column之间的间隙
1-12表示跨越范围
通过下表可以详细查看 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%宽度 row行
column 列 offset偏移 form-control表单元素 default默认
primary默认的 img-response响应式图片 img-rounded将图片变为圆角
img-circle圆形图 img-thumbnail伸缩图
二.预习部分
1.什么是栅格系统
把网页宽度平分12份，并且可以自由搭配
2.写出可以作为按钮使用的标签或者元素
btn-success，btn-default，btn-warning
btn-danger，btn-link，btn-info，btn-primary
三.练习部分
1.制作美联英语在线VIP页面--师资模块
美联英语在线VIP-真人在线 2000+全球师资 100%欧美外教
TESOL证书/五年以上教龄/高颜值外教团
.col-md-4.col-md-4.col-md-4
2.制作美联英语在线VIP页面--特色服务模块
美联英语 更多特色服务
4+核心优势N+成效保障
担心计划没有变化快？4小时+随订随上 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景
担心计划没有变化快？4小时+随订随上 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景
担心计划没有变化快？4小时+随订随上 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景担心计划没有变化快？4小时+随订随上 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景
3.制作 全国 公安机关互联网安全管理服务平台登录页面
全国公安机关互联网系统 
首页 公共查询 常见问题 政策法规 备案需知 备案展厅
uyhijnmklghjklcvghjkfghjk
uyhijnmklghjklcvghjkfghjk
uyhijnmklghjklcvghjkfghjk
4.制作美联英语在线VIP页面-微电影
微电影 学英语，看世界，小美带你GO学员
ibbhjhbh
总结
- “行（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。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的
原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997