响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第8章 Bootstrap基础入门.pptx

第8章Bootstrap基础入门《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target了解Bootstrap的概念，能够说出什么是Bootstrap熟悉Bootstrap的特点和组成，能够总结Bootstrap的特点和组成掌握Bootstrap的下载和引入，能够独立完成Bootstrap的下载和引入掌握Bootstrap布局容器的使用方法，能够使用容器类创建不同特征的布局容器

学习目标/Target掌握Bootstrap栅格系统的使用方法，能够运用栅格系统创建页面布局掌握Bootstrap工具类的使用方法，能够运用工具类根据不同的设备自动应用特定的样式掌握表单控件样式类的使用方法，能够灵活设置输入框、下拉菜单、单选按钮、复选框和输入组的样式掌握表单布局方式，能够实现行内表单、水平表单和响应式表单布局效果

学习目标/Target掌握文本格式类和文本颜色类的使用方法，能够设置文本的格式和颜色掌握背景颜色类和边框样式类的使用方法，能够为元素设置背景颜色和边框样式掌握需求定制列表页面的制作方法，能够完成需求定制列表页面的开发掌握用户注册页面的制作方法，能够完成用户注册页面的开发

章节概述/Summary在使用Bootstrap进行响应式网页开发之前，首先要学习下载和引入Bootstrap，然后学习Bootstrap的布局容器、栅格系统和工具类等知识。只有对这些知识有深入的理解，才能充分发挥Bootstrap的优势，并在实际项目中实现灵活且高效的开发。本章将详细讲解Bootstrap的基础知识以及如何应用表单控件的样式和布局等内容。

目录/Contents8-18-2需求定制列表页面用户注册页面

需求定制列表页面项目8-1

项目需求随着科技的不断进步和经济的发展，旅游行业越来越多地采用数字技术和互联网平台来提供更便捷和个性化的服务。某旅游公司正在使用Bootstrap开发一个旅游平台，当前正在进行需求定制列表的开发。

项目需求制作需求定制列表页面的具体要求如下。①需求定制列表布局：在中型及以上设备（视口宽度≥768px）中每行呈现3个列表项，在小型设备（576px≤视口宽度768px）中每行呈现2个列表项。②列表项内容：每个列表项包含一个定制服务的图像、标题、介绍信息以及一个超链接。③鼠标指针悬停效果：当鼠标指针悬停在列表项上时，将图像的颜色进行反转（例如，白色变成黑色，黑色变成白色），将介绍信息的文本颜色设置为白色，将超链接的文本颜色和边框颜色设置为白色。④动画过渡效果：鼠标指针悬停效果的触发和恢复都应该有平滑的动画过渡，确保视觉效果的连贯性和流畅性。

项目需求初始页面和鼠标指针移入列表项的效果如下图所示。

知识储备先定一个小目标！了解Bootstrap的概念，能够说出什么是Bootstrap1.Bootstrap概述

知识储备1.Bootstrap概述Bootstrap是一款开源的前端UI框架，用于构建响应式、移动设备优先的项目，因其具有学习成本低、容易上手等优势，深受开发者的欢迎。Bootstrap提供了一套CSS样式和JavaScript插件，可以帮助开发者快速搭建具有统一外观的响应式页面。

知识储备1.Bootstrap概述这里所说的响应式页面是一种能够在不同设备中自动适应屏幕尺寸和设备特性的网页，它能够以一种优雅且一致的方式在各种设备上呈现。无论屏幕大小如何变化，响应式页面都能呈现良好的显示效果。

知识储备1.Bootstrap概述Bootstrap于2011年8月在GitHub上发布，一经发布就受到了开发者广泛的欢迎。在其发展过程中，Bootstrap经历了5个重大版本更新，具体如下。①1.x版本：初始版本，具有基本的CSS样式，为开发者提供一些常用的组件和布局工具。②2.x版本：将响应式功能添加到整个框架中。③3.x版本：重写了整个框架，并将“移动设备优先”这一理念深刻融入整个框架。④4.x版本：重写了框架，其有两个架构方面的关键改变，一个是使用Sass编写代码，另一个是采用弹性盒布局。⑤5.x版本：通过尽量少的代码来改进4.x版本。此外，5.x版本放弃了对老旧浏览器的支持，仅支持较新的浏览器，而且不再依赖jQuery。本课程基于5.3.2版本进行讲解。

知识储备先定一个小目标！熟悉Bootstrap的特点，能够总结Bootstrap的特点2.Bootstrap的特点

知识储备2.Bootstrap的特点Bootstrap主要具有如下6个特点。（1）移动设备优先Boo