ACCP8.0Y2Web前端框架与移动应用开发第2章Bootstrap样式
2024-07-01 10:18:13
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="data: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="data: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="data: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="data: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="data: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="data:image/xcy.png" width="281px" height="80px"><img src="data: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="data: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="data: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="data: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="data: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="data: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
转载于:https://www.cnblogs.com/a782126844/p/7136213.html
ACCP8.0Y2Web前端框架与移动应用开发第2章Bootstrap样式相关推荐
- ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页
项目代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件
杂记 插件之间的依赖关系 某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系.注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所 ...
- 10大H5前端框架，让你开发不愁
作为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿 ...
- Web 前端框架分类解读
Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...
- 目前得前端框架都有哪些？
1.AngularJS Angular JS 是一个有Google维护的开源前端web应用程序框架.它最初由Brat Tech LLC的Misko Hevery于2009年开发出来.Angular J ...
- java版 SpringCloud 之目前得前端框架都有哪些？
1.AngularJS Angular JS 是一个有Google维护的开源前端web应用程序框架.它最初由Brat Tech LLC的Misko Hevery于2009年开发出来.Angular J ...
- 前端框架之Bootstrap
框架概述: bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是 ...
- 使用jdcloud-wui筋斗云前端框架如何快速定位到源码
jdcloud-wui是筋斗云前端框架,使用模型驱动开发的思想,主要用于桌面管理端的快速开发. 它主要由逻辑页和对话框作为模块化的开发单元构成,下面就是一个典型的逻辑页和一个对话框(右边部分是在cho ...
- 想知道「星图地球开发者平台」是否支持前端框架代码导入导出？
对于开发者来说,开发平台如果支持前端框架代码导入导出,那将是非常方便的事.因为这样就能跨环境开发了,对于在私有化环境下开发时的远程运维调试页非常便利. 为了方便数字地球开发者们,作为面向数字地球开发者 ...
最新文章
- Android开发--事件的处理/按键按下，弹起，触摸事件等
- esp32 蓝牙启动流程_TWS真无线蓝牙耳机多功能测试设备
- boost::intrusive::circular_list_algorithms用法的测试程序
- C# 8 新特性 - 可空引用类型
- 【MOSS】快速调试Sharepoint站点
- 一点一点看JDK源码（五）java.util.ArrayList 后篇之removeIf与Predicate
- OpenResty(nginx)操作redis的初步应用
- 图解CSS3----3-目标伪类选择器
- Access入门简单教程
- apkg格式怎么打开_PDF文件怎么压缩？这里有几个小技巧~
- 2017兰州高中计算机考试时间,兰州2017年中考考试时间安排
- 视频中的目标检测与图像中的目标检测具体有什么区别？
- 基于python的opencv的学习
- win10打开计算机闪屏,Win10打开资源管理器闪屏怎么办？Win10资源管理器闪屏问题的解决方法...
- 「补课」进行时：设计模式(15)——观察者模式
- [转]倾斜摄影单体化实现方案
- Android实现蓝牙（BlueTooth）设备检测连接
- 个人博客园样式、背景及细节美化过程
- Ubuntu16.04安装GTX960闭源驱动（Dell XPS 9550）
- 大脑神经网络是如何形成的,大脑自组织神经网络