响应式开发(二)-----Bootstrap框架的介绍
简介
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
响应式开发(二)-----Bootstrap框架的介绍的更多相关文章
- 响应式开发(三)-----Bootstrap框架的安装使用
下载 Bootstrap 可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您 ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统
如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系 ...
- 移动端开发之响应式开发和bootstrap基础
响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...
- 响应式设计,bootstrap框架的IE兼容问题
学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...
- 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项
本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正 ...
- 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...
- 借鉴bootstrap的方法,快速实现响应式开发
响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
随机推荐
- 六大iT公司的组织结构
- 机器学习算法 --- Pruning (decision trees) & Random Forest Algorithm
一.Table for Content 在之前的文章中我们介绍了Decision Trees Agorithms,然而这个学习算法有一个很大的弊端,就是很容易出现Overfitting,为了解决此问题 ...
- [转载] Ubuntu 12.04下安装git,SSH及出现的Permission denied解决办法
如何安装ssh http://os.51cto.com/art/201109/291634.htm 仅需要阅读至成功开启ssh服务即可 http://www.linuxidc.com/Linux/20 ...
- 将项目托管到GitHub实现步骤
修改于:2017.1.14 第一步:先注册一个Github的账号 注册地址:Github官网注册入口 第二步:准备工作 gitHub网站使用Git版本管理工具来对仓库进行管理,但是它们并不等同. gi ...
- 兼容所有浏览器的旋转效果-IE滤镜Matrix和CSS3transform
在现代浏览器中使用CSS3的transform样式即可轻松搞定,但是对于国内IE浏览器(特别是7,8)还占有较大份额的情况下,兼容性还是必须要考虑的,所以也特意记录下IE旋转滤镜的使用. 在IE下的旋 ...
- OO学习体会与阶段总结(设计与实现)
前言 在最近的一个月的课程中,笔者对于规格化编程进行了深入的学习.运用面向对象抽象思想对编写的程序进行过程抽象.异常处理.数据抽象.类的层次规格与迭代等等规格设计,使得程序结构化程度提高,具有更好 ...
- 20145214 《网络对抗技术》 Web安全基础实践
20145214 <网络对抗技术> Web安全基础实践 1.实验后回答问题 (1)SQL注入攻击原理,如何防御 SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的 ...
- 第二阶段Sprint3
昨天:查看资料,开始视频录制部分的代码实现 今天:事实现保存到指定路径,并能够选择播放 遇到的问题:自动生成文件名,是否需要自己命名?怎么实现?
- poi读取、通过poi导出数据库的记录到excl表
package com.nt.test; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFo ...
- Codeforces Round #157 (Div. 1) B. Little Elephant and Elections 数位dp+搜索
题目链接: http://codeforces.com/problemset/problem/258/B B. Little Elephant and Elections time limit per ...