本文作者:DurkBlue

bootstrap如何制造表格

DurkBlue 2019-12-18 1779
bootstrap如何制造表格摘要: html表格的基本结构html<table>    <tr>    &nbs...

html表格的基本结构

html<table>    <tr>        <td></td>        <td></td>    </tr>    <tr>        <td></td>        <td></td>    </tr></table>

    bootstrap中通过相应的样式对表格进行美化:

.table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

html<table class="table"></table>

       

.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

html<table class="table table-striped"></table>


.table-bordered 类为表格和其中的每个单元格增加边框。

html<table class="table table-bordered"></table>


.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

html<table class="table table-hover"></table>


.table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

html<table class="table table-condensed"></table>

   

    bootstrap对table标签中的 tr td 的样式设置:

        .success 类鼠标悬停在行或单元格上时所设置的颜色。

        .success     标识成功或积极的动作
        .info     标识普通的提示信息或动作
        .warning     标识警告或需要用户注意
        .danger     标识危险或潜在的带来负面影响的动作

html<!--设置一行的状态颜色--><tr class="active"></tr><tr class="success"></tr><tr class="warning"></tr><tr class="danger"></tr><tr class="info"></tr><!--设置一行中的某列的状态颜色--><tr>  <td class="active"></td>  <td class="success"></td>  <td class="warning"></td>  <td class="danger"></td>  <td class="info"></td></tr>

   

    响应式表格的设置,在table表格外包裹一层div,并设置.table-responsive类:

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


此篇文章由DurkBlue发布,撰文不易,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-18
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享