您的位置：首页 > Web前端 > BootStrap

bootstrap3的.tabel .danger

2013-11-25 18:32 330 查看
      2.3版本的                       3.0版本

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

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

[html]
view plaincopy





<!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>  

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航