响应式开发(二)-----Bootstrap框架的介绍

look_w

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。



为什么使用 Bootstrap
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Internet Explorer，Firefox，Opera，Google Chrome，Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。



Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。


Bootstrap 如何实现响应式设计


响应式 Web 设计工作原理

为了应用响应式 Web 设计，我们需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

就是先写好多准备几套css，根据检测到的设备屏幕大小 使用特定的css。



响应式 Web 设计的 CSS

bootstrap通过 'bootstrap-responsive.css' 来实现细微差别的显示。

需要在网页的头部区域加入下面这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。
width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 'device-width'，用来告诉浏览器使用原始的分辨率。
initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。
当然，您必须添加 Bootstrap 的响应式 CSS，如下所示：
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
响应式 CSS 文件bootstrap-responsive.css中有各种以 '@media' 开始的区域。

这就是如何编写适用于各种设备的样式。
第一个区域以 '@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。
第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。
第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。
下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。
最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。
所以，这样样式表的基本作用就是，通过使用 'min-width' 和 'max-width' 属性，来根据设备的最大宽度和最小宽度决定使用的样式。


能够更快地对移动设备友好的布局

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。
.visible-phone，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上隐藏不可见，这是默认的。
.visible-tablet，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。
.visible-desktop，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。
.hidden-phone，在宽度为 767px 及以下的手机上隐藏不可见，在 979px 到 768px 的平板上可见，在桌面上可见，这是默认的。
.hidden-tablet，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上隐藏不可见，在桌面上可见，这是默认的。
.hidden-desktop，在宽度为 767px 及以下的手机上可见，在 979px 到 768px 的平板上可见，在桌面上隐藏不可见，这是默认的。


Bootstrap 在响应式上的优化

为了让布局更具响应性，Bootstrap 做了三件事情：
1. 修改了网格中列的宽度。
2. 只要有需要，它就使用堆栈元素，而不是浮动元素。

堆栈元素:
根元素（html）形成了堆栈上下文的根，其他堆栈上下文通过任意定位的元素生成（包括相对定位元素，有一个 'z-index' 的计算值，而不是 'auto'）。堆栈上下文相对与包含的块不是必需的。
3.要正确地渲染标题和文字它们的尺寸。




学习前提

在学习Bootstrap之前需要具备HTML 、 CSS 和 JavaScript 的基础知识，如果对这三项知识还不了解希望能先学习一下。



非必需知识

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

可以帮助我们更方便更好的写css。