每日一bootstrap 表格

拼搏现实的明天。 2022-08-21 03:06 129阅读 0赞

表格so easy的。今天复习起来还是蛮快的一会就敲完了~~敲完就可以干别的事了  
表格只要记住原来的HTML格式，那就是加几个class的事情，非常容易  
代码用到了上一次复习的栅格布局。  
感觉代码也没啥可说的，自学的话看着API也会很简单，我这给懒人放下图片，看看样式的样子

<div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-striped">
                            <thead>学生成绩</thead>
                            <tbody>
                                <tr>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>课程</th>
                                    <th>成绩</th>
                                </tr>
                                <tr>
                                    <td>小李</td>
                                    <td>1</td>
                                    <td>Web开发</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>小王</td>
                                    <td>2</td>
                                    <td>Web开发</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

![.table给表格添加了最基本的样式添加了内填充，而table-striped加上了斑马线][.table_table-striped]

<table class="table table-bordered">
                            <thead>学生成绩</thead>
                            <tbody>
                                <tr>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>课程</th>
                                    <th>成绩</th>
                                </tr>
                                <tr>
                                    <td>小李</td>
                                    <td>1</td>
                                    <td>Web开发</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>小王</td>
                                    <td>2</td>
                                    <td>Web开发</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                            </tbody>
                        </table>

![这里写图片描述][20160312094335920]

<table class="table table-hover">
                            <thead>学生成绩</thead>
                            <tbody>
                                <tr>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>课程</th>
                                    <th>成绩</th>
                                </tr>
                                <tr>
                                    <td>小李</td>
                                    <td>1</td>
                                    <td>Web开发</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>小王</td>
                                    <td>2</td>
                                    <td>Web开发</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                            </tbody>
                        </table>

![这里写图片描述][20160312094926585]

<table class="table table-condensed">
                            <thead>学生成绩</thead>
                            <tbody>
                                <tr>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>课程</th>
                                    <th>成绩</th>
                                </tr>
                                <tr>
                                    <td>小李</td>
                                    <td>1</td>
                                    <td>Web开发</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>小王</td>
                                    <td>2</td>
                                    <td>Web开发</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                            </tbody>
                        </table>

![这里写图片描述][20160312095116006]

<table class="table">
                            <thead>学生成绩</thead>
                            <tbody>
                                <tr class="active">
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>课程</th>
                                    <th>成绩</th>
                                </tr>
                                <tr class="success">
                                    <td>小李</td>
                                    <td>1</td>
                                    <td>Web开发</td>
                                    <td>100</td>
                                </tr>
                                <tr class="warning">
                                    <td>小王</td>
                                    <td>2</td>
                                    <td>Web开发</td>
                                    <td>10</td>
                                </tr>
                                <tr class="danger">
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                                <tr class="info">
                                    <td>小孙</td>
                                    <td>3</td>
                                    <td>Web开发</td>
                                    <td>50</td>
                                </tr>
                            </tbody>
                        </table>

![这里写图片描述][20160312095326262]

[.table_table-striped]: /images/20220731/f5fc63df2d3d4fe39f3914b9edc56a0a.png
[20160312094335920]: /images/20220731/b5ba90ccfad44535a317d121d308e9b7.png
[20160312094926585]: /images/20220731/c34df6458dbf4b0bb4cfc29b5240bf22.png
[20160312095116006]: /images/20220731/127f3f59aee94edb979d8bcb73c88044.png
[20160312095326262]: /images/20220731/073b8883ca9e4441b55b2025c162b47b.png