20分钟成功编写bootstrap响应式页面 就这么简单


Posted in Javascript onMay 12, 2016

最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。

经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面。
图 1. 移动优先,适应不同设备

20分钟成功编写bootstrap响应式页面 就这么简单

一、安装
最简单的方式是直接在网页中引用内容分发网络(CDN)提供的 Bootstrap,当用户访问网页时,会从就近的服务器上获取资源。

清单 1. 从内容分发网络上获取 Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css
">

<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.min.css
">

<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/3.3.4/js/bootstrap.min.js">
</script>

还可以选择下载 Bootstrap 在本地部署。用户可以下载页面下载完整的 Bootstrap,也可以在定制页面根据项目需要,选择项目用到的功能,编译并下载一个简化版的 Bootstrap。下载完成后得到一个 zip 文件,解压后的目录结构如下所示:

清单 2. Bootstrap 目录结构

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

这里我们主要关注三个简化后的文件:bootstrap.min.css 是 Bootstrap 的主要组成部分,包含了大量要用到的 CSS 类;bootstrap-theme.min.css 包含了可选的 Bootstrap 主题;bootstrap.min.js 提供了一些 JavaScript 方法,需要注意的是 Bootstrap 依赖于 jQuery,因此使用 bootstrap.min.js 前必须引入 jQuery。和使用内容分发网络一样,我们使用相对路径在自己的页面中引入相应的 CSS 和 JavaScript。在实际开发中,我们常常使用 Bootstrap 提供的模板作为起点,该模板引入了响应式页面需要的元数据和 Bootstrap,开发者可在此基础之上编写自己的响应式页面:

清单 3. Bootstrap 基础模板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
 head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

二、CSS
Bootstrap 首先是一个 CSS 框架,它预定义了很多 CSS 类,开发者只需要为 HTML 元素添加适当的 CSS 类,就能得到想要的样式,可以完成页面的布局、排版等功能。Bootstrap 提供的 CSS 功能异常强大,本文将重点放在其提供的网格系统上,对于其他功能,只在应用时顺便提及。您若想了解更多功能,可参考官方文档。
容器
使用 Bootstrap 布局时,需要将 HTML 元素包含在一个容器(.container)里,Bootstrap 提供了两种容器:.container 和 .container-fluid。前者将内容固定宽度居中显示,后者让内容横向撑满整个浏览器窗口,如下所示:

清单 4. .container 和 .container-fluid

<div class="container">
<p>“小时候每当我生病,母亲都会为我冲一杯咖啡,她温柔地说:“外国人都喝这个的。
”幼小的我总害怕咖啡,酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道,
直到那天我喝了一杯板蓝根。” </p>
</div>

<div class="container-fluid">
<p>“小时候每当我生病,母亲都会为我冲一杯咖啡,她温柔地说:“外国人都喝这个的。”
幼小的我总害怕咖啡,酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道,
直到那天我喝了一杯板蓝根。” </p>
</div>

下图是显示在浏览器中的样子:

图 2. 容器

20分钟成功编写bootstrap响应式页面 就这么简单

网格系统
和我们在《编写第一个响应式页面》中设计的网格系统一样,Bootstrap 也将页面分为行(.row),每行 12 列(.col-md-*)。行必须包含在容器里,根据屏幕大小不同,列又分为.col-xs-、.col-sm-、.col-md-、.col-lg-,分别对应手机(<768px)、平板(≥768px)、中等屏幕电脑(≥992px)和大屏幕电脑(≥1200px)。其中出现的这些像素称为临界点,每当浏览器大小或屏幕尺寸从一个临界点到达另一个临界点时,相应的 CSS 类就会起作用,页面布局就会发生变化。详见下图:

图 3.网格系统

20分钟成功编写bootstrap响应式页面 就这么简单

怎么理解上面这个表格呢?假如在电脑上浏览页面,需要将页面分为三列,分别占行宽的 1/4、2/4、1/4,则可编写代码如下:

清单 5. 一行分三列

<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>

