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

<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的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！