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)


相关推荐

  • inputstreamreader读取文件_java读取字符串中每一个字符

    inputstreamreader读取文件_java读取字符串中每一个字符二.字符流1.单个字符读取publicstaticvoidmain(String[]args){ try{ InputStreamReaderin=newInputStreamReader( newFileInputStream(“D:\\bf\\Desktop\\test.txt”),”UTF-8″); intn; while((n…

  • 设计模式、框架、架构、平台的区别「建议收藏」

    设计模式、框架、架构、平台的区别「建议收藏」区分什么是架构、框架、模式和平台,一直都感觉这几个词过于抽象和模糊,今天大家来说说到底什么是架构、框架、模式和平台? 收集了的一些来自网上各自的定义和区分如下: 设计模式 1、设计模式为什么要先说设计模式?因为设计模式在这些概念中是最基本的,而且也比较简单。那么什么是设计模式呢?说的直白点,设计模式就是告诉你针对特定问题如何组织类、对象和接口之间的关系,是前人总结的经验

    2022年10月10日
  • Mac 安装配置抓包工具Charles「建议收藏」

    Mac 安装配置抓包工具Charles「建议收藏」     本文主要介绍mac下如何安装网络抓包工具以及如何实现抓包。在windows下有一款不错的抓包工具Fidder,但是由于是C#编写的,无法再mac下运行,因此,需要换一款抓包软件:Charles。  Charles是一款Java语言编写的抓包工具,因此可以跨平台使用,可以在win/linux下使用,java编写的当然需要安装jdk了。同时还有一个问题,就是收费的,50美刀,折合…

  • Mybatis延迟加载和查询缓存

    Mybatis延迟加载和查询缓存Mybatis延迟加载和查询缓存

  • Oracle 11g数据库详细安装步骤图解,附带安装包

    Oracle 11g数据库详细安装步骤图解,附带安装包1.先到Oracle官网上下载11goracleDatabase11g第2版(11.2.0.1.0)标准版、标准版1以及企业版,适用于MicrosoftWindows(x64)的OracleDatabase11g第2版(11.2.0.1.0),下载地址(需要注册登录):http://download.oracle.com/otn/nt/ora…

  • 权重衰减(weight decay)与学习率衰减(learning rate decay)

    权重衰减(weight decay)与学习率衰减(learning rate decay)“微信公众号”1.权重衰减(weightdecay)L2正则化的目的就是为了让权重衰减到更小的值,在一定程度上减少模型过拟合的问题,所以权重衰减也叫L2正则化。1.1L2正则化与权重衰减系数L2正则化就是在代价函数后面再加上一个正则化项:其中C0代表原始的代价函数,后面那一项就是L2正则化项,它是这样来的:所有参数w的平方的和,除以训练集的样本大小n。λ就是正则项系数,权衡正则项与C0项的比…

发表回复

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

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