响应式开发(二)-----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">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
随机推荐
- 2018.4.23 linux系统
linux: 1.代表linux的内核 2.代表linux的操作系统:linux的内核和工具软件.应用软件..办公工具.开发工具. 它的特点: 1.它是开源软件,时当今最成功的开源软件之一.所以很多的 ...
- DevOps on AWS之Elastic BeanStalk
Elastic BeanStalk相关概念 童话世界中存在着一种魔力beanstalk(豆荚),种在花盆里可以无限的向上生长,越长越高直达云端.AWS Elastic Beanstalk也采用类似概念 ...
- pytorch 如何使用tensorboard实时查看曲线---- tensorboardX简介
用惯了tensorflow的小伙伴肯定都用过tensorboard工具吧.虽然Facebook也推出了visdom,但是在一次不小心误触clear之后,我放弃了这个工具(页面的一个clear按钮我本来 ...
- Windows 本地文件搜索神器
Wox: Windows 本地文件搜索神器 下载地址: https://github.com/Wox-launcher/Wox 注: Wox只能搜索C盘下的文件,所以需要结合everything 如果 ...
- js中 null, undefined, 0,空字符串,false,不全等比较
null == undefined // true null == '' // false null == 0 // false null == false // false undefined = ...
- 【Alpha】技术规格说明书
由于第1周已经写过技术规格说明书(设计文档),本周更新了上一版内容. Github地址:https://github.com/buaase/Phylab-Web/blob/master/docs/Ba ...
- Task 6.2站立会议二
今天,我们开始自己开始编译运行代码了,服务器端,聊天界面的相关代码经过测试.大家都把自己的实验过程公布了,大家的交流对实验的进度也起到了很大的作用.明天我们要继续修改实验中的错误,然后大家一起把实验基 ...
- ASP.net四则运算《《《策略模式
Calculator.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; / ...
- Leetcode题库——31.下一个排列
@author: ZZQ @software: PyCharm @file: nextPermutation.py @time: 2018/11/12 15:32 要求: 实现获取下一个排列的函数,算 ...
- yii2微博第三方登录
原作者:杜文建 原博客:http://www.cnblogs.com/dwj97/p/6530568.html yii2微博第三方登录 微博登录是最常用的第三方账号登录之一.由于其网站用户量大,可 ...