angular4+引入bootstrap(引入sass)

最新推荐文章于 2024-08-22 08:48:14 发布
最新推荐文章于 2024-08-22 08:48:14 发布
阅读量2k 收藏 1
点赞数
分类专栏： 前端 文章标签： bootstrap angular npm sass scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kikyou_csdn/article/details/82191400
版权

方式1. BootstrapCDN

将预编译的 CSS 或 JS 文件引入index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bstrap</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

方式2.npm安装ngx-bootstrap

方式3.npm安装bootstrap

之前看这里和这里,以为任意安装ngx-bootstrap或者bootstrap的任意一个就好了，一直没成功，都得用到cdn文件，npm安装的根本没起到作用？？？然后看到这里安装成功了

方式2. npm安装bootstrap+ngx-bootstrap（其中css用的是scss）

1. 进入项目目录
npm install ngx-bootstrap bootstrap --save
2. app.module.ts配置
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports: [
    TooltipModule.forRoot(),
    BsDropdownModule.forRoot(),
  ],
})
3. sass配置
  • src/styles.css的.css后缀改为.scss
  • 更改.angular-cli.json里的.css后缀
"styles": [
  "styles.scss" 
],
.
.
"defaults": {
  "styleExt": "scss" 
}

ps:新建公共scss文件:

  • 比如创建文件src/_variables.scss（官方文档是这样命名的，但是试过去掉下划线也可以）
  • 在styles.scss中写入

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
4. js文件还不知道怎么配置，暂时还是在index.html里引入
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ngxbstrap</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</head>
<body>
  <app-root></app-root>
</body>
</html>
5. ok!

轮播图（依赖js）和button样式都正常显示
这里写图片描述

6. 在引入了onsenui的项目里这样引入bootstrap也没有影响

styles.scss:

/* You can add global styles to this file, and also import other style files */
//onsenui
@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';
//bootstrap
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
7. 在angular中使用sass

将.css后缀改为.scss就可以了
这里写图片描述

有个问题（已解决）

angular组件的sass文件内不能识别style.scss内的变量

styles.scss中引入了variables.scss,variables.scss内定义了变量$jj，在testsass.component.scss中使用$jj会报错
variables.scss

$jj : #05c2fc;

.jj {
    background: $jj;
}

styles.scss

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

testsass.component.scss

$background: #fa6164;
.article {
    // background: $jj;//报错
    background: $background//正常
}

ps:

  1. 在testsass.component.html中使用.jj的样式却没有问题
  2. 在组件内定义的变量可以识别

testsass.component.html

<h1 class="jj">h1标题</h1>
<h1 class="article">article</h1>

解决：
还要在当前组件内引入variables.scss

这样的话，每个需要用到variables的组件都得引入一次，在styles.scss内引入@import 'variables';不是全局都可以使用的意思吗？

其它

  1. angular可以直接使用sass，和上面的一样直接改配置就好了，或者在新建项目时指定用的是sass
  2. 其它项目使用bootstrap可以npm安装后引入bootstrap的sass文件。

源码：https://github.com/kikyo20/MyNgProject
参考：
https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap.md

https://github.com/valor-software/ngx-bootstrap

