版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
掌握栅格布局的概念掌握栅格布局的使用掌握响应式工具掌握辅助样式任务描述完成“我的订单页”的布局浏览器窗口大于等于992px任务描述完成“我的订单页”的布局浏览器窗口小于992px，大于等于576px任务描述完成“我的订单页”的布局浏览器窗口小于等于575px栅格布局的概念栅格布局的概念栅格布局的基本概念栅格布局：是一个基于12列的布局，它具有的5种响应尺寸分别对应不同的屏幕大小。
栅格布局作用：通过一系列的行（row）与列（column）的组合来创建页面布局。
栅格布局的概念
超小屏幕(≤575px)小屏幕(≥576px)中等屏幕(≥768px)大屏幕(≥992px)超大屏幕(≥1200px).container最大容器宽度自动(100%)540px720px960px1140px类前缀.col-.col-sm-.col-md-.col-lg-.col-xI-栅格布局类前缀栅格布局的使用栅格布局的使用基本使用步骤Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。
每一行（row）必须包含在布局容器.container类或.container-fluid类中。
栅格布局的使用基本使用步骤通过行可以创建水平方向的列组，并且只有列（column）可以作为行（row）的直接子元素。例如，可以使用4个.col-md-3来创建4个等宽的列。
内容只能放置于列内，列大于12时，将会另起一行排列。
栅格布局的使用通过类前缀设置每列的宽度col-栅格的数量(设置超小设备);col-sm-栅格的数量(设置平板);col-md-栅格的数量(设置桌面显示器);col-lg-栅格的数量(设置大桌面显示器);col-xl-栅格的数量(设置超大桌面显示器);栅格的基本结构第一个例子<divclass="row"><divclass="col-*-*"></div></div><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div><divclass="col-*-*"></div></div>第二个例子<divclass="row"><divclass="col"></div><divclass="col"></div><divclass="col"></div></div>栅格布局的使用栅格布局的使用1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<metaname=”viewport”content=”width=device-width,initial-scale=1.0,shrink-to-fit=no”>6<linkrel=”stylesheet”href=”bootstrap-4.6.1-dist/css/bootstrap.min.css”>7<title>Bootstrap实例</title>8</head>9<body>10<divclass="container-fluid">11 <h4>平板、桌面、大桌面显示器、超大桌面显示器</h4>12 <divclass="row">13 <divclass="col-sm-3col-md-6col-lg-4col-xl-2bg-success">内容1</div>14 <divclass="col-sm-9col-md-6col-lg-8col-xl-10bg-warning">内容2</div>15 </div>16</div>17</body>18</html>运行结果栅格的基本结构的示例响应式工具响应式工具
xssmmdlgxld-noned-sm-blockhiddenvisiblevisiblevisiblevisibled-noned-md-blockhiddenhiddenvisiblevisiblevisibled-noned-lg-blockhiddenhiddenhiddenvisiblevisibled-noned-xl-blockhiddenhiddenhiddenhiddenvisibled-blockd-sm-nonevisiblehiddenhiddenhiddenhiddend-blockd-md-nonevisiblevisiblehiddenhiddenhiddend-blockd-lg-nonevisiblevisiblevisiblehiddenhiddend-blockd-xl-nonevisiblevisiblevisiblevisiblehidden如何实现在不同屏幕上自适应隐藏或显示HTML元素呢?辅助样式辅助样式类名说明.text-bodybody文本颜色.text-light浅灰色文本.text-white白色文本.text-black黑色文本.text-primary首选文本颜色，重要的文本.text-secondary副标题颜色.text-success成功文本颜色.text-warning警告信息文本颜色.text-muted柔和颜色.text-danger危险提示文本颜色.text-info一般提示信息文本颜色.text-dark深灰色文本常用的文本颜色辅助样式类名说明.bg-light浅灰色背景.bg-white白色背景.bg-transparent透明背景色.bg-primary重要的背景颜色.bg-secondary副标题背景颜色.bg-success成功背景颜色.bg-danger危险提示背景颜色.bg-warning一般提示信息背景颜色.bg-info警告信息背景颜色.bg-dark深灰色背景常用的背景颜色辅助样式类名说明.p-auto（或.m-auto）设置padding或margin为auto.p-0（或.m-0）设置边距为0.p-1（或.m-1）设置padding或margin为0.25rem.p-2（或.m-2）设置padding或margin为0.5rem.p-3（或.m-3）设置padding或margin为1rem.p-4（或.m-4）设置padding或margin为1.5rem.p-5（或.m-5）设置padding或margin为3rem设置内外边距值辅助样式类名说明.mx-3{margin-left:1rem!important;margin-right:1rem!important;}.my-3{margin-top:1rem!important;margin-bottom:1rem!important;}.mt-3{margin-top:1rem!important;}.mr-3{margin-right:1rem!important;}.mb-3{margin-bottom:1rem!important;}.ml-3{margin-left:1rem!important;}设置一侧外边距值任务实现页面结构：页面结构划分如图所示。分析“我的订单页”的布局任务实现实现步骤：使用布局容器带有.container类的<div>标签进行布局。写出整体的HTML代码结构。使用栅格布局为header部分划分结构使用栅格布局为middle部分划分结构分析“我的订单页”的布局<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1"> <!--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！--> <title>我的订单</title> <!--Bootstrap--> <linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/> <!--自定义样式--> <linkrel="stylesheet"type="text/css"href="css/style.css"/></head><body> <divclass="containermt-3"> <divclass="headerrow">
任务实现代码如下： <divid="logo"class="col-lg-3col-md-3col-sm-12col-12"></div> <divid="search"class="col-lg-7col-md-5d-noned-lg-block"></div> <divid="mycart"class="col-lg-2d-noned-lg-block"></div> </div> <divclass="middlerow"> <divclass="leftcol-lg-3col-md-3d-noned-lg-block"></div> <divclass="rightcol-lg-9col-md-9col-sm-12col-12"><d
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024-2025学年度机械设备制造修理人员全真模拟模拟题1套附答案详解
- 2024-2025学年大连汽车职业技术学院单招《语文》真题附参考答案详解（综合题）
- 2024-2025学年度电工通关题库及完整答案详解一套
- 2024-2025学年医学检验(士)过关检测试卷附参考答案详解（综合题）
- 2024-2025学年咨询工程师通关考试题库【模拟题】附答案详解
- 2024-2025学年度护士资格证综合提升测试卷附参考答案详解（综合题）
- 鼻中隔偏曲的物理治疗护理
- 2024-2025学年医师定期考核练习题带答案详解（考试直接用）
- 2024-2025学年化验员考前冲刺练习题及答案详解【全优】
- 就项目合作事宜的确认函6篇范本
- 2026年上饶职业技术学院单招职业技能考试必刷测试卷附答案
- 饿了么代理协议书
- 油锅起火应急处理课件
- 《幼儿数学教育活动设计与指导（第3版）》课件-第七章 幼儿空间方位概念的发展和教育
- 地坪漆专业知识培训课件
- 2025年及未来5年中国木薯行业市场前景预测及投资方向研究报告
- 义乌教研课题申报书
- 高职院校课程思政建设的质量评价指标体系
- 病历书写基本规范2025年版
- 酒店员工财务知识培训课件
- 吉尔吉斯斯坦比什凯克市大学汉字教学：现状、问题与对策探究
评论
0/150
提交评论