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

  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按钮样式的代码:

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<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. Python学习---重点模块之configparse

    configparse模块常用于生成和修改常见的配置文档 生成配置模块:用字典写 import configparser config = configparser.ConfigParser() co ...

  2. 设计模式:代理(Proxy)模式

    设计模式:代理(Proxy)模式 一.前言    代理模式或许我们都听说过,至少知道代理(Proxy)这个东西的,否则看这篇博客也没任何意义的.什么叫做代理,代理是代替服务器去接受请求者的请求的中间人 ...

  3. 设计模式:组合(Composite)模式

    设计模式:组合(Composite)模式 一.前言   关于Composite模式,其实就是组合模式,又叫部分整体模式,这个模式在我们的生活中也经常使用,比如说如果读者有使用Java的GUI编写过程序 ...

  4. php红包生成随机算法

    一.适用场景 红包总金额X,分配成Y个红包,每个红包随机金额. 二.生成算法 /** * 红包生成算法 * @param $money 总金额 * @param $number 红包数量 * @par ...

  5. February 1 2017 Week 5 Wednesday

    If you can't get a miracle, become one. 如果奇迹没有眷顾你,那就让自己变成奇迹吧. If you think you are bad luck, you did ...

  6. ZT Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性

    Android布局]在程序中设置android:gravity 和 android:layout_Gravity属性 分类: [Android基础] 2011-04-19 16:06 54739人阅读 ...

  7. MapReduce编程中常用的字符操作

    本文主要用于记录自己在编写mapreduce程序时常用的一些方法,后期会不断更新,用于自己复习和给新手一些帮助. 字符串操作 String str = " 12345"; // 字 ...

  8. (一)自定义ViewGroup绘制出菜单

    从网上学习了hyman大神的卫星菜单实现,自己特意亲自又写了一编代码,对自定义ViewGroup的理解又深入了一点.我坚信只有自己写出来的知识才会有更加好的的掌握.因此也在自己的博客中将这个卫星菜单的 ...

  9. bzoj4600 [Sdoi2016]硬币游戏

    Description Alice和Bob现在在玩的游戏,主角是依次编号为1到n的n枚硬币.每一枚硬币都有两面,我们分别称之为正面和反面.一开始的时候,有些硬币是正面向上的,有些是反面朝上的.Alic ...

  10. 弃坑pexpect,入坑paramiko

    上文书说到,ssh库pexpect的使用,简直就是个“月亮公主”——满眼全是坑.勉强把程序写好了,跑起来的时候发现了一个新坑,让我不可抗拒的把它弃掉了——经常莫名其妙的连不上服务器!开线程连接14台服 ...