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

  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. 续Html5

    HTML5 规定了一种通过 video 元素来包含视频的标准方法 当前video元素支持的三种视频格式 首先呢,显示视频所需要的是 <video src="movie.ogg" ...

  2. 【Leetcode】【Medium】3Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  3. (原)使用 memcache 使用过程中可能遇到的问题

    在项目优化中,使用到了memcache,刚开始不能用,后来期间总会偶尔抛出异常,刚开始怀疑动态库版本问题,后来尝试了各种替换依旧误解,搞得我日思夜想的,天天惦记着他..=_= 下午拿出半天时间,进行错 ...

  4. 分享一个SqliteHelper类

    分享一个SqliteHelper类 SQLite作为一个本地文件数据库相当好用,小巧.快速.支持事务.关系型,甚至可以运行在Android上.在很久以前的一个项目中,我们用过它来将接收到的数据做本地统 ...

  5. Spring 整合Hibernate 示例

    虽然Spring整合Hibernate早就会了,但经常在创建项目整合这两个框架的时候出一些低级错误.所以在这里写一个示例,以后再遇到错误时,再把遇到的错误或异常添加上. 一.创建一个动态WEB工程,添 ...

  6. StringUtils工具类介绍

    1 abbreviate方法缩写一段文字 StringUtils.abbreviate("abcdefghijklmno", -1, 10) = "abcdefg...& ...

  7. 通过nginx 499 来判断服务端超时数量

    这个其实不能算一篇文章,因为内容太少了,就当记点笔记吧. (1)什么是 nginx 499 499 其实是 nginx 下特有的 http 状态码,代表客户端主动断开了连接,导致服务器无法返回 htt ...

  8. EasyUI使用之鼠标双击事件

    easyui鼠标双击事件,使用 onDblClickRow(index, row) 事件,在用户双击一行的时候触发,参数包括: index:点击的行的索引值,该索引值从0开始. row:对应于点击行的 ...

  9. PAT——1013. 数素数

    令Pi表示第i个素数.现任给两个正整数M <= N <= 104,请输出PM到PN的所有素数. 输入格式: 输入在一行中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的所有素数 ...

  10. 【题解】洛谷P3952 [NOIP2017TG] 时间复杂度(模拟)

    题目来源:洛谷P3952 思路 纯模拟没啥可说的了 果然好复杂 参考了你谷一个40行代码 代码 #include<iostream> #include<cstdio> #inc ...