Bootstrap table

Bootstrap table:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body>
    <p class="btn-primary">.table, .table-striped, .table-hover, .table-condensed, .table-bordered, .table-responsive </p>
    <table class="table">
        <tbody>
            <thead>
                <th>this is just table class</th>
            </thead>
            <tr>
                <td>this is row1, col1</td>
            </tr>
            <tr>
                <td>row2, col1</td>
            </tr>
            <tr>
                <td>row3, col1</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-striped">
        <tbody>
            <thead>
                <th>this is table and table-striped class</th>
            </thead>
            <tr>
                <td>this is row1, col1</td>
            </tr>
            <tr>
                <td>row2, col1</td>
            </tr>
            <tr>
                <td>row3, col1</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered">
        <tbody>
            <thead>
                <th>this is table table-bordered class</th>
            </thead>
            <tr>
                <td>this is row1, col1</td>
            </tr>
            <tr>
                <td>row2, col1</td>
            </tr>
            <tr>
                <td>row3, col1</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-condensed">
        <tbody>
            <thead>
                <th>this is table table-condensed class</th>
            </thead>
            <tr>
                <td>this is row1, col1</td>
            </tr>
            <tr>
                <td>row2, col1</td>
            </tr>
            <tr>
                <td>row3, col1</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-hover">
        <tbody>
            <thead>
                <th>this is table table-hover class</th>
            </thead>
            <tr>
                <td>this is row1, col1</td>
            </tr>
            <tr>
                <td>row2, col1</td>
            </tr>
            <tr>
                <td>row3, col1</td>
            </tr>
        </tbody>
    </table>
    <div class="table-responsive">

        <table class="table">
            <tbody>
                <thead>
                    <th>this is table-responsive class</th>
                </thead>
                <tr>
                    <td>this is row1, col1, and this is a long long long long long long long long long long row</td>
                </tr>
                <tr>
                    <td>row2, col1</td>
                </tr>
                <tr>
                    <td>row3, col1</td>
                </tr>
            </tbody>
        </table>
    </div>


    <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>

</html>

 

没有更多推荐了,返回首页