通过Bower安装并管理Bootstrap的Less、CSS、Javascript和字体文件
$ bower install boostrap
通过npm进行安装Bootstrap
$ npm install bootstrap
require('bootstrap')加载Bootstrap的所有jQuery插件。
也可通过加载安装包顶级目录下的/js/*.js文件的方式手动加载单个的Bootstrap插件。
通过Composer进行安装
$ composer require twbs/bootstrap
编译Less/Sass源码需要注意的事项。
Bootstrap利用Autoprefixer自动为某些CSS属性添加针对特定厂商的前缀。
Bootstrap插件全部依赖jQuery。
Bootstrap使用Grunt作为编译系统,并且对外提供了一些方便的方法用于编译整个框架。
安装Grunt
首先下载安装node.js。然后在命令行中输入以下命令:
- 在全局环境中安装grunt-cli: npm install -g grunt-cli
- 进入/bootstrap/根目录,然后执行npm install命令安装所有依赖包。
然后就可以使用Grunt命令了。
grunt dist(仅编译CSS和JavaScript文件)
重新生成/dist/目录
grunt watch(检测文件的改变,并运行指定的Grunt任务)
检测Less源码文件的改变,并自动重新将其编译为CSS文件。
grunt test(运行测试用例)
在PhantomJS环境中运行JSHint和QUnit自动化测试用例。
grunt docs(编译并测试文档中的资源文件)
grunt(重新建构所有内容并运行测试用例)
为了让IE8支持HTML5元素和媒体查询,需要引入html5shiv.min.js和respond.min.js
Respond.js在file://下观看是无效的。
禁止响应式布局有如下几步:
- 移除此CSS文档中提到的设置浏览器视口(viewport)的标签:<meta>
- 通过为.container类设置一个width值从而覆盖框架的默认width设置,
例如width: 970px !important;确保这些设置全部放在默认的Bootstrap CSS文件的后面。
3.如果使用了导航条,需要移除所有导航条的折叠和展开行为。
4.对于栅格布局,额外增加了.col-xs-类或替换掉.col-md-和.col-lg-*。