Bootstrap 概述

什么是 Bootstrap

Bootstrap 是由 Twitter 公司的设计师 Mark Otto（马克·奥托）和 Jacob Thornton（雅各布·桑顿）合作开发的开源框架，该框架基于 HTML、CSS 和 JavaScript 语言编写，于 2011 年 8 月在 GitHub 上发布，一经推出就颇受欢迎。Bootstrap 具有简单、灵活的特性，常用于开发响应式布局和移动设备优先的 Web 项目，能够帮助开发者 快速搭建前端页面 。

1
2
3
4

    # 所谓框架，顾名思义就是一套架构，它有一套比较完整的解决方案，而且控制权在框架本身。

    # Bootstrap是一款用于网页开发的框架，它拥有样式库、组件和插件，
      使用者需要按照框架所规定的某种规范进行开发。

Bootstrap 特点

1. 响应式设计

   • Bootstrap 框架为用户提供了一套响应式的移动设备优先的流式栅格系统，拥有完备的框架结构,项目开发方便、快捷，提高了开发效率。

2. 移动设备优先

   • 随着移动设备的使用者越来越多，自 Bootstrap 3 开始，框架设计理念发生了改变，转为以移动设备优先为目标，Bootstrap 3 默认样式为移动设备提供了友好的支持。

3. 浏览器支持

   • 目前主流浏览器都支持 Bootstrap 框架，包括 IE、Firefox、Chrome、Safari 等。Bootstrap 4 兼容IE10+和iOS 7+。

4. 低成本、易上手

   • 学习 Bootstrap 框架的门槛不高，只需要读者具备 HTML、CSS 和 JavaScript 的基础知识即可。

   • Bootstrap 框架拥有完善的文档，在开发中便于查找，使用起来比较方便。Bootstrap 还具有强大的扩展性，能够很好地与现实中的 Web 开发项目相结合。

5. CSS预编译

   • CSS 预编译的工作原理是，提供便捷的语法和特性以便开发者编写源码，然后使用专门的编译工具将源码转化为 CSS 语法。Bootstrap 4 中使用 Sass（一种 CSS扩展语言）进行 CSS 编写和预编译，减少了冗余代码，使 CSS 样式代码更容易维护和扩展。

6. 框架成熟

   • Bootstrap 框架发展比较成熟，它不断适应 Web 技术的发展，在原有的基础上进行更新迭代和完善，并在大量的项目中被广泛使用，并通过不断测试得以完善。

7. 丰富的组件库

   • Bootstrap 框架提供了功能强大的组件与插件，如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。

浏览器

PC 端浏览器

目前，市面上的浏览器种类繁多，如果按照设备类型来划分，主要包括PC端浏览器和移动端浏览器﹔如果按照浏览器的内核来划分，主要包括 Blink、WebKit 和 Trident 等。

PC 端的浏览器主要包括 Google（谷歌）公司的 Chrome 浏览器、Mozilla 公司的 Firefox 浏览器、苹果公司的 Safari 浏览器、微软公司的 Internet Explorer（简称IE）和 Edge 浏览器等。

移动端浏览器

随着 Android、iOS 系统手机的不断推出，手机中都会用到移动 Web 浏览器。例如，Android 系统内置的 Android Browser、iOS 系统内置的 Mobile Safari，以及一些国产的浏览器如 UC 浏览器、QQ 浏览器、百度浏览器等。

这些移动 Web 浏览器不同于过去的 WAP 浏览器，它们可以识别和解析 HTML、CSS、JavaScript 代码。而且大多数移动Web浏览器是基于 WebKit 内核的，可很好地支持 HTML5。

对于 Web 前端开发人员来说，移动 Web 开发与 PC 端 Web 开发所使用的技术是类似的，都是使用 CSS、HTML 和 JavaScript 等基本语言，但移动端的 Web 项目的呈现依赖于移动端浏览器。因此，在移动 Web 开发中，需要注意以下两点。

• 移动端设备受屏幕尺寸限制 ，操作的局限性比较大，所以要注意页面的结构不能过于复杂，要提炼出网站最核心的功能，并简洁清晰地呈现出来。

• 要注意移动端的操作方式的改变 。移动端页面的所有交互活动由鼠标控制变为手指触屏控制，操作方式更加丰富，如摇一摇、双指放大、滑动、双击、单击等。

