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页面--师资模块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美联英语在线VIP-真人在线</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .container{ background-color: rgba(230,215,255,0.36); } .row{ margin-left: 75px; margin-right: 75px; } .row .row{ margin-top: 10px; } .col-md-7{ padding: 120px; background-image: url("image/oleg.png"); background-repeat: no-repeat; background-size: contain; } .col-md-3{ padding: 120px; background-image: url("image/oksana.png"); background-repeat: no-repeat; background-size: cover; } #one{ padding: 120px; background-image: url("image/ewelina.png"); background-repeat: no-repeat; background-size: cover; } #two{ padding: 120px; background-image: url("image/juraj.png"); background-repeat: no-repeat; background-size: cover; } #three{ padding: 120px; background-image: url("image/tmore.png"); background-repeat: no-repeat; background-size: cover; } #ce{ margin-left: 200px; } #ce1{ margin-left: 300px; } /* .col-md-6{ !*margin-left: auto;*! }*/ /* 记住一个新的东西通配作用*/ [class*="col-"]{ border: 15px solid white; background-color: rgba(86,61,124,0.15); /* border: 15px solid rgba(86,61,124,.2);*/ } </style> </head> <body> <div class="container"> <div class="row"><div class="col-md-6 col-md-offset-3"><h2>2000+全球师资 100%欧美外教</h2></div></div> <!--<div id="ce1"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div>--> <div class="row"><div class="col-md-6 col-md-offset-3"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div></div> <div class="row"> <div class="col-sm-12 col-md-7"></div> <div class="col-sm-12 col-md-3 col-md-offset-1"></div> </div> <div class="row"> <div class="col-lg-4 col-md-4" id="one">.col-md-4</div> <div class="col-lg-4 col-md-4" id="two">.col-md-4</div> <div class="col-lg-4 col-md-4" id="three">.col-md-4</div> </div> </div> </body> </html>
2.制作美联英语在线VIP页面--特色服务模块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美联英语</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <style> .col-md-10{ margin-top: 50px; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"><h2>更多特色服务</h2></div ></div> <!--<div id="ce1"><h4>TESOL证书/五年以上教龄/高颜值外教团</h4></div>--> <div class="row"><div class="col-md-6 col-md-offset-3"><h4>4+核心优势N+成效保障</h4></div> </div> <div class="row"> <div class="col-xs-6 col-md-2"><img src="image/3.png"></div> <div class="col-xs-6 col-md-10"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br> 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div> <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br> 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2"><img src="image/5.png"></div> <div class="col-xs-6 col-md-10"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br> 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div> <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>担心计划没有变化快？4小时+随订随上</strong><br> 在失落的地方,重拾旧梦,为梦想而努力,为成功而拼搏!无需要惊天动地,只要脚踏实地。 无论梦想将落向何方,只要一直在努力,就不会给给岁月面向太阳吧,不问春暖花开 ,只求快乐面对,因为,透过洒满阳光的玻璃窗,蓦然回首,你何尝不是别人眼中的风景</span></div> </div> </div> </div> </body> </html>
3.制作 全国 公安机关互联网安全管理服务平台登录页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全国公安机关互联网系统</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .row{ border: 1px #000000 solid; } #main{ background-image: url("image/adbg.png"); height: 385px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-1"><img src="image/logo.png" width="281px" height="80px"></div > <div class="col-md-2 col-md-offset-5"> <input type="text" class="input-sm form-control" placeholder="请输入要搜索的内容"> </div> <div class="col-md-1"><input type="button" class="btn btn-block" value="搜索"></div> <div class="col-md-4 col-md-offset-4"> <br> <span><strong>首页</strong></span> 公共查询 常见问题 政策法规 备案需知 备案展厅 </div> </div> <div class="row" id="main"> <div class="col-md-3 col-md-offset-1"><img src="image/xcy.png" width="281px" height="80px"> <img src="image/liucheng.png"> </div> <div class="col-md-3 col-md-offset-5"> <br><br><br><br> <form action="#" style="background-color: white"> 普通用户 <div class="form-group"> 用户名：<input class="input-sm" type="text" placeholder=""> </div> <div class="form-group"> 密 码：<input class="input-sm" type="text" placeholder=""> </div> <input type="radio" value="">记住密码<br> <input type="button" class="btn btn-danger" value="登录"> <br>没有账号,注册 </form> </div> </div> <div class="row"> <div class="col-md-3 col-md-offset-5"> <p>uyhijnmklghjklcvghjkfghjk</p> <p>uyhijnmklghjklcvghjkfghjk</p> <p>uyhijnmklghjklcvghjkfghjk</p> </div> </div> </div></body> </html>
4.制作美联英语在线VIP页面-微电影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微电影</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .container{ background-image: url("image/bg3.jpg"); width: 100%; height: 1000px; } #ziti{ font-size: 25px; color: white; } </style> </head> <body> <div class="container"> <br><br><br> <div class="row"> <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-4" id="ziti">学英语，看世界，小美带你GO学员</div> <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-5"><img class="img-responsive" src="image/block-split.png"></div> </div> <br> <div class="row"> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> </div> </div> </body> </html>
总结
- “行（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