Bootstrap响应式Web开发（第2版）-课件 第1章 初识Bootstrap.pptx

第1章初识Bootstrap《Bootstrap响应式Web开发（第2版）》

学习目标/Target了解Bootstrap的概念，能够说出什么是Bootstrap熟悉Bootstrap的特点，能够归纳Bootstrap的特点熟悉Bootstrap的组成，能够归纳Bootstrap的组成部分了解PC端浏览器，能够列举常见的PC端浏览器了解移动端浏览器，能够列举常见的移动端浏览器

学习目标/Target掌握VisualStudioCode编辑器的下载和安装方法，能够独立完成VisualStudioCode编辑器的下载和安装掌握中文扩展包的安装，能够在VisualStudioCode编辑器中安装中文扩展包掌握VisualStudioCode编辑器的使用方法，能够在项目中创建HTML5文档了解移动Web开发的主流方案，能够说出两种主流的移动Web开发方案

章节概述/Summary近年来，随着移动互联网的持续发展，不断涌现出各种移动设备，这些设备的屏幕尺寸多种多样，而网页需要根据用户使用的具体设备进行适配，以确保用户具有最佳的浏览体验。为了解决网页在不同设备中的适配问题，Bootstrap应运而生。为了使读者对Bootstrap有一个初步的认识，本章将对Bootstrap、浏览器、VisualStudioCode编辑器、移动Web开发的主流方案等内容进行详细讲解。

目录/Contents1.11.2Bootstrap浏览器1.31.4VisualStudioCode编辑器移动Web开发的主流方案

Bootstrap1.1

1.1.1Bootstrap概述先定一个小目标！了解Bootstrap的概念，能够说出什么是Bootstrap

1.1.1Bootstrap概述什么是Bootstrap？

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

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

1.1.2Bootstrap的特点先定一个小目标！熟悉Bootstrap的特点，能够归纳Bootstrap的特点

1.1.2Bootstrap的特点移动设备优先Bootstrap的默认样式针对移动设备进行了优化。Bootstrap的特点浏览器支持Bootstrap支持主流的浏览器，包括PC端浏览器和移动端浏览器。学习成本低、容易上手只需具备HTML、CSS和JavaScript的基础知识，即可学习Bootstrap。响应式设计Bootstrap支持响应式设计。快速开发Bootstrap提供了大量的样式和组件，可以快速构建出美观的页面。方便定制Bootstrap具有高定制性，开发者可以根据项目需求和设计要求，选择需要的组件和样式进行自定义。

1.1.3Bootstrap的组成先定一个小目标！熟悉Bootstrap的组成，能够归纳Bootstrap的组成部分

1.1.3Bootstrap的组成Bootstrap提供了包含栅格系统、布局容器等基础元素的样式。除此之外，Bootstrap还提供了大量的CSS样式类。CSS样式提供了一系列常用的布局组件，例如按钮、下拉菜单、分页导航、警告框等组件。布局组件Bootstrap提供了一系列能实现交互功能的JavaScript插件。JavaScript插件Bootstrap拥有开源的图标库。图标文件使用SVG格式，几乎可在任何屏幕尺寸下保持清晰度和质量。图标库Bootstrap的组成

浏览器1.2

1.2.1PC端浏览器先定一个小目标！了解PC端浏览器，能够列举常见的PC端浏览器

1.2.1PC端浏览器什么是PC端浏览器？

1.2.1PC端浏览器PC端浏览器是指运行在个人计算机（Per