Visual Studio Code 编辑器

什么是 Visual Studio Code

Visual Studio Code（VS Code）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。VS Code 编辑器具有如下特点。

（1）轻巧极速，占用系统资源较少。

（2）具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。

（3） 跨平台 。不同的开发人员为了工作需要，会选择不同平台来进行项目开发，这在一定程度上限制了编辑器的使用范围。VS Code 编辑器不仅是跨平台的（支持 Mac、Windows 和 Linux ），而且使用起来也非常简单。

（4）提供丰富的 插件 。VS Code 提供了插件扩展功能，用户可根据需要自行下载和安装插件，只需在安装配置成功后重新启动编辑器，即可使用此插件提供的功能。

下载和安装 Visual Studio Code

下载：Visual Studio Code - Code Editing. Redefined

移动 Web 开发的主流方案

单独制作移动端页面

通常，单独制作移动端页面并不改变原有的 PC 端页面，而是针对移动端单独开发出一套特定的版本，在网站的域名中使用二级域名 “m”（含义为mobile）来表示移动端网站。例如，在移动端浏览器中访问淘宝网的网址，即可打开淘宝网的移动端页面。有些网站还会智能地根据当前访问的设备来跳转到对应的页面。如果是移动设备，则跳转到移动端页面；如果是 PC 端设备，则跳转到 PC 端页面。

由于 单独制作移动端网站会产生多个URL （PC端一套 URL，移动端一套 URL），因此重定向移动网站需要花费一些时间。同时，需要对搜索引擎做一些处理，会使 维护成本增加 。而且，它可能需要针对不同的屏幕尺寸去分别制作多个网站，对于开发人员来说， 工作量比较大 。

制作响应式页面

响应式页面是指同一页面在不同屏幕尺寸下可实现不同的布局，从而使一个页面兼容不同的终端。这里所说的终端主要包括 PC 端和移动端，它们的分辨率和屏幕大小都是不同的。在开发网站时，只需加入响应式设计就可以兼容这些终端，而不必单独制作移动端页面。响应式开发主要是为了解决移动互联网浏览的问题，通过响应式设计能使网站在手机和平板电脑上有更好的浏览、阅读体验。

在开发移动端页面的过程中，当调整浏览器窗口时，将会 通过判断浏览器窗口的宽度来改变样式 ，页面结构会根据浏览器窗口的大小重新展示，以适应不同的移动终端设备。

响应式开发的特点

1. 跨平台

   • 响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题，只需开发套网站就可以在多个平台使用，给用户带来风格一致的视觉体验。

2. 便于搜索引擎收录

   • 响应式网站制作完成后，无论在移动端设备还是 PC 端设备上访问，访问的都是同一个链接地址，这样就不会分散网站的权重，提升网站对搜索引擎的友好度。

3. 节约成本

   • 响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。并且响应式网站可以实现只用一个后台来进行管理，多个终端的数据保持同步，这样在制作的时候就可以减少专职程序开发人员的配备。对于开发者而言，减少了大量重复的工作，提高了工作效率；对于公司而言，节省了人员开支，降低了开发成本。

练习

填空题

1. Bootstrap 框架基于 HTML、CSS 和（ ）技术，可以构建出非常优雅的前端界面。

2. Bootstrap 4 中使用 CSS 预编译，使得 CSS 样式代码更加容易维护和扩展（ ）。

3. VS Code 是由微软公司推出的一款免费、开源的编辑器（ ）。

4. 响应式 Web 开发是指同一页面在不同屏幕尺寸下有不同的布局（ ）。

选择题

1. 下列选项中，不属于Bootstrap框架特点的是（ ）。

   • A. 提供CSS预编译

   • B. 组件丰富

   • C. 响应式移动设备优先

   • D.学习成本高

2. 下列选项中，关于Bootstrap的说法正确的是（ ）。

   • A. 它提供了一个带有网格系统、链接样式、背景的基本结构

   • B. 它自带全局的CSS样式

   • C. Bootstrap提供了强大的插件

   • D. 以上全部正确

3. 下列选项中，不属于Chrome浏览器优势的是（ ）。

   • A. 市场占有率低，兼容性差

   • B. 提供了很多方便开发者使用的插件

   • C. 设计简单易用、开发高效的Web浏览工具

   • D. 基于强大的JavaScript V8引擎，速度快