码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap学习(四)表格

时间:2019-05-04 18:45:20      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:适应   学习   under   需要   strong   war   boot   单元格   div   

基础样式:

自适应沾满浏览器

    <table class="table">
        <tr>
            <th>序号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>11111</td>
            <td>2222</td>
        </tr>
    </table>
//加样式的时候一般先加基础样式,然后再加其他样式

技术图片

带条纹:

    <table class="table table-striped">
        <tr>
            <th>序号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>11111</td>
            <td>2222</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>2222</td>
        </tr>
    </table>

技术图片

 

带边框:

table-bordered

技术图片

 

鼠标悬停:table-hover

 

表格行样式:

    <table class="table table-striped table-bordered table-hover">
        <tr class="success">
            <th>序号</th>
            <th>姓名</th>
        </tr>
        <tr class="active">
            <td>11111</td>
            <td>2222</td>
        </tr>
        <tr class="danger">
            <td>11111</td>
            <td>2222</td>
        </tr>
    </table>

技术图片

Class      描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success     标识成功或积极的动作
.info       标识普通的提示信息或动作
.warning     标识警告或需要用户注意
.danger      标识危险或潜在的带来负面影响的动作

 

响应式表格:

响应式表格需要将table放到div内  且div样式设置为table-responsive即可

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

 

bootstrap学习(四)表格

标签:适应   学习   under   需要   strong   war   boot   单元格   div   

原文地址:https://www.cnblogs.com/nxzblogs/p/10701300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!