kikyou`
关注
专栏目录
基于Angular的Bootstrap4组件NGBootstrap
08-10
基于 Angular 的 Bootstrap 4 组件：NG Bootstrap
angular+bootstrap后台模板
10-01
4. **自定义**：开发者可以通过修改Sass变量或使用Bootstrap的定制工具来自定义主题，以符合项目需求。 5. **兼容性**：Bootstrap考虑了广泛的浏览器兼容性，确保在主流浏览器上良好运行。 【其他文件及工具】： 1....
angular-bootstrap
weixin_34278190的博客
12-15 108
bootstrap是很好用的css框架，angularJS对其进行了集成。 项目主页：https://angular-ui.github.io/bootstrap/ 通常来讲，需要引入AngularJS，bootstrap.css。 1.tooltip angular已经封装好了tooltip这个指令。 <button tooltip='so...
Bootstrap-Sass 使用教程
最新发布
gitblog_01150的博客
08-22 500
Bootstrap-Sass 使用教程 bootstrap-sass项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-sass 项目介绍 Bootstrap-Sass 是一个将 Twitter Bootstrap 框架转换为 Sass 版本的开源项目。它允许开发者在使用 Sass 预处理器时，更方便地定制和扩展 Bootstrap 的样式。通过使...
angular 引入bootstrap的方法
lvmengzou的专栏
01-19 634
1.直接在index.html中引入bootstrapCDN 验证模板是否生效的方法：<buttonclass="btnbtn-danger"></button> 2.通过npm指令安装（npminstallbootstrap） 3.引入bootstrap： （1）在styles.css（全局样式） （2）在...
angular引用bootstrap_Angular 中引入BootStrap
weixin_39728544的博客
12-20 256
由于Bootstrap官方目前并没有发布Angular的相关类库进行支持，当前Angular只能引用使用Bootstrap相关的样式。无法使用Bootstrap自带的脚本逻辑。以下以Angular7和Bootsrap4.2为例进行demo验证。环境搭建首先执行以下两个命令创建angular项目和组件ng new AngularDemo //创建项目ng g c bootstrapdemo//创建组...
angular工程导入bootstrap安装包
djj5503的博客
05-08 344
（一）在style.css 文件中引入bootstrap如下： @import "..\node_modules\bootstrap\dist\css\bootstrap.min.css"; ，注意：1.需要加上，@import ，分号，引号 （二）在angular.json配置文件引入bootstrap时，注意加在angular.json文件的第26行，如下： 技能：当...
Angular 13 + Bootstrap后台管理仪表板模板
04-01
完全支持 SASS： Gull 实现了 bootstrap 4 sass。样式和自定义方案是用 sass 编写的。 预建应用程序： Gull 有 4 个预建应用程序（Invoice Builder、Chat、Calendar、Inbox）。这些应用程序已完全准备好与您的服务器...
ssh+angular+bootstrap 博客
06-29
标题 "ssh+angular+bootstrap 博客" 指的是一项使用三种技术栈——SSH（Spring Security + Spring MVC + Hibernate）、Angular 和 Bootstrap 开发的博客系统。这个项目结合了后端开发、前端用户界面和安全控制，以...
angular4 引入bootstrap
angularliu的博客
06-22 1万+
1、创建项目npm install -g @angular/cli ng new my-app cd my-app ng serve --open npm install ngx-bootstrap bootstrap@next --save添加如下语句： 2、 编辑文件src/app/app.module.tsimport { BsDropdownModule } from 'ngx-boo
基于 Angular 和 Bootstrap 的后台管理面板框架
05-14
4. `node_modules`目录：包含所有依赖的npm包，如Angular核心库、Angular Material、Bootstrap等。 5. `index.html`：项目的入口文件，用于加载应用。 6. `app.module.ts`：应用的主要模块，定义了应用的初始状态和...
angular中引入bootstrap
xawjz的博客
07-13 1248
1.引入bootstrap npm install bootstrap@3 或者直接在package.json 中加入"bootstrap": "^3.3.7", 然后在运行 npm i 2.在angular.json 中添加如下内容 "styles": [ "src/styles.scss", "src/assets/fonts/newfont.scss", "node_modu...
angular.bootstrap
寂寞的天空的博客
01-10 710
angular.bootstrap(document, ["myapp"]) ;//初始化 这种方式，一旦页面需要多个初始化时，可以用bootstrap，指令只能进行一次初始化操作 需要进行多个初始化时使用!!!! var i=0; var m1 = angular.module('myApp1',[]); var m2 = angula
使用SCSS扩展Bootstrap4
Margin100的博客
06-04 562
摘要 准备 安装环境 下载源码 目录结构 扩展 引用Bootstrap 编译自定义源码 参考 摘要 因为打算写一个小网站，而个人时间又不是那么充裕，所以没有选择前后端分离的架构。 对于非前后端分离应用来说，Bootstrap应该是目前的最佳前端框架之一了。 而Bootstrap4，是Bootstrap的最新版本，其更新内容中，有关自定义扩展的支持，相对来说要比以前方便...
angular6学习(四)：引入bootstrap样式框架
热门推荐
七刀的专栏
06-19 2万+
两种方法：第一种：引用链接1、 在index.html中添加bootstrap引用链接bootstrap链接地址可在官网复制：官网引用的链接参考如下（新版本无效果，建议用下面这个测试学习）&lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"&gt;2、打开app.c...
Angular使用bootstrap
weixin_47715821的博客
09-21 733
Angular中使用bootstrap，内部包含jQuery、popper、bootstrap-icons。
[Angular]快速将Bootstrap4引入Angular9
stay hungry stay foolish
05-08 1071
目录创建一个Angular项目Angular里面引入bootstrap方法一：直接引用方法二：npm安装Angular添加表单优化参考链接 创建一个Angular项目 安装Node.js 安装Angular CLI,使用命令行 npm install -g @angular/cli 新建一个项目 ng new my-app 运行项目 cd my-app ng serve --o...
入门套件：用于企业级项目的Angular 11+入门套件
02-04
ngX入门套件 Web项目入门工具包，包括基于现代工具和工作流，社区最佳实践，可扩展的基础模板和良好的学习基础。 使用生成。 好处 在几秒钟内快速启动项目，并专注于功能，而不关注框架或工具 ...
angular bootstrap 连接
ayangjing的专栏
02-19 2022
国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html Angular 可编辑功能 http://vitalets.github.io/angular-xeditable/ Bootstrap ui http://angular-ui.github.io/bootstrap/ Angular 中文翻译文档 http://angula
angular + bootstrap
chenjh213的专栏
05-16 805
安装依赖包#安装webpack npm install webpack -g #自动生成一个package.json文件 npm init #将webpack增加到package.json文件中 npm install webpack --save-dev #如果想要安装开发工具 npm install webpack-dev-server --save-devnpm install angular
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值