第一步,安装。进入项目目录

  npm install ng2-bootstrap bootstrap --save

第二步,angular-cli 配置 ng2-bootstrap

   src/.angular-cli.json 文件里"apps"项下的"styles"项,添加 bootstrap.min.css

  "styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]

第三步,测试:

在app.component.html添加使用bootstrap按钮样式的代码:

  1. <!-- Standard button -->
  2. <button type="button" class="btn btn-default">(默认样式)Default</button>
  3.  
  4. <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  5. <button type="button" class="btn btn-primary">(首选项)Primary</button>
  6.  
  7. <!-- Indicates a successful or positive action -->
  8. <button type="button" class="btn btn-success">(成功)Success</button>
  9.  
  10. <!-- Contextual button for informational alert messages -->
  11. <button type="button" class="btn btn-info">(一般信息)Info</button>
  12.  
  13. <!-- Indicates caution should be taken with this action -->
  14. <button type="button" class="btn btn-warning">(警告)Warning</button>
  15.  
  16. <!-- Indicates a dangerous or potentially negative action -->
  17. <button type="button" class="btn btn-danger">(危险)Danger</button>
  18.  
  19. <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  20. <button type="button" class="btn btn-link">(链接)Link</button>

启动浏览器看效果。

angular2配置使用ng2-bootstrap的更多相关文章

  1. 全面支持Angular2的Web后台Bootstrap模板Sing App - Web & Angular 2.0 Dashboard

    在线预览 Sing App v3.3.0 (包含Angular 2.0版本实现) 现在,本模板完全支持Angular2.0版本啦. Sing Web App 是由专业前端工程师采用行业内流行的技术构建 ...

  2. (day69)axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题

    目录 一.Vue的ajax插件:axios 二.Django中的CORS跨域问题 (一)同源策略 (二)解决方式(cors模块) 三.Vue配置ElementUI 四.Vue配置jQuery和Boot ...

  3. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  4. 应该是Angular2的一个bug?

    为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...

  5. bootstrap学习起步篇:初识bootstrap之html5语法构建hello篇(一)

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

  6. Bootstrap框架的了解和使用(一)

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

  7. spring boot / cloud (十七) 快速搭建注册中心和配置中心

    spring boot / cloud (十七) 快速搭建注册中心和配置中心 本文将使用spring cloud的eureka和config server来搭建. 然后搭建的模式,有很多种,本文主要聊 ...

  8. SpringCloud的分布式配置及消息总线

    1.在搭建分布式配置时,我们大概看下分布式配置的流程 如图所示: 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务,才能使得新的配置文件生效,spring cloud config可以实现 ...

  9. kafka 客户端 consumer 配置参数

    1.Consumer Group 与 topic 订阅 每个Consumer 进程都会划归到一个逻辑的Consumer Group中,逻辑的订阅者是Consumer Group.所以一条message ...

随机推荐

  1. javax.swing.JComponent 调用顺序

    网上截取的,感觉挺有用,记录下来. http://bbs.csdn.net/topics/310041707 java swing 感觉好复杂啊…………一点都不想用但是作业要用到 >_<; ...

  2. Log4net (Log for .net)

    Log4net (Log for .net) 开源的记录日志的组件,是从java的Log4J移植到.net 日志文件存放的位置 在项目新建“App_Code”和“App_Data”,该文件夹客户端无法 ...

  3. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  4. 【Leetcode】【Medium】Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  5. Mysql学习---SQL测试题之表结构

    创建表结果和数据准备[直接执行即可] /* Navicat MySQL Data Transfer Source Server : ftl1012 Source Server Version : 50 ...

  6. Hyperledger Fabric 1.0 学习搭建 (四)--- 创建Fabric多节点集群

    4.1.配置说明 首先可以根据官方Fabric自带的e2e_cli列子中的集群方案来生成我们自己的集群,与案例不同的是我们需要把容器都分配到不同的服务器上,彼此之间通过网络来进行通信,网络构建完成后则 ...

  7. 安装ale_python_interface时遇到make错误

    1. 首先按照https://pypi.org/project/ale-python-interface/0.0.1/来安装,直接python3 -m pip 但提示缺少一个头文件ale_c_wrap ...

  8. bzoj3106 [cqoi2013]棋盘游戏

    Description 一个n*n(n>=2)棋盘上有黑白棋子各一枚.游戏者A和B轮流移动棋子,A先走. l         A的移动规则:只能移动白棋子.可以往上下左右四个方向之一移动一格. ...

  9. 在UML系统开发中有三个主要的模型

    http://www.cnblogs.com/Yogurshine/archive/2013/01/14/2859248.html 在UML系统开发中有三个主要的模型: 功能模型: 从用户的角度展示系 ...

  10. 第三方库RATreeView的使用记录

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012951123/article/details/36421939 由于项目须要用到树状列表,能够 ...