Bootstrap响应式Web开发PPT完整全套教学课件.pptx

第1章 初识Bootstrap《Bootstrap响应式Web开发》 学习目标/Target 掌握Bootstrap的概念、特点及组成 了解PC端浏览器和移动端浏览器的区别 熟悉Visual Studio Code编辑器的使用 熟悉移动Web开发的主流方案 章节概述/ SummaryBootstrap是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展。为了让读者对Bootstrap有一个初步的认识，本章将会对Boostrap的基本概念、浏览器、Visual Studio Code编辑器，以及移动Web开发主流方案进行详细地讲解。 目录/Contentootstrap概述浏览器Visual Studio Code编辑器移动端Web开发主流方案 Bootstrap概述1.1 1.1.1 什么是Bootstrap 先定一个小目标！了解什么是Bootstrap 1.1.1 什么是BootstrapBootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap框架 1.1.2 Bootstrap的特点 先定一个小目标！掌握Bootstrap的特点 1.1.2 Bootstrap的特点Bootstrap框架的特点：低成本，易上手CSS预编译框架成熟丰富的组件库响应式设计移动设备优先浏览器支持 1.1.3 Bootstrap的组成 先定一个小目标！掌握Bootstrap的组成 1.1.3 Bootstrap的组成Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。基本结构Bootstrap包含了丰富的组件库，提供了十几个可重用的组件。布局组件Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class。CSS样式库Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件。插件Bootstrap的组成Bootstrap框架的组成： 浏览器1.2 1.2.1 PC端的浏览器 先定一个小目标！了解浏览器 1.2.1 PC端的浏览器浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。浏览器内核主要包括Blink、WebKit和Trident等。PC端的浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。Chrome浏览器 1.2.1 PC端的浏览器213市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript?V8引擎，速度很快。可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。Chrome浏览器的优势： 1.2.2 移动端设备移动端设备主要包括Android、iOS等手机设备。屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。常见移动端设备 1.2.2 移动端设备移动端设备屏幕尺寸（英寸）分辨率（px）iPhone 6/6S/7/84.7750 ×1334iPhone 6/7/8 plus5.51080 × 1920iPhone X/XS5.81125 × 2436iPhone XR6.1828 × 1792iPhone XS Max6.51242 × 2688常见的移动端设备的屏幕尺寸： 1.2.2 移动端设备移动端设备屏幕尺寸（英寸）分辨率（px）iPad Mini 4/27.91536 × 2048Samsung Galaxy S10+6.41440 × 3040Samsung Galaxy S206.2（直角）1440 ×3200Samsung Galaxy S20+6.71440 ×3200Samsung Galaxy S20 Ultra6.91440 ×3200Samsung Galaxy Note45.71440 × 2560常见的移动端设备的屏幕尺寸： 1.2.3 移动端的浏览器移动端的浏览器主要包括Android Browser和Mobile Safari，以及国产浏览器。浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。QQ浏览器 1.2.3 移动端的浏览