Web前端技术项目式教程课件 任务九 使用Bootstrap实现网页响应式布局

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务九

使用Bootstrap实现网页响应式布局知识目标1熟悉如何从Bootstrap官方网站下载和引入框架。2熟悉栅格系统的基本概念。能力目标1能在页面中引入Bootstrap前端框架。2能使用Bootstrap前端框架的布局、栅格系统搭建网页基本结构。34能使用Bootstrap前端框架的基本样式美化网页。能使用Bootstrap前端框架的组件进行快捷开发。素质目标1培养学生标准化开发Web前端代码的意识。2培养学生严谨规范的习惯。思维导图任务描述Bootstrap是目前流行的开发响应式网页开发框架，具有简便、高效的特点。为学习该框架，李明决定使用Bootstrap对网页进行重构。本任务的具体要求是使用Bootstrap将中华传统文化网站首页重构为响应式页面。知识引入1.Bootstrap环境搭建2.容器3.栅格系统4.样式5.组件

1.Bootstrap环境搭建我们可以通过以下两种方式来安装Bootstrap5：①从Bootstrap官网下载Bootstrap5。②使用Bootstrap5CDN，国内推荐这种方式，即使用StaticfileCDN上的库：1.Bootstrap环境搭建<!--新Bootstrap5核心CSS文件--><linkrel="stylesheet"href="/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!--最新的Bootstrap5核心JavaScript文件--><scriptsrc="/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script><!--最新的Bootstrap5核心JavaScript文件，提供弹窗、轮播图和下拉菜单功能--><scriptsrc="/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>1.Bootstrap环境搭建如果你的项目中只需要使用Bootstrap的基本功能（如导航条、按钮、表单等），并且已经引入了jQuery，那么可以使用bootstrap.min.js。如果你的项目中需要使用到下拉菜单、弹出框、工具提示等需要Popper.js的功能，或者希望减少代码的复杂性，建议使用bootstrap.bundle.min.js，因为它已经集成了Popper.js，无需额外引入。2.容器Bootstrap需要一个容器元素来包裹网页的内容，可以使用以下两个容器类。.container类：用于固定宽度并支持响应式布局的容器。.container-fluid类：用于100%宽度，占据全部视口（viewport）的容器。3.栅格系统栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，每行中所有容器所占的列数之和必须等于12。4.样式Bootstrap提供了丰富的样式类，方便快速实现网页布局及设置样式。5.组件Bootstrap作为完整的前端工具集，内置了大量强大、优雅的可重用组件，包含导航、导航栏、按钮、卡片、折叠、轮播、下拉菜单、表单、输入框组、列表组、模态框、分页、弹出框、进度条、滚动条、提示框等。任务实现：使用Bootstrap重构中国传统文化网站首页1.安装Bootstrap2.

首页头部区域代码实现3.图片轮播效果代码实现4.

快速了解中国传统文化区域代码实现5.

图片展示区域代码实现6.

云览中国区域代码实现7.页脚区域代码实现任务拓展：使用Bootstrap布局重构二级页面“传统建筑”

请大家使用Bootstrap布局将二级页面“传统建筑”重构为响应式网页。任务小结本任务首先介绍了Bootstrap的概念，帮助读者建立对Bootstrap的初步认知。然后讲解了容器、栅格系统的基本概念，以及在页面中引入Bo