> 卡片
```
.card
.card-inverse 改变文字和背景颜色
```
> 卡片颜色
```
.card-primary
.card-success
.card-info
.card-warning
.card-danger
```
![](https://box.kancloud.cn/4ffd171e09d71d510c0fa89a54402c7c_1144x95.png)
> 卡片边框
```
.card-outline-primary
.card-outline-secondary
.card-outline-success
.card-outline-info
.card-outline-warning
.card-outline-danger
```
![](https://box.kancloud.cn/e812e5ed63ed519e0684ebbfd93ff80d_1158x116.png)
> 卡片分组
```
.card-group
.card
.card
```
![](https://box.kancloud.cn/c9d55dc9519008a1276ebc4430c251eb_812x509.png)
> 等宽高分组卡片
```
.card-deck-wrapper
.card-deck
.card
.card
```
![](https://box.kancloud.cn/825e3e3df6e3f0a28d8c1a18e26d87de_836x541.png)
> 卡片瀑布流
**注意** 不支持IE9及以下版本
```
.card-columns
.card
.card.card-block
.card
```
![](https://box.kancloud.cn/8cf1ebc391b37c2bc6834f2c7cabe852_794x606.png)
> 卡片结构
···
.card
.card-header
.card-block
.card-title
.card-subtitle
.card-text
.card-link
.card-blockquote
.card-header-tabs
.card-header-pills
.card-footer
.card-img
.card-img-top
.card-img-overlay
```
- card-header, card-footer
![](https://box.kancloud.cn/a8d94b8b20279fd09c69825956de569e_375x308.png)
- card-title, card-subtitle, card-link, card-text
![](https://box.kancloud.cn/51f54289e0d6fabcea24cef10a11a1f6_357x452.png)
- card-img-overlay, card-inverse
```
.card.card-inverse
img.card-img
.card-img-overlay
h4.card-title
p.card-text
```
![](https://box.kancloud.cn/8496e8c8dfa3348a4721f88c8701e510_341x284.png)
> 卡片+选项卡
```
.card.card-xs-center
.card-header
ul.nav.nav-tabs.card-header-tabs.float-xs-left
li.nav-item
a.nav-link.active
li.nav-item
a.nav-link
.card-block
.card-title xx
p.card-text
```
![](https://box.kancloud.cn/68a3652f95da248d21feea41df4647dc_354x265.png)
> 卡片 + 导航条
```
.card.card-xs-center
.card-header
ul.nav.nav-pills.card-header-pills.float-xs-left
li.nav-item
a.nav-link.active
li.nav-item
a.nav-link
.card-block
.card-title xx
p.card-text
```
![](https://box.kancloud.cn/f30048556b53caf2480457ef881c8949_351x278.png)
- 说明
- angular 1.x
- ngModelController
- ngOptions
- ngModelOptions
- lifecycle
- directive
- angular 2
- @angular/forms
- 类
- AbstractControl
- AbstractControlDirective
- AbstractFormGroupDirective
- FormControl
- FormArray
- FormBuilder
- FormGroup
- NgControl
- 接口
- controlValueAccessor
- 指令
- DefaultValueAccessor
- Angular 2 生命周期
- OnInit
- DoCheck
- @angular/router
- 配置
- Routes
- 指令
- RouterOutlet
- RouterLink
- 接口
- ActivatedRoute
- UrlTree
- NavigationExtras
- ActivatedRouteSnapshot
- RouterStateSnapshot
- 类
- UrlSegment
- UrlSegmentGroup
- UrlSerializer
- DefaultUrlSerializer
- Router
- bug记得
- @angular/http
- 类
- Http
- Body
- Response
- ResponseOptions
- Header
- Request
- RequestOptions
- URLSearchParams
- @angular/core
- decorator
- Component-decorator
- animation
- DI
- linker
- TemplateRef
- ElementRef
- EmbeddedViewRef
- ViewRef
- ViewContainerRef
- Query
- ComponentFactory
- ComponentRef
- Renderer
- change_detection
- KeyValueDiffers
- IterableDiffers
- ChangeDetectorRef
- ChangeDetectionStrategy
- Zone
- ngZone
- @angular/common
- 指令
- NgTemplateOutlet
- QueryList
- bootstrap4
- card
- form
- 重点关注博客
- 学习过的文章
- 笔记
- Angular 2 双向绑定
- 将字符串解析成DOM
- rx相关
- operators
- combineLatest
- combineAll
- concat(All, Map, *MapTo)
- 背压(backpressure)
- js事件keycode对应表
- 装饰器
- 有用的代码摘录
- 日期操作
- 数量操作
- 字符操作
- rxjs问题
- 小示例
- h5面试准备
- react
- 开发遇到的问题