1 版本说明

  

2 新建一个angular项目

ng new 项目名 --stayle=scss

  代码解释:创建一个样式文件格式为SCSS的angular项目

  技巧01:由于我angular-cli的版本是1.4.9,所以创建的angular项目使用的是angular4,由创建好的angular项目所下载的依赖包可以看出

    

  2.1 运行项目

ng serve

  技巧01:进入到项目的根目录执行上面的命令就可以启动angular项目 

  2.2 在浏览器中访问 http://127.0.0.1:4200/

    

3 ngx-bootstrap相关配置

  官网:点击前往

  3.1 下载bootstrap依赖

    由于ngx-bootstrap依赖于bootstrap,所以我们必须先将bootstrap的依赖下载下来

npm install bootstrap --save

    技巧01:由于使用bootstrap4时需要进行额外的配饰,所以建议下载bootstrap3

    技巧02:进入到项目根目录下执行完上面的命令后去angular的package.json配置文件中查看下载的bootstrap的版本

      

  3.2 将bootstrap的样式引入到angular应用的全局样式中

    方法01:只需要在 .angular-cli.json 的styles中引入bootstrap的样式即可

    

      技巧01:关于外部样式的引用可以参见这篇博客 -> 点击前往

    方法02:在angular的全局样式文件styles.scss中通过@import引入,例如

// @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import "~bootstrap/dist/css/bootstrap.min.css";
@import 'theme.scss';

  3.3 bootstrap样式的使用

    技巧01:把bootstrap样式引入全局样式后只需要根据bootstrap官方的样式进行书写即可

    bootstrap官网:点击前往

    

<div class="panel panel-primary">
<div class="panel-heading">面板页眉</div>
<div class="panel-body">面板内容</div>
<div class="panel-footer">面板页脚</div>
</div> <div class="panel panel-primary">
<div class="panel panel-heading">测试bootstrap是否生效</div>
<div class="panel panel-body">
<a class="btn btn-default" href="#" role="button">bootstrap样式的按钮</a>
</div>
<div class="panel panel-footer">2018年1月6日21:27:14</div>
</div> <div class="panel panel-primary">
<div class="panel panel-heading">测试ngx-bootstrap是否生效</div>
<div class="panel panel-body">
<accordion>
<accordion-group heading="渝">
Welcom to the beautiful city named ChongQing.
</accordion-group>
</accordion>
</div>
<div class="panel panel-footer"></div>
</div>

    使用了bootstrap后页面的渲染效果如下

      

  3.4 下载ngx-bootstrap依赖

    ngx-bootstrap使用教程:点击前往

    技巧01:由于已经配置好bootstrap了,所以直接下载ngx-bootstrap依赖包就可以啦

npm install --save ngx-bootstrap

  3.5 ngx-bootstrap组件的使用

    ngx-bootstrap组件使用教程:点击前往

    3.5.1 在需要使用ngx-bootstrap的模块级别导入相关模块

      技巧01:导入模块时必须在后面添加 .forRoot()   -> 原因不详,待更新......  2018年1月6日22:10:16

      

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component'; import { AccordionModule } from 'ngx-bootstrap'; @NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
AccordionModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

    3.5.2 在组件直接使用ngx-bootstrap相应模块提供的标签即可

      

<div class="panel panel-primary">
<div class="panel-heading">面板页眉</div>
<div class="panel-body">面板内容</div>
<div class="panel-footer">面板页脚</div>
</div> <div class="panel panel-primary">
<div class="panel panel-heading">测试bootstrap是否生效</div>
<div class="panel panel-body">
<a class="btn btn-default" href="#" role="button">bootstrap样式的按钮</a>
</div>
<div class="panel panel-footer">2018年1月6日21:27:14</div>
</div> <div class="panel panel-primary">
<div class="panel panel-heading">测试ngx-bootstrap是否生效</div>
<div class="panel panel-body">
<accordion>
<accordion-group heading="渝">
Welcom to the beautiful city named ChongQing.
</accordion-group>
</accordion>
</div>
<div class="panel panel-footer"></div>
</div>

    3.5.3 使用ngx-bootstrap后页面的渲染效果如下

      

    

  

ngx-bootstrap使用01 安装ngx-bootstrap和bootstrap及其使用、外部样式引入的更多相关文章

  1. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  2. 响应式布局 Bootstrap(01)

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

  3. 跟我一起Django - 01 安装和初始化

    跟我一起Django - 01 安装和初始化 python环境 C:\Python27\Lib\site-packages>python --versionPython 2.7.5 安装setu ...

  4. ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap

    阅读目录 Bootstrap结构介绍 在ASP.NET MVC 项目中添加Bootstrap文件 为网站创建Layout布局页 使用捆绑打包和压缩来提升网站性能 在Bootstrap项目中使用捆绑打包 ...

  5. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  6. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  7. 基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

    在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...

  8. 【九天教您南方cass 9.1】01 安装Cad和Cass9.1

    同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 今后会将cass的教程目录定期发布在测量空间中. 我是本节课主讲老师九天. [点击索取cass教程]5元立得 (给客服说暗号:“老王 ...

  9. 01: 安装zabbix server

    目录:Django其他篇 01: 安装zabbix server 02:zabbix-agent安装配置 及 web界面管理 03: zabbix API接口 对 主机.主机组.模板.应用集.监控项. ...

随机推荐

  1. hdu 2087 kmp

    http://acm.hdu.edu.cn/showproblem.php?pid=2087 算是模板题吧,找到一个子串之后将模板串指针归零否则会重复计算. #include<bits/stdc ...

  2. 51nod 1163 贪心

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1163 1163 最高的奖励 基准时间限制:1 秒 空间限制:131072 ...

  3. 【JAVA XXE攻击】微信支付官方回应XML外部实体注入漏洞

    官方回应连接:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=23_5 其中明确指出了代码修改的地方. 然后看到此文档后,我就改公司项 ...

  4. svn上传文件钩子

    svn钩子 钩子脚本就是shell的写法,钩子就是被某些版本库事件触发的程序. 常用钩子: post-commit:在提交完成成功创建之后执行该钩子.(提交已经完成,不可更改) 更新之后,通过邮件.微 ...

  5. Chrome Adobe flash player已过期怎么办

    越来越多的朋友感受到了来自谷歌chrome新版浏览器的压力,因为有不少朋友在使用新版chrome浏览器看视频时,却出现了这样的提示:Adobe flash player已过期!怎么办啊? 有网友抱怨: ...

  6. mysql前缀索引的应用

    在mysql中有时需要索引的列很长,如果直接应用索引会造成索引过大的问题.因此我们可以取其中一部分字段来做索引,例: 添加索引:alter table * add key (field(3));   ...

  7. C++之结构体struct

    原创博客,转载请注明出处! 1.简介 # C++提供一些基本的数据类型(int,float,double,char等),但由于程序处理的问题通常较复杂,基本的数据类型不能满足程序需要,因此C++允许用 ...

  8. NetCore博客

    NetCore外国一些高质量博客 https://www.cnblogs.com/fancunwei/p/9605627.html 前言 我之前看.netcore一些问题时候,用bing搜索工具搜到了 ...

  9. 20181229模拟 T1 palindrome

    20181229模拟 T1 palindrome 题意 : \(S\)是字符串\(s\)的子串可重集,求\(\sum\limits_{x\in S}\sum\limits_{y\in S}(|x|+| ...

  10. 【LeetCode】007. Reverse Integer

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...