Bootstrap学习笔记 03

来源：互联网发布：京东商城java笔试题编辑：程序博客网时间：2024/05/22 12:13

Basic Table

<table class="table">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

Striped Rows

<table class="table table-striped">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

Bordered Table

<table class="table table-bordered">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

Hover Rows

<table class="table table-hover">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

Condensed Table

<table class="table table-condensed">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

Contextual Classes

<table class="table">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr class="active"><td>active</td><td>xxxx@126.com</td><td>China</td></tr>        <tr class="success"><td>success</td><td>xxxx@126.com</td><td>China</td></tr>        <tr class="info"><td>info</td><td>xxxx@126.com</td><td>China</td></tr>        <tr class="warning"><td>warning</td><td>xxxx@126.com</td><td>China</td></tr>        <tr class="danger"><td>danger</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

多个样式

多个样式可以结合：

<table class="table table-condensed table-bordered table-striped">    <thead>        <tr><th>Name</th><th>Email</th><th>Address</th></tr>    </thead>    <tbody>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>    </tbody></table>

这里写图片描述

完整代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <meta name="viewport" content="width=device-width, initial-scale=1"/>        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>        <title>Tables</title>    </head>    <body>        <div class="container">            <h1>Basic Table</h1>            <table class="table">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Striped Rows</h1>            <table class="table table-striped">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Bordered Table</h1>            <table class="table table-bordered">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Hover Rows</h1>            <table class="table table-hover">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Condensed Table</h1>            <table class="table table-condensed">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Contextual Classes</h1>            <table class="table">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr class="active"><td>active</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr class="success"><td>success</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr class="info"><td>info</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr class="warning"><td>warning</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr class="danger"><td>danger</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>            <h1>Composed Classes</h1>            <table class="table table-condensed table-bordered table-striped">                <thead>                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>                </thead>                <tbody>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>                </tbody>            </table>        </div>    </body></html>

这里写图片描述

阅读全文

1 0