本网站只能被运行在支持JavaScript脚本的环境中

第1章 现在推荐使用Bootstrap制作Web网站

本连载概述

本连载结合代码示例介绍Bootstrap的特征及使用方法。阅读本连载,你可以使用Bootstrap轻松开发自适应网站。

“智能手机专用网站难以开发!成本较大”时代已过去

自2013年开始,“智能手机专用网站”这个概念开始被淘汰。其原因为:如果在PC用网站开发完毕后,在此基础上再为智能手机单独设计一个网站,开发成本较高,同时也需要维护二两套代码。

那么,应该怎样针对PC及各种移动设备来开发网站呢?回答为:进行以“移动优先”为原则的自适应设计。经过这种设计之后,开发出的网站可以很好地展示在各种设备中。

为了开发自适应网站,我们可以使用Twitter公司开发的Bootstrap框架。通过使用该框架,我们可以很快速地开发出一个非常漂亮的自适应网站。

Bootstrap的特征

目前,Bootstrap的最新版本为第3版。它具有以下几个特征:

最强的前端开发框架

在Bootstrap被推出之前,虽然已经存在jQuery UI、960栅格系统等等各种UI框架,但是并不存在一个可以用于进行网站总体设计的框架。

Bootstrap中结合了以下各种设计手段:

  • HTML 5
  • CSS 3
  • 12栏栅格系统
  • 扁平化设计
  • 触碰操作
  • Carousel幻灯片
  • UI组件库
  • jQuery
  • LESS
  • JavaScript库
  • 易用的LESS及Mixin库
  • clearfix

使用Bootstrap,可以开发出非常炫酷的Web网站。

支持自适应设计

为了实现自适应网站设计,必须使用CSS 3中的媒体表达式。如果使用Bootstrap,即使不具有HTML 5或CSS 3的知识,也可以实现自适应网站设计。Bootstrap中采用12栏栅格系统(为布局考虑而将画面分成12列的表格,可以将页面元素放置在该表格中)。Bootstrap可以根据设备屏幕大小而决定横向展示其中的多少栏,在Bootstrap 2中只包括智能手机及PC这2种断点,自Bootstrap 3开始包含的断点如下表所示:

目标设备 屏幕宽度
大屏幕PC用 1200px以上
一般PC用 992px~1199px
平板电脑用 768px~991px
智能手机用 768px以下

具有丰富的主题、颜色方案修改更简单

在Bootstrap中提供丰富的主题。在网站开发完毕后,也可以迅速修改整个网站的颜色方案。

丰富的插件、易扩展的库

在Bootstrap中可以使用各种插件。因此,当Bootstrap本身不具有开发者想要的功能时,开发者也不需要自行书写这些功能。

下面列举其中的一些插件:

  • 表单插件:〈a style="color:blue" href="http://vincentlamanna.com/BootstrapFormHelpers/">Bootstrap Form Helpers
  • 模式对话框制作插件:〈a style="color:blue" href="http://jschr.github.io/bootstrap-modal/">Bootstrap-Modal
  • 日期拾取插件:〈a style="color:blue" href="http://tarruda.github.io/bootstrap-datetimepicker/">bootstrap-datetimepicker

在本网站(HTML 5在线)中将陆续介绍大量Bootstrap插件。

Bootstrap的优点

以下列举Bootstrap在开发网站过程中所具有的优势:

  • 第一时间内对用户与页面之间的交互结果进行确认,便于了解用户体验及画面尺寸
  • 可以对画面显示结果进行确认,发现画面遗漏或不满足客户要求的地方
  • 代码复用率高,可以更高效地进行快速开发
  • 即使发现画面遗漏或不满足客户要求的地方,不存在需要修改大量代码的风险

支持Bootstrap 3的浏览器

支持Bootstrap 3的浏览器

由于Bootstrap中使用了HTML 5与CSS 3,所以Internet Explorer 7以下或Firefox 3.6以下不支持(在IE 8中可以通过使用html5shiv.js、Respond.js等插件的方法来使用)。〈/p>

下载Bootstrap 3

首先访问〈a style="color:blue" href="http://getbootstrap.com/">Bootstrap官方网站,点击“Download Bootstrap”按钮。

当页面跳转到下载页面之后,点击“Download Bootstrap”按钮,下载过程开始。由于待会儿还要查看本页面,所以先不要将其关闭。

下载的文件为bootstrap-3.3.4-dist.zip(3.3.4部分根据当前下载版本可能有所变化),解压该文件,解压后的文件夹中包含“css”、“js”及“fonts”这三个子文件夹。

其中包含了HTML代码示例

将下载页面向下滚动,我们可以看见“Basic Template”区域。在这个区域中,记载着如何使用Bootstrap的代码示例。可以通过复制粘帖这段代码来尝试使用Bootstrap。

为了查看这段示例代码的运行结果,我们在bootstrap-3.3.4-dist.zip文件的解压文件夹中新建index.html文件并将示例代码复制到其中。运行结果如下图所示: