分享程序员开发的那些事...
更新时间：2022-04-26 03:34:37
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
<div class="table-responsive">
<table class="table">
<caption>table基本样式</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>学历</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>学历</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>001</td>
<td>zs</td>
<td>20</td>
<td>大专</td>
</tr>
<tr class="success">
<td>001</td>
<td>zs</td>
<td>20</td>
<td>大专</td>
</tr>
<tr class="danger">
<td>001</td>
<td>zs</td>
<td>20</td>
<td>大专</td>
</tr>
<tr class="info">
<td>001</td>
<td>zs</td>
<td>20</td>
<td>大专</td>
</tr>
<tr class="warning">
<td>001</td>
<td>zs</td>
<td>20</td>
<td>大专</td>
</tr>
</tbody>
</table>
（7）隐藏某一行
<tr class="sr-only">（8）响应式表格
<div class="table-responsive">2.按钮
（1）按钮标签
//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">
注意：为了跨浏览器展现，尽量使用button
（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%的宽度）
<button class="btn btn-default btn-block">按钮</button>
<button class="btn btn-default btn-block btn-lg">按钮</button>
（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的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！