Boostrap表格练习

时间：2016-10-08 16:01:04 阅读：123 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head>
<style>
body{
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif;
}
table thead{
    background-color: #555;
    border-top: 1px solid #555;
}
table thead tr{
    color: #fff;
}
.table > thead > tr > th{
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}
</style>
<body>
<div class="container">
    <br><br>
    <table class="table table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>类</th>
                <th>描述</th>
                <th>示例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>.table</td>
                <td>为任意&lt;table&gt;添加基本样式 (只有横向分隔线)</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-bordered</td>
                <td>为所有表格的单元格添加边框</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-hover</td>
                <td>在 &lt;tbody&gt;内的任一行启用鼠标悬停状态</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-condensed</td>
                <td>让表格更加紧凑</td>
                <td>null</td>
            </tr>
        </tbody>
    </table>
    <br><br>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>类</th>
                <th>描述</th>
                <th>示例</th>
            </tr>
        </thead>
        <tr class="active">
            <td>.active</td>
            <td>将悬停的颜色应用在行或者单元格上</td>
            <td>null</td>
        </tr>
        <tr class="success">
            <td>.success</td>
            <td>表示成功的操作</td>
            <td>null</td>
        </tr>
        <tr class="info">
            <td>.info</td>
            <td>表示信息变化的操作</td>
            <td>null</td>
        </tr>
        <tr class="warning">
            <td>.warning</td>
            <td>表示一个警告的操作</td>
            <td>null</td>
        </tr>
        <tr class="danger">
            <td>.danger</td>
            <td>表示一个危险的操作</td>
            <td>null</td>
        </tr>
    </table>    
</div>
</body>
</html>

Boostrap表格练习

标签：

原文地址：http://www.cnblogs.com/lcx90/p/5938760.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行