Web前端 — Bootstrap（3）

Bootstrap本次知识点

1.表格

2.按钮

3.图片

1.表格

（1）基本表格

<table class="table">

（2）条纹表格

<table class="table table-striped">

（3）边框表格

<table class="table table-bordered">

（4）悬停表格

<table class="table table-hover">

（5）精简表格

<table class="table table-condensed">

（6）状态表格

状态表格有：active、success、info、warning、danger

（7）隐藏某一行

<tr class="sr-only">

（8）响应式表格

<div class="table-responsive">

2.按钮

（1）按钮标签

（2）按钮大小

.btn-ln:这会让按钮看起来比较大。

<button class="btn btn-default btn-lg">按钮</button>

.btn-sm:这会让按钮看起来比较小。

<button class="btn btn-default btn-sm">按钮</button>

.btn-xs:这会让按钮看起来特别小。

<button class="btn btn-default btn-xs">按钮</button>

（3）预定义样式

.btn-default:默认标准按钮

<button class="btn btn-default">按钮</button>

.btn-primary:首选项样式

<button class="btn btn-primary">主选项</button>

.btn-success:成功样式

<button class="btn btn-success">成功</button>

.btn-info:一般信息样式

<button class="btn btn-info">信息</button>

.btn-warning:警告样式

<button class="btn btn-warning">警告</button>

.btn-danger:危险样式

<button class="btn btn-danger">危险</button>

.btn-link:链接样式

<button class="btn btn-link">链接</button>

（4）块级按钮

.btn-block:块级按钮（拉伸至父元素的100%的宽度）

（5）激活状态

<button class="btn active">Button</button>

（6）禁用状态

<button class="btn active disabled">Button</button>

3.图片

.img-rounded:圆角（IE8不支持）。

<img src="img/download.png" alt="" class="img-rounded"/>

.img-circle:圆角（IE8不支持）。

<img src="img/download.png" alt="" class="img-circle"/>

.img-thumbnail:缩略图功能。

<img src="img/download.png" alt="" class="img-thumbnail"/>

.img-responsive:图品响应式（将很好的扩展到父元素）。

<img src="img/002.jpg" alt="" class="img-responsive"/>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80352880

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！