打开浏览器,可以看到它们各自占据了 12 列中的 3、6、3 列,加起来恰好是 12 列。如果我们缩小浏览器窗口,直到其小于 970px,此时会发现变成了三行,堆在一起显示。除过.col-xs-,其他 CSS 类的行为都一样,在屏幕尺寸小于其临界点时,会堆起来显示,只有在屏幕尺寸大于其临界点时,才按列显示,而.col-xs- 在任何情况下都按列显示。
对应不同屏幕尺寸的 CSS 类可以混合使用,比如我想让一个页面在电脑上显示 3 列,在手机上显示成 2 列,则可编写代码如下,在手机上,第三列会换行到下一行显示,并且占据行宽的一半:
清单 6. 在电脑和手机上显示不同数量的列

<div class="row">
<div class="col-xs-6 col-md-3">.col-md-3</div>
<div class="col-xs-6 col-md-6">.col-md-6</div>
<div class="col-xs-6 col-md-3">.col-md-3</div>
</div>

如果希望在所有设备上显示相同的列,只需要定义最小尺寸的.col-xs- 即可,布局会自动扩展到更大尺寸,反之则不成立:
清单 7. 所有设备上显示同数量的列

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

还可以给列一定的偏移量,比如第一列占行宽的 1/4,我们希望第二列向右偏移 6 列,占用行末的 3 列:
清单 8. 列偏移

<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3 col-md-offset-6">.col-md-3</div>
</div>

列的顺序也可以通过.col-md-push-* 和 .col-md-pull-* 调整,它们的含义是将某元素向后推或向前拉若干列,开发者可使用该特性,将重要内容在手机显示时,拉到前面:
清单 9. 推拉列

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

更让人兴奋的是,这种网格系统还可以嵌套,这样就能进行各种各样复杂的布局了:
清单 10. 嵌套

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
</div>
</div>

上面的代码总体上分成两列,其中第一列又嵌套了两列。
Bootstrap 的网格功能为网页布局提供了各种可能性,而且使用起来非常简单,下面我们不妨通过一个案例,看看使用 Bootstrap 编写一个响应式页面是多么简单。

三、实战
假设现在要实现一个如下面的图片所示的网页:
图 4. 网页设计

20分钟成功编写bootstrap响应式页面 就这么简单

首先,我们先将网页元素划分成相应的行和列,下图是作者的划分:
图 5. 将网页设计划分成行和列

20分钟成功编写bootstrap响应式页面 就这么简单

据此,定义我们的 HTML 结构,并添加适当的 Bootstrap CSS 类:
清单 11. 定义 HTML 结构

<div class="container">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/150x150">
</div>
<div class="col-md-9">
<h1>Jane Doette</h1>
<h3>front-end ninja</h3>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/950x350">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/250x250">
<h2>applify</h2>
<a href="https://github.com/udacity/applify">https://github.com/udacity/applify</a>
</div>
<div class="col-md-4">
<img src="http://placehold.it/250x250">
<h2>sunflower</h2>
<a href="https://github.com/udacity/sunflower">https://github.com/udacity/sunflower</a>
</div>
<div class="col-md-4">
<img src="http://placehold.it/250x250">
<h2>bokeh</h2>
<a href="https://github.com/udacity/bokeh">https://github.com/udacity/bokeh</a>
</div>
</div>
</div>

作者编写上述代码花了不到 10 分钟,由于没有图片,作者使用了网上提供的占位图片。在浏览器里打开该页面,已经接近设计了,但字体、大小写、排版还与设计不符。接下来就要进行微调,浏览 Bootstrap 文档,可以发现相关的 CSS 类,最终完成的效果如下图所示:
图 6. 实现效果

20分钟成功编写bootstrap响应式页面 就这么简单

更有意思的是,当你缩小浏览器窗口,或者从手机上访问该页面时,会发现它已经是一个简单的响应式页面了,而我们并没有添加任何额外代码!看一下时间,总共花了不到 20 分钟,我也兑现了分分钟编写一个响应式页面的承诺。

Javascript 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
javascript实现连续赋值
Aug 10 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 #Javascript
去除字符串左右两边的空格(实现代码)
May 12 #Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php源码的使用方法讲解
2019/09/26 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Python写的服务监控程序实例
2015/01/31 Python
python executemany的使用及注意事项
2017/03/13 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
在校生党员自我评价
2013/09/25 职场文书
幼儿园园长自我鉴定
2013/10/22 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
专业技术职务聘任书
2014/03/29 职场文书
工商干部先进事迹
2014/05/14 职场文书
汽车专业求职信
2014/06/05 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