将Bootstrap应用到Aurelia项目中

野性酷女 2022-06-04 23:51 77阅读 0赞

很多时候，页面样式的问题让人头疼。而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",

![SouthEast][]

"jquery",
    {
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min.js",
      "deps": [
        "jquery"
      ],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
      ]
    }

![SouthEast 1][]

4.  在app.html中引入

<require from="bootstrap/css/bootstrap.css"></require>

5.   在app.js头部中引入bootstrap

import 'bootstrap';

这是就可以在控件中使用来自bootstrap的class样式或者标签图案了。

[SouthEast]: /images/20220605/7ddfb13550df429cb9829ce011976659.png
[SouthEast 1]: /images/20220605/c9f0431a22e54667b0524f42ff6ef4ce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA将项目提交到Gitee中

文章目录一、命令行操作二、图形界面操作 -------------------- \ IDEA将项目提交到Gitee的使用

谁借莪１个温暖的怀抱￠/ 2024年04月03日 10:59/ 0 赞/ 70 阅读

相关如何将 Bootstrap CSS 和 JS 添加到 Thymeleaf

1. 简介在本文中，我们将介绍几种将Bootstrap 库添加到Thymeleaf 项目的方法。我们将使用静态资源、内容交付网络和 webjar 库包含 Bootstr

水深无声/ 2023年09月25日 13:19/ 0 赞/ 101 阅读

相关 activiti(二)将activiti集成到项目中

到activity的官网下载到相应包。我这里使用的是activiti-5.19 将相应的jar包放入到lib中： ![这里写图片描述][20160123222811515

深藏阁楼爱情的钟/ 2022年08月19日 15:14/ 0 赞/ 221 阅读

相关 Aurelia中的HTML行为介绍

Aurelia模板引擎的自定义属性和自定义元素功能的概述，不仅包括如何创建基本版本，还包括如何在您的应用程序中本地和全局使用它们。介绍

红太狼/ 2022年06月05日 06:52/ 0 赞/ 116 阅读

相关将Bootstrap应用到Aurelia项目中

很多时候，页面样式的问题让人头疼。而Bootstrap则是一个很好的前端框架，那么如何在Aurelia中引入Bootstrap框架呢。引用Bootstrap的方法有很多种，

野性酷女/ 2022年06月04日 23:51/ 0 赞/ 78 阅读

相关 eclipse中将web项目部署到tomcat

eclipse中将web项目部署到tomcat. myeclipse部署WEB项目到tomcat比较方便，但eclipse貌似默认是不会替你将web自动部署到tomcat下的

绝地灬酷狼/ 2022年05月23日 03:55/ 0 赞/ 272 阅读

相关将项目迁移到gitlab

1.在gitlab上建立project，得到一个git地址，如：[http://192.168.74.90/xxx\_sportSnatch/bt\_receive.git。]

た入场券/ 2022年05月11日 02:06/ 0 赞/ 335 阅读

相关 webstorm 将项目部署到 tomcat中

1、项目启动要手动启动tomcat，去bin文件夹点击，bat命令。（有必要的话，修改一下tomcat默认的3个端口） 2、配置tomcat的目录和访问url ![wate

亦凉/ 2022年04月22日 04:48/ 0 赞/ 383 阅读

相关将项目托管到gitHub

一、下载并安装Git版本控制工具下载地址：[https://git-scm.com/downloads][https_git-scm.com_downloads] 注

た入场券/ 2022年02月04日 10:59/ 0 赞/ 344 阅读

相关 Bootstrap wysiwyg，将富文本数据保存到mysql

Bootstrap提供了一个叫[wysiwyg][]的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到mysql数据库，却不得而知。另外，如何将mysql数据库

朱雀/ 2021年05月10日 11:18/ 0 赞/ 584 阅读