很多时候,页面样式的问题让人头疼。而Bootstrap则是一个很好的前端框架,那么如何在Aurelia中引入Bootstrap框架呢。
引用Bootstrap的方法有很多种,这里介绍的是一种适合与Aurelia Cli命令工具的方法,不过我想在webpack中也可以使用(也可能会出问题,暂时先介绍这一种).
1. npm安装Bootstrap 。 (这里用的是Bootstrap的最新版本V4)。
npm install bootstrap@4.0.0-beta --save
2.
npm安装Jquery和Popper.js 。这些都是Bootstrap V4中所需要的.
npm install jquery popper.js --save
3.
配置aurelia.json (在aurelia_project/aurelia.json下)。修改vendor-bundle.js 和 dependencies依赖如图
"node_modules/popper.js/dist/umd/popper.min.js",
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min.js",
"deps": [
"jquery"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
4. 在app.html中引入
<require from="bootstrap/css/bootstrap.css"></require>
5. 在app.js头部中引入bootstrap
import 'bootstrap';
这是就可以在控件中使用来自bootstrap的class样式或者标签图案了。