1、检查@angular/cli版本
命令行ng -v ，版本号必须大于1.0.0-beta.24
2、新建工程
工程所在目录，命令行ng new my-app --style=scss 带style参数原因：ng-bootstrap要求使用scss
3、安装bootstrap
cd my-app 进入工程目录
cnpm install @ng-bootstrap/ng-bootstrap bootstrap@next --save 安装ng-bootstrap和bootstrap
4、添加bootstrap.min.css引用
工程目录下，打开.angular-cli.json文件，在styles中添加bootstrap.min.css引用
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css", 此行为新添加
"styles.scss"
]
5、src目录下，新建_variables.scss文件
6、在styles.scss文件中添加如下内容
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
7、/src/index.html文件中添加使用BS4标记
<body>
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>
<app-root> </app-root>
</body>
8、AppModule类中引用NgbModule
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
NgbModule.forRoot()
],
})
export class AppModule { }
9、添加模板
在app.component.html中添加如下内容
<p>
<ngb-alert type="success" [dismissible]="false">
<strong>Success!</strong> Good work.
</ngb-alert>
</p>
10、验证
工程目录下，命令行cnpm start启动工程，浏览器中查看结果
11、ng-bootstrap API参考网址
查看更多关于【bootstrap】的文章
Bootstrap基础：选择器
1.CSS属性选择器[arrt=value] 该属性有指定的确切值[arrt~=value] 该属性值必须是多个空格隔开的值，比如，class=“title featured home”，而且这些值中的一个必须是指定的值“value”[arrt|=value] 属性的值就是“value”或者以“value”开始并立即
0评论2023-03-16469
Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"); 国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:
0评论2023-03-16312
elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应：{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":
0评论2023-03-08659
50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。本文向你推荐 50 个 Bootstrap 的插件，可以考虑在你下一个项目中使用它们。1. Boots
0评论2023-03-08629
Bootstrap资源 bootstrap官方文档
官方网站：http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客：http://blog.getbootstrap.com/ 中文文档：http://wrongwaycn.github.com/bootstrap/docs/index.html 图标：Font Awesomehttp://fortawesome.github.com
0评论2023-03-08321
bootstrap bootstrap检验
bootstrap是简洁灵活的用于搭建web页面的Html，Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery，因此jquery要在bootstrap之前引进一般要把CS
0评论2023-03-08325
002-BootStrap基本模板 bootstrap 模型
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式，表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值理想宽度/可见宽度--meta name="vie
0评论2023-03-08506
003-BootStrap完整模板 bootstrap demo
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式，表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值理想宽度/可见宽度--!--视口的作用
0评论2023-03-08910
nginx 下 bootstrap fa 字体异常问题
server {listen 8082;#server_name192.168.16.88; #root/home/ywt/workspace/kuF/web/statics;#autoindex on; #autoindex_exact_size off; #autoindex_localtime on; # } 原配置如上，实际图标加载出来乱七八糟； 经过具体分析，实际css文件正常加载，字体
0评论2023-03-08960
bootstrap 响应式布局
先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：htmlheadstylebody {background-color: white;}@media screen and (max-width: 960px){body {background-color: red;}}@media screen and (max-width: 768px){body {background-color: yellow;}}@
0评论2023-03-08482
bootstrap bootstrap用什么软件
bootstrap:简易模版：meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-
0评论2023-03-08809
