Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-使用Bootstrap实现网页响应式布局_第1页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-使用Bootstrap实现网页响应式布局_第2页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-使用Bootstrap实现网页响应式布局_第3页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-使用Bootstrap实现网页响应式布局_第4页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-使用Bootstrap实现网页响应式布局_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1Web 前端开发 项目名称使用 Bootstrap 实现网页响应式布局 课时演示性 验证性 设计性 综合性1. 具备应用 Bootstrap 实现响应式布局的能力Bootstrap的能力 2. 掌握运用 Bootstrap 实现各种响应式布局的方法1. 培养学生信息搜集能力2. 培养学生团结合作、互帮互助的能力1. 任务描述2. 任务展示与实现(1)实现云景旅游公司首页 Bootstrap 布局(2)学生动手操作3. 教师讲解本任务涉及的知识点4. 任务小结1. Bootstrap 框架的基本语法2. Bootstrap 框架实现响应式网页1. Bootstrap 框架实现响应式网页网页响应

2、式布局61使用 Bootstrap 实现公司二级页面“公司概况”的响应式效果。2教学过程手段)织做好课前“5 分钟”教学管理(多媒体、实训室)，做好上课前的各项准备工作(打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授课计划、教案等)，吸引学生注意力。【课前说明】【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目需要从 jQuery 官网上下载 jQuery.min.js 文件， Bootstrap 源文件中的.js 文件是依赖于Bootstrap 4 需要一个容器元素来包裹网页的内容，可以使用以下两个容器类。.container 类用于固定

3、宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度，占据全部视口(viewport)的容器。2、栅格系统栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局，每行中所有容器所占Bootstrap 提供了丰富的样式类，方便快速实现网页布局及设置样式。、组件Bootstrap 作为完整的前端工具集，内置了大量强大、优雅的可重用组件，包含导航、导航栏、按钮、卡片、折叠、轮播、下拉菜单、表单、输入框组、列表组、模态框、分页、弹出框、进度条、滚动条、提示框等。p32、任务拓展：使用 Bootstrap 框架重构二级页面“华阳湖景区”通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用实现响应式布局的基本方法。本节课主要运用案例教学法，通过使用 Bootstrap 框架实现云景旅游公司首页响应式效果。深入理解响应式网页的实现方法，通过实例的方法加强对实现响应式网页的理解，达到能够独立熟练运用Bootstrap 框架解决实际问题的能力。教学评价方式以小组为单位，以完成案

人人文库> 全部分类> 教育资料 > 英语等级

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论