Bootstrap 之Table样式[通俗易懂]

Bootstrap 之Table样式[通俗易懂]将标签添加class=‘table’类后的样式Table样式编号姓名年龄001郭靖25002黄蓉23003杨过24我们可以看到,Tabl

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

将<table>标签添加class=‘table’ 类后的样式

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Table样式</title>

    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
    <script src="~/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <table class="table">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>
</html>

我们可以看到,Table是可以自由缩放的(不是响应式,应该是流媒体式)

Bootstrap 之Table样式[通俗易懂]

class=’table  table-striped’  条纹状表格(隔行变色)

<body>
    <table class="table table-striped">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>

Bootstrap 之Table样式[通俗易懂]

class=”table table-bordered” 给表格添加边框

<body>
    <table class="table table-bordered">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>

Bootstrap 之Table样式[通俗易懂]

class=”table table-hover” 鼠标悬停变色

<body>
    <table class="table table-hover">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>

Bootstrap 之Table样式[通俗易懂]

class=”sr-only” 隐藏某一行

<body>
    <table class="table">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody id="abc">
            <tr class="sr-only"><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>

在第一行的tr上使用了sr-only样式后,编号为001的那一行被隐藏了

Bootstrap 之Table样式[通俗易懂]

 状态类(主要做标记)

可以单独设置每一行的背景样式(总共有5中不同的样式可以选择)

Bootstrap 之Table样式[通俗易懂]

<body>
    <table class="table">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr class="active"><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr class="success"><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr class="info"><td>003</td><td>杨过</td><td>24</td></tr>
            <tr class="warning"><td>004</td><td>黄老邪</td><td>54</td></tr>
            <tr class="danger"><td>005</td><td>欧阳锋</td><td>42</td></tr>
        </tbody>
    </table>
</body>

Bootstrap 之Table样式[通俗易懂]

响应式表格

class=”table-responsive 浏览器宽度小于768px时,表格出现边框。(注意:这个样式定义在表格的父元素上)

响应式表格就是当浏览器小于多少宽度或者高度的时候做出什么动作,例如当浏览器的的宽度小于768px的时候表格出现边框

<body class="table-responsive">
    <table class="table ">
        <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody id="abc">
            <tr><td>001</td><td>郭靖</td><td>25</td></tr>
            <tr><td>002</td><td>黄蓉</td><td>23</td></tr>
            <tr><td>003</td><td>杨过</td><td>24</td></tr>
        </tbody>
    </table>
</body>

Bootstrap 之Table样式[通俗易懂]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/191425.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • crontab定时任务不执行的原因

    crontab定时任务不执行的原因我在网上找的时候发现网上主要说了这5个原因:1crond服务未启动crontab不是Linux内核的功能,而是依赖一个crond服务,这个服务可以启动当然也可以停止。如果停止了就无法执行任何定时任务了,解决的方法是打开它:crond或servicecrondstart如果提示crond命令不存在,可能被误删除了,CentOS下可以通过这个命令重新安装:yum…

  • 常用电平转换电路的方法有_双击电平转换单级电路

    常用电平转换电路的方法有_双击电平转换单级电路电平转换在电路应用中屡见不鲜,方案设计也是五花八门,本文中整理了一些常见的电平转换电路,区别于成本功耗等因素的不同适用于不同的应用场景,读者可以用作参考,根据实际项目需求加以更改。1、上拉电阻加二极管方案(低成本)本方案适用于输入信号电平大于输出信号电平的转换电路上2、适用于输入信号大于输出信号的电平转换电路上,三极管选型要求:PNP三极管的饱和压降尽可能小,否则可能导致转换异常3、适用于大部分应用场景。属于典型应用。很多模块设计上都会采用这样的方案,成本低,而且转换的可靠性好4、2级反相

  • Jenkins配置Coding Webhook

    Jenkins配置Coding WebhookJenkins配置CodingWebhook1.安装插件2.创建项目3.Coding设置ServiceHook1.安装插件需要重启Jenkins2.创建项目这里选择自由风格添加git注意:WebHook地址是你http://jenkins地址/coding/项目名设置运行脚本3.Coding设置ServiceHook使用CodingWebhookPlugin过时问题.使用插件后无法保存配置文件

  • android微信怎么建群,微信怎么建群?微信怎么建群当群主?

    android微信怎么建群,微信怎么建群?微信怎么建群当群主?【科技讯】5月12日消息,微信怎么建群,微信怎么建群当群主?微信怎么建群聊,微信建群第一次多少人?想必这些问题,已经开始成为大家在日常使用微信时经常会遇到的一个问题,今天,科技讯小编就亲自上手,为大家一一解答这些问题。微信已然成为大家日常进行社交的第一工具,虽然同属腾讯旗下产品,但是微信与QQ显然有着明显的用户群体区分,qq仍然活跃着大量的95后甚至00后的年轻人,而在他们看来,微信则是“大人”们…

  • Carson带你学设计模式:适配器模式(Adapter Pattern)

    Carson带你学设计模式:适配器模式(Adapter Pattern)手把手带你全面了解适配器模式

  • MySQL联合索引or_MySQL联合索引命中条件

    MySQL联合索引or_MySQL联合索引命中条件转于:https://blog.csdn.net/claram/article/details/77574600首先明确:为什么要用联合索引?对于查询语句“SELECTE.*FROMEWHEREE.e1=1ANDE.e3=2”涉及到两列,这个时候我们一般采用一个联合索引(e1,e3);而不用两个单列索引,这是因为一条查询语句往往应为mysql优化器的关系只用一个索引,就算你有两个索…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号