Bootstrap响应式Web开发(一)

Bootstrap响应式Web开发(一)

---

---

一、Bootstrap的概念、特点及组成

Bootstrap是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展
1、基本概念：Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面
2、特点：丰富的组件库、响应式设计、移动设备优先、浏览器支持、低成本，易上手、CSS预编译、框架成熟
3、组成

• 基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
• CSS样式库：Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class
• 布局组件：Bootstrap包含了丰富的组件库，提供了十几个可重用的组件
• 插件：Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件

二、浏览器

1、PC端的浏览器
①浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器
②浏览器内核主要包括Blink、WebKit和Trident等
③PC端的浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等
2、移动端设备
①移动端设备主要包括Android、iOS等手机设备。
②屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重
③常见的移动端设备的屏幕尺寸

• 移动端的浏览器主要包括Android Browser和Mobile Safari，以及国产浏览器
• 浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持
• 国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等
• 移动Web开发使用HTML、CSS和JavaScript等基本语言
• 移动端Web项目的呈现依赖于移动端浏览器
  注：移动Web开发需要注意的两点
• 移动端设备受屏幕尺寸限制
• 移动端的操作方式的改变

三、Visual Studio Code

1、Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器。它的的特点是简单、便捷、高效
2、优势

• 轻巧极速，占用系统资源较少
• 具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能
• 跨平台。VS Code编辑器是跨平台的（支持Mac、Windows和Linux），可以在不同平台来进行项目开发
• 主题界面的设计比较人性化。VS Code编辑器可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色（默认为黑色），也可以快速查看最近打开的项目文件和查看项目文件结构
• 提供丰富的插件。用户根据需要自行下载和安装插件，并使用此插件提供的功能

四、移动端开发主流方案

1、单独制作移动端页面
①优势
可以充分考虑到平台的优势和局限性
创建良好的用户体验设计
网页在移动设备上加载更快
②劣势
移动端网站会产生多个URL（PC端一套URL，移动端一套URL）
维护成本会增加，工作量比较大
重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理
单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本
2、制作响应式页面
响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。响应式开发主要是为了解决移动互联网浏览的问题
响应式页面的优点

• 可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题
• 便于搜索引擎收录，无论在移动端设备还是PC端上访问的都是同一个链接地址，这样就减少了权重的分散。让网站对搜索引擎更加友好
• 节约成本。响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。对于开发者而言，减少了大量重复的工作，提高了工作的效率；对于公司而言，节省了人员开支，降低了开发成本

五、移动Web开发基础

（一）视口

1、概念：视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。
2、分类视口主要包括布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子
(1)布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度，布局视口的默认宽度有可能是768px、980px或1024px等（取决于不同移动端设备的设置），这个宽度并不适合在手机屏幕中展示。当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容
(2)理想视口：指对设备来讲最理想的视口尺寸

• 采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。
  在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了
• 在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行