bootstrap3的.tabel .danger

最新推荐文章于 2022-05-01 19:15:45 发布
最新推荐文章于 2022-05-01 19:15:45 发布
阅读量1k 收藏
点赞数
文章标签： bootstrap3 table danger
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling811/article/details/16946725
版权

      2.3版本的                       3.0版本

.table .error .table .danger

通过这些状态class可以为行货单元格设置颜色。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script type="text/javascript" src="dist/js/jquery.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>

<body style="margin:200px">
    <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>1</td>
            <td>这个是active的效果</td>
            <td>这个是active的效果</td>
            <td>这个是active的效果</td>
          </tr>
          <tr>
            <td>2</td>
            <td>内容栏</td>
            <td>内容栏</td>
            <td>内容栏</td>
          </tr>
          <tr class="success">
            <td>3</td>
            <td>这个是success的效果</td>
            <td>这个是success的效果</td>
            <td>这个是success的效果</td>
          </tr>
          <tr>
            <td>4</td>
            <td>内容栏</td>
            <td>内容栏</td>
            <td>内容栏</td>
          </tr>
          <tr class="warning">
            <td>5</td>
            <td>这个是warning的效果</td>
            <td>这个是warning的效果</td>
            <td>这个是warning的效果</td>
          </tr>
          <tr>
            <td>6</td>
            <td>内容栏</td>
            <td>内容栏</td>
            <td>内容栏</td>
          </tr>
          <tr class="danger">
            <td>7</td>
            <td>这个是danger的效果</td>
            <td>这个是danger的效果</td>
            <td>这个是danger的效果</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

效果图：




依然那么楞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS设置鼠标滑过Table表格时，相应行的背景颜色
11-17 1万+
.table>tbody>tr:hover { background-color: #fff; }
bootstrap4--表格和网格系统
zxn200125的博客
12-15 1738
bootstrap4中的表格、网格系统的使用和css类
制作简单表格与相关知识点
m0_57448314的博客
05-28 655
本文分三部分：创建文件、代码、知识点。 首先创建一个文件，还有控制器，然后引入相对应的插件，CSS、JS、jQuery插件。把三个插件复制到“解决方案资源管理器”里面就可以直接引进去（通俗点，直接拉过来即可）。CSS的插件放在<titile>标签下面，JS、jQuery插件都放在<body>包含的<div>标签下面。 下面将是表格的完整代码： 然后在浏览器呈现出来就是一个表格形式： 知识点： 1.（行）.row是列(.co...
Bootstrap（二）
weixin_55685975的博客
04-23 1245
表格 基础表格       .table 类来设置基础表格的样式 条纹表格       .table-striped 类，<tbody>内的行上添加条纹 带边框表格       .table-bordered 类可以为表格添加边框 鼠标悬停状态表格      &nbsp
Bootstrap【第二章】全局CSS之排版&代码&表格
明思齐的博客
04-30 1114
前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格 一张图概括今天的内容： 一、排版 1.1、页面主题 1、段落突出：通过.lead类可以让段落突出显示 例如：<p class="lead">我家门前有两颗枣树</p> 1.2、标题 1.标题h1--h6和html中的效果一样 2.副标题：在<h1><small>副标题</small...
BootstrapTable加载按钮功能实例代码详解
08-29
BootstrapTable加载按钮功能实例代码详解 BootstrapTable是一个基于Bootstrap框架的jQuery插件，主要用于在Web应用程序中生成表格。加载按钮功能是BootstrapTable的一个重要组件，它允许用户在表格中添加、编辑和...
Bootstrap Table 删除和批量删除
08-29
$("#user").bootstrapTable('refresh', {url: '/user/getUserList.do'}); } }); } } ``` 在上面的代码中，我们定义了三个函数：`deleteUserList`、`deleteUserById` 和 `deleteUser`。`deleteUserList` 函数用于...
bootstrap集成table样式的总结
05-25
$('#myTable').bootstrapTable({ columns: [ { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'city', title: '城市' } ], data: [ /* 数据数组 */ ] }); }); ``` 总结，...
Bootstrap table表格简单操作
08-31
Bootstrap Table 是一个基于Bootstrap框架的前端插件，用于创建功能丰富的、响应式的表格。这个插件提供了许多方便的功能，如排序、筛选、分页等，同时也提供了多种样式选项，使得表格更加美观。以下是对Bootstrap ...
鼠标悬停在表格任意一个＜td＞上改变整行背景颜色并在第一个td显示象征性的某图片
leng0920的博客
08-18 5939
效果如图 正常效果 鼠标悬停效果 html代码 <div class="list-div" id="listDiv"> <table cellspacing='1' cellpadding='3'> <tr> <th>日志ID</th> <th>操作者</th> <th>操作日期</th> <th>ip地
Bootstrap常用
weixin_66939060的博客
05-01 433
1、栅格系统（Grid Systems） 即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版，后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏 2、栅格系统的行和列 Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列 栅格系统用
表格项 —【为表单添加颜色】
Zyl_CN的博客
05-23 1124
&lt;table&gt; &lt;tr class="active"&gt;...&lt;/tr&gt; &lt;tr class="success"&gt;...&lt;/tr&gt; &lt;tr class="warning"&gt;...&lt;/tr&gt; &lt;tr class=&
Bootstrap 学习笔记
barie4ever的专栏
10-11 857
Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： meta name="viewport" content="width=device-width, initial-scale=1.0"> width 属性控制
datagrid中读取的行鼠标经过的时候,设置鼠标悬停行的颜色
web开发自学
10-15 432
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.W...
bootstrap学习（四）表格
巡山小妖008
05-04 133
bootstrap学习（四）表格 基础样式： 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名</th> </tr> <tr...
表格-table 样式
weixin_30906701的博客
04-09 759
.table： 表格基本样式 .table-dark：表格显示为黑色 .thead-light： 表头显示颜色跟亮 .thead-dark：表头显示为黑色 .table-striped：表格以条纹形式显示 .table-bordered：给表格加上边框 .table-hover：把鼠标放到表格上时会有反应 .table-sm：表格以更小的形式显示 -----------------...
Bootstrap 学习之(三) ------ 表格和按钮
俊刚的博客
10-31 550
表格： Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 为表格添加基础样式。 表格标题行的容器元素（），用来标识表格列。 表格主体中的表格行的容器元素（）。 一组出现在单行上的表格
BootStrap学习9---表格
历程
05-19 200
.table 斑马线 . .table-striped 利用css选择器 :nth-child IE8不支持 带边框 .table-bordered 鼠标悬停 变色 .table-hover 紧缩表格 .table-condensed padding减半 状态类 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色
bootstrap table 表头样式
最新发布
09-01
在Bootstrap中，可以通过给表格添加相应的类来自定义表头样式。 对于表头，Bootstrap提供了.table类来应用基本的表格样式。可以将这个类添加到包含表头的<th>标签中。 此外，还可以进一步自定义表头样式。在表头所在的<th>标签中，可以使用Bootstrap提供的其他类来改变字体、颜色、背景等样式，如.text-primary、.bg-info等。 例如，要将表头字体设置为红色，可以将class属性设为"text-danger"；要将背景色改为蓝色，可以将class属性设为"bg-primary"。这些类可以根据具体需求进行组合使用，以达到预期的表头样式。 另外，Bootstrap还提供了多种样式的表格，如带边框的表格、斑马纹表格等。可以根据实际情况选择适合的样式，并根据需求自定义表头样式。 总之，通过在表头<th>标签中添加相应的类，可以在Bootstrap中轻松自定义表头样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值