项目4任务2ppt课件.pptx

《项目4任务2ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目4任务2ppt课件.pptx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目4任务2项目4 使用Bootstrap开源框架快速搭建响应式网页任务4.2 使用Bootstrap栅格系统快速布局页面HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能够使用Bootstrap的删格系统完成页面的流式布局； 2、能够根据网页元素选择合适的删格系统样式以响应不同视口。02 本次任务要求通过学习Bootstrap的删格系统知识和流式布局知识，完成页面的整体布局。学习 1、Bootstrap的删格系统知识； 2、Bootstrap的布局容器、行和列等相关知识。

2、完成 1、页面布局框架代码的编写； 2、对布局结果进行测试。04知识学习与课堂练习 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，即Bootstrap将页面的每一行划分为12列的方式进行页面布局。 1、删格系统1、删格系统超小屏幕.手机 (768px)小屏幕.平板 (768px)中等屏幕.桌面视口 (992px)大屏幕.大桌面视口 (1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列.container最大宽度None （自动）750px970px1170px类前缀

3、.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动62px81px97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是04知识学习与课堂练习 Bootstrap为了保证删格布局的正常应用，需要使用布局容器（添加.container或.container-fluid类的标签）来完成页面布局。其中.container类是用于固定宽度（各视口最大宽度可参考表4.2-1）并支持响应式布局的容器。.container-fluid类是用于100%的宽度，可占据全部视口的容器。由于paddi

4、ng等css属性的原因，.container和.container-fluid类的标签不能互相嵌套。 Bootstrap中对.container-fluid和.container 类的属性设置如下：2、布局容器123456789101112131415161718192021222324252627.container-fluid padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;.container padding-right: 15px; padding-left: 15px; ma

5、rgin-right: auto; margin-left: auto;media (min-width: 768px) .container width: 750px; media (min-width: 992px) .container width: 970px; media (min-width: 1200px) .container width: 1170px; 04知识学习与课堂练习 Bootstrap为删格添加了一个独立的类.row，以适用我们的先创建行（row），然后在行中创建列（.col-xs-*等Bootstrap删格类预定的列）的布局，同时通过为 .row 元素设置负值m

6、argin从而抵消了布局容器（.container-fluid和.container 类）设置的左右两边padding，也就间接保留了“行（row）”所包含的“列（column）”（删格类.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）设置的padding值（左右各15px），.row类在Bootstrap的定义如右： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding），通常我们会通过“行（row）”在水平方向创建一组“列（c

7、olumn）”，然后将内容放置于“列（column，删格类.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 例如，要在一个100%宽度的容器内创建一个左右结构的布局，可以在便签内输入如右代码3、row1234.row margin-right: -15px; margin-left: -15px;12345678 左边，宽度占50%（视口分辨率大于992px时） 右边，宽度占50%（视口分辨率大于992px时）04知识学习与课堂练习课堂练习4.2-1创建一个响应式的删格页面 打开4.2-1

8、素材文件夹中的web_bootstrap文件夹，在已经配置好Bootstrap的index.html页面编写一个布局框架页面，要求如下： （1）采用100%宽度的容器 （2）在行（row）中创建一个大桌面视口下是4列、桌面视口下是2列、平板是2列、手机是1列的布局框架。 课堂练习的部分代码可参考如下示例：12345678 1 2 3 4 04知识学习与课堂练习4、列偏移 Bootstrap处理定义了删格，还为删格的左留白定义了一套“留白删格”，我们把它叫做列偏移样式。 如使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（m

9、argin）。例如，Bootstrap对.col-md-offset-*样式做了如右定义。 由样式我们可以知道，如果在桌面视口端使用了.col-md-offset-4类的标签元素，元素会向右侧偏移4个列（column）的宽度。12345678910.col-md-offset-12 margin-left: 100%;.col-md-offset-11 margin-left: 91.66666667%;.col-md-offset-10 margin-left: 83.33333333%;/*以下省略*/04知识学习与课堂练习课堂练习4.2-2创建一个“居中”的删格列 打开4.2-1完成的文

10、件，在练习4.2-1的基础上，在row内的布局框架元素上方增加标题和说明文字，要求如下： （1）标题在任何显示视口都是独立的一行显示 （2）说明文字在大桌面视口、桌面视口占页面的8等分，并居中对齐。 课堂练习的部分代码可参考如下示例：1234567891011 标题 说明文字 1 2 3 4 05任务实施 在任务1的基础上，我们需要完成页面的基本布局框架，以便在任务三中加入对应内容。 通过分析效果图片，我们不难发现，除了移动视口，其它视口下左右两边的内容与浏览器都保持着一定的边界（padding），所以我们可以判断页面布局时应该选用固定宽度容器.container。 由于背景图片与浏览器之间没

11、有边界，所以应该在.contariner外加一个普通容器用于添加背景等各类自定义样式。05任务实施 实施步骤如下，参考代码见课本 1、菜单栏 2、Banner广告 3、关于我们和招生计划 4、本科专业介绍 5、实训环境 6、优秀本科毕业生 7、联系我们 8、版权 9、测试06任务回顾学习 1、Bootstrap的删格系统原理，并对删格的核心样式（.col-）进行了分析； 2、Bootstrap删格系统的响应临界值； 3、Bootstrap的布局容器.container和.container-fluid类； 4、Bootstrap的.row类；完成 我们将这些知识运用到了我们的项目中，对项目要求的网页单页进行了框架性的布局，在不同视口下实现了左右、左中右和通栏的布局，实现了页面的响应式效果。07任务拓展 1、非等高删格元素的强制换行 2、列排序感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：