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

2017-01-14 08:48:44来源:CSDN作者:q383965374人点击


简介

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap 框架的基础教程分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都应该学会与该主题相关的简单有用的实例,才能保证你在web项目中轻松使用Bootstrap 。


Bootstrap官网http://getbootstrap.com/



历史

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。

http://www.runoob.com/manual/lessguide/#getting-started




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台