6.2 预备知识-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

6.2 预备知识 单元6 Bootstrap综合项目实战 PART 01 Bootstrap概述 主要内容 CONTENTS PART 03 Bootstrap网格系统 PART 02 Bootstrap布局容器 PART 04 Bootstrap导航栏 PART 05 Bootstrap表单 PART 06 Bootstrap按钮 PART 07 Bootstrap轮播插件 2 Bootstrap概述 　　Bootstrap，来自 Twitter，是目前最受欢迎的前端轻量型框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。本单元将介绍 Bootstrap 框架的基础，通过学习这些内容，轻松创建响应式 Web 项目。 Bootstrap概述 1.Bootstrap下载 访问Bootstrap官方网站地址：http://getbootstrap.com/ ，或者Bootstrap中文网站地址：https://www.bootcss.com/，可以看到Bootstrap的各个版本。 Bootstrap中文网站首页 Bootstrap概述 选择Bootstrap4中文文档，点击“下载Bootstrap4生产文件”，即，下载经过编译的 CSS 和 JS。 Bootstrap下载页面 1.Bootstrap下载 Bootstrap概述 下载成功后，解压缩ZIP文件，Bootstrap文件夹中包含如下文件。 Bootstrap基本文件夹结构 预编译的文件可以快速用于任何 web 项目。 经过编译的 CSS 和 JS (bootstrap.*) 文件； 既编译又压缩的 CSS 和 JS (bootstrap.min.*) 文件； Source maps (bootstrap.*.map) 文件可与某些浏览器的开发者工具协同使用。 打成集成包的 JS 文件（bootstrap.bundle.js 以及压缩后的 bootstrap.bundle.min.js）包含了 Popper，但并不包含 jQuery。 注意：Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。如果需要用之前的浏览器，请使用 Bootstrap3。 1.Bootstrap下载 Bootstrap概述 如果一个HTML文件想要使用Bootstrap，该HTML文件必须导入Bootstrap文件夹下的bootstrap.css、jquery.js、bootstrap.js等文件。 2.环境安装 为保证网页在移动端也能正常显示，确保适当的绘制和触屏缩放，需要在网页的<head>之中添加“viewport”（视口）<meta>标签。 导入bootstrap.css。 导入jQuery。Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边导入。 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 【案例6.2.1】Bootstrap 模板 Bootstrap布局容器 Bootstrap包中提供了两个容器类：.container类和 .container-fluid类。 <div class = "container" > … </div > .container类适用于宽度固定且支持响应式布局的容器 <div class = "container-fluid" > … </div > .container-fluid类适用于设置100%宽度，且占据全部视口（viewport）的容器 Bootstrap布局容器 Bootstrap网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列，我们也可以根据自己的需要，定义列数。 Bootstrap网格系统 Bootstrap 4 的网格系统是响应式的，“列”会根据屏幕大小自动重新排列。 Bootstrap网格系统 网格系统通过一系列包含内容的行和列来创建页面布局。 1.网格系统工作原理 工作原理： “行”必须放置在.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，以便获得适当的对齐（alignment）和内边距（padding）。 使用“行”来创建列的水平组。 内容应该放置在“列”内，且唯有“列”可以是“行”的直接子元素。 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更