Boostrap表格练习

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

 

posted @ 2016-10-08 14:55  猴--进化失败的程序猿  阅读(135)  评论(0编辑  收藏  举报