angular2配置使用ng2-bootstrap
第一步,安装。进入项目目录
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的更多相关文章
- 全面支持Angular2的Web后台Bootstrap模板Sing App - Web & Angular 2.0 Dashboard
在线预览 Sing App v3.3.0 (包含Angular 2.0版本实现) 现在,本模板完全支持Angular2.0版本啦. Sing Web App 是由专业前端工程师采用行业内流行的技术构建 ...
- (day69)axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题
目录 一.Vue的ajax插件:axios 二.Django中的CORS跨域问题 (一)同源策略 (二)解决方式(cors模块) 三.Vue配置ElementUI 四.Vue配置jQuery和Boot ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- 应该是Angular2的一个bug?
为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具.配置实在让人 很是焦灼,就像asp.n ...
- bootstrap学习起步篇:初识bootstrap之html5语法构建hello篇(一)
目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...
- Bootstrap框架的了解和使用(一)
前 言 Bootstrap 什么是 Bootstrap?Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JavaScrip ...
- spring boot / cloud (十七) 快速搭建注册中心和配置中心
spring boot / cloud (十七) 快速搭建注册中心和配置中心 本文将使用spring cloud的eureka和config server来搭建. 然后搭建的模式,有很多种,本文主要聊 ...
- SpringCloud的分布式配置及消息总线
1.在搭建分布式配置时,我们大概看下分布式配置的流程 如图所示: 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务,才能使得新的配置文件生效,spring cloud config可以实现 ...
- kafka 客户端 consumer 配置参数
1.Consumer Group 与 topic 订阅 每个Consumer 进程都会划归到一个逻辑的Consumer Group中,逻辑的订阅者是Consumer Group.所以一条message ...
随机推荐
- 数据库建模工具 PD的使用
1.1. 数据库建模工具 PD的使用 安装12.5版本,进行破解 PD 是最专业数据建模工具, 是 Sybase 公司一个 产品 PD 提供四种模型文件 PDM 物理数据模型,面向数据库表结构设计,直 ...
- ZT ---- 给孩子的信(孩子写给爸爸妈妈的信在24、25、26楼)
胡同口 > 情感 > 婚后空间 > 给孩子的信(孩子写给爸爸妈妈的信在24.25.26楼) 给孩子的信(孩子写给爸爸妈妈的信在24.25.26楼)分享: 腾讯微博 新浪微博 QQ空间 ...
- Entity FrameWork Code First 配置关系
Has方法与With方法 A.HasRequired(a => a.B).WithOptional(b => b.A);上面一句配置意思就是A类包含B类一个不为null的实例,B类包含A类 ...
- SAP Customer Data Cloud(Gigya)的用户搜索实现
我在Gigya前台根据email搜索,输入一个邮箱地址,回车,在Chrome开发者工具里观察到到后台的网络请求: 这是一个post请求: __RequestVerificationToken 请求体: ...
- 一个理解PHP面向对象编程(OOP)的实例
<?php //定义一个“人”类作为父类 class Person{ //声明一个新变量公共变量$name,可被任何包中的类访问 public $name;//人的名字 public $sex; ...
- 「LG4782 模板 2-SAT 问题」
题目 来学\(2\)-\(sat\)了 这个东西确实不难 这个算法就是给你一堆\(bool\)变量\(x_1,x_2...x_n\),之后给你一些限制 限制的形式就是给你一对\((u,o1,v,o2) ...
- 【[CQOI2014]数三角形】
lx让做的题,其实很简单,难度评到紫令人吃惊 首先读进来\(n,m\)先\(++\),之后就是一个格点数为\(n*m\)的矩阵了 我们直接求很那做,补集转化一下,我们容斥来做 首先所有的情况自然是\( ...
- SpringBoot实战(十二)之集成kisso
关于kisso介绍,大家可以参考官方文档或者是我的博客:https://www.cnblogs.com/youcong/p/9794735.html 一.导入maven依赖 <project x ...
- 记一次关于SSM框架的使用错误
今天遇到一个十分操蛋的问题,最后发现是因为忘记在对应的Service上加上@AutoWired. 难怪单元测试没问题,因为单元测试中用到的Service,其实现类通过DAO自动装配了.也就是在对应的s ...
- java soa接口测试,可以使用http协议调用
post调用url:“接口url”+/rpc post调用参数body: { "ver": "接口版本号", "soa":{"re ...