项目二 任务2 使用Bootstrap栅格系统快速布局D清单页面-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用Bootstrap开源框架快速搭建响应式网页 项目二 能够使用Bootstrap的删格系统完成页面的流式布局； 能够根据网页元素选择合适的删格系统样式以响应不同视口； 能够使用Bootstrap对D清单页面进行响应式页面布局。 任务目标 任务2 使用Bootstrap栅格系统快速布局D清单页面 本次任务要求通过学习Bootstrap的删格系统知识和流式布局知识，完成D清单页面的整体布局。完成后的页面测试效果图如2-2所示。 任务描述 任务2 使用Bootstrap栅格系统快速布局页面 图2-2 移动端和电脑端布局测试页面截图 在学习以下知识技能的基础上，完成页面布局框架代码的编写，并对布局结果进行测试。需要： Bootstrap的删格系统知识； Bootstrap的布局容器、行和列等相关知识。 根据D清单页面效果图使用Bootstrap完成页面布局，并测试移动端和电脑端的布局效果。 任务分析 任务2 使用Bootstrap栅格系统快速布局页面 知识与技能准备 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，即Bootstrap将页面的每一行划分为12列的方式进行页面布局。 知识与技能准备 1、删格系统 Bootstrap的删格参数如下表： 表2-2-1 Bootstrap删格参数表 知识与技能准备 2、布局容器 Bootstrap为了保证删格布局的正常应用，需要使用布局容器（添加.container或.container-fluid类的标签）来完成页面布局。其中.container类是用于固定宽度（各视口最大宽度可参考表2-2-1）并支持响应式布局的容器。.container-fluid类是用于100%的宽度，可占据全部视口的容器。由于padding等css属性的原因，.container和.container-fluid类的标签不能互相嵌套。 知识与技能准备 3、row Bootstrap为删格添加了一个独立的类.row，以适用我们的先创建行（row），然后在行中创建列（.col-xs-*等Bootstrap删格类预定的列）的布局，同时通过为 .row 元素设置负值margin从而抵消了布局容器（.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）”在水平方向创建一组“列（column）”，然后将内容放置于“列（column，删格类.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 1 2 3 4 .row { margin-right: -15px; margin-left: -15px; } 打开2.2-1素材文件夹中的web_bootstrap文件夹，在已经配置好Bootstrap的index.html页面编写一个布局框架页面，要求如下： （1）采用100%宽度的容器 （2）在行（row）中创建一个大桌面视口下是4列、桌面视口下是2列、平板是2列、手机是1列的布局框架。 课堂练习的部分代码可参考如下示例： 课堂练习2-2-1 创建一个响应式的删格页面 1 2 3 4 5 6 7 8 <div class="container-fluid"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6">1</div> <div class="col-lg-3 col-md-6 col-sm-6">2</div> <div class="col-lg-3 col-md-6 col-sm-6">3</div> <div class="col-lg-3 col-md-6 col-sm-6">4</div> </div> </div> 知识与技能准备 4、列偏移 Bootstrap处理定义了删格，还为删格的左留白定义了一套“留白删格”，我们把它叫做