6.1 Bootstrap

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

6.1 Bootstrap

Bootstrap其实是一个CSS库,因此下载和安装Bootstrap的重点是引入CSS文件。

6.1.1 Bootstrap简介

Bootstrap是一个目前非常受欢迎的前端框架,其实它更多的是一个CSS框架。**Bootstrap提供了大量的CSS样式、组件,开发者使用Bootstrap提供的CSS样式和组件,可以快速、方便地开发出优雅、美观的界面**。
Bootstrap和早期的Ext JS、Dojo等前端框架不同,Ext JS和Dojo等框架需要使用大量的JavaScript或框架本身的标签构建界面,而Bootstrap的做法则更加简单,它不需要使用特别的JavaScript代码,也不需要使用任何特别的标签,它只要在原生HTML标签上通过class属性指定Bootstrap样式即可。
此外,Bootstrap在jQuery的基础上也提供了JavaScript插件支持,这一点又进一步增强了Bootstrap的功能。

6.1.2 下载和安装Bootstrap

下载和安装Bootstrap请按如下步骤进行:
登录Bootstrap的中文文档网站,下载Bootstrap的最新版,本书用的是

Boostrap压缩版目录结构

这里下载bootstrap-3.3.7的压缩版本,将会得到一个bootstrap-3.3.7-dist.zip文件,解压该文件将可以看到如下所示的文件结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
G:\Desktop\随书源码\库文件\bootstrap-3.3.7-dist
├─css\
│ ├─bootstrap-theme.css
│ ├─bootstrap-theme.css.map
│ ├─bootstrap-theme.min.css
│ ├─bootstrap-theme.min.css.map
│ ├─bootstrap.css
│ ├─bootstrap.css.map
│ ├─bootstrap.min.css
│ └─bootstrap.min.css.map
├─fonts\
│ ├─glyphicons-halflings-regular.eot
│ ├─glyphicons-halflings-regular.svg
│ ├─glyphicons-halflings-regular.ttf
│ ├─glyphicons-halflings-regular.woff
│ └─glyphicons-halflings-regular.woff2
└─js\
  ├─bootstrap.js
  ├─bootstrap.min.js
  └─npm.js
  • bootstrap/css目录下包含8个文件,但其实真正要用的只有2个。
    • bootstrap.css:Bootstrap核心CSS库(bootstrap.min.css是经过压缩的最小化版本,*.map文件是CSS源码映射表,可以在某些浏览器的开发工具中使用)。
    • bootstrap-theme.css:Bootstrap主题相关的CSS库(bootstrap-theme.min.css是经过压缩的最小化版本,*.map文件是CSS源码映射表,可以在某些浏览器的开发工具中使用)。
  • bootstrap/js目录下包含了Bootstrap的JS插件支持文件,其中bootstrap.min.js是经过压缩的最小化版本。
  • bootstrap/fonts目录下包含了Bootstrap依赖的字体库。

为在页面中使用Bootstrap,只需要将用到的bootstrap源文件引入整个到项目中即可。

  • 对于bootstrap/css目录下的文件只需要使用bootstrap.min.css和bootstrap-theme.min.css文件,
  • 而对于bootstrap/js目录下的文件则只需要使用bootstrap.min.js文件。

使用Bootstrap的CSS样式

如果仅需要使用Bootstrap的CSS样式,则只需要导入bootstrap.min.css和bootstrap-theme.min.css的两个CSS样式文件即可。
也就是HTML页面的head标签下增加如下两行link标签即可:

1
2
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">

移动设备上合适的绘制和触屏缩放

为了保证HTML页面在移动设备上进行合适的绘制和触屏缩放,需要在<head>元素中添加viewport元数据标签。例如如下代码:

1
<meta name="viewport" content="width=device-width, initial-scale=1">

其中,href属性的值根据你项目中的实际路径做相应的修改,让href属性指向这两个CSS样式单文件所在的位置。

禁止用户缩放网页

如果希望禁止用户缩放网页,只能滚动网页,则可以为viewport元数据添加user-scalable=no设置。例如改成如下viewport元数据则可禁止用户缩放网页:

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

程序示例

下面提供了一个使用Bootstrap框架的网页模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Bootstrap模板 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <!-- panel、panel-danger是Bootstrap提供的CSS样式 -->
    <div class='panel panel-danger'>Bootstrp</div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

使用Bootstrap非常简单,直接使用它提供的CSS样式即可。