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 | G:\Desktop\随书源码\库文件\bootstrap-3.3.7-dist |
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 | <link rel="stylesheet" href="../bootstrap/css/bootstrap.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 |
|
使用Bootstrap
非常简单,直接使用它提供的CSS
样式即可。
原文链接: 6.1 Bootstrap