【06】Bootstrap — 表格

来源：互联网发布：java网上商城系统源码编辑：程序博客网时间：2024/05/29 18:10

基础实例

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>基础实例</h2>        <table class="table">            <caption>Optional table caption.</caption>            <thead>                <tr>                    <th>#</th>                    <th>First Name</th>                    <th>Last Name</th>                    <th>Username</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>Mark</td>                    <td>Otto</td>                    <td>@mdo</td>                </tr>                <tr>                    <td>2</td>                    <td>Jacob</td>                    <td>Thornton</td>                    <td>@fat</td>                </tr>                <tr>                    <td>3</td>                    <td>Larry</td>                    <td>the Bird</td>                    <td>@twitter</td>                </tr>            </tbody>        </table>    </body></html>

基础表格

带条纹表格

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>带条纹表格：</h2>        <table class="table table-striped">            <thead>                <tr>                    <th>#</th>                    <th>First Name</th>                    <th>Last Name</th>                    <th>Username</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>Mark</td>                    <td>Otto</td>                    <td>@mdo</td>                </tr>                <tr>                    <td>2</td>                    <td>Jacob</td>                    <td>Thornton</td>                    <td>@fat</td>                </tr>                <tr>                    <td>3</td>                    <td>Larry</td>                    <td>the Bird</td>                    <td>@twitter</td>                </tr>            </tbody>        </table>    </body></html>

bootstrap带条纹表格

带边框的表格

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>带边框的表格</h2>        <table class="table table-bordered">            <thead>                <tr>                    <th>#</th>                    <th>First Name</th>                    <th>Last Name</th>                    <th>Username</th>                </tr>            </thead>            <tbody>                <tr>                    <td rowspan="2">1</td>                    <td>Mark</td>                    <td>Otto</td>                    <td>@mdo</td>                </tr>                <tr>                    <td>Mark</td>                    <td>Otto</td>                    <td>@TwBootstrap</td>                </tr>                <tr>                    <td>2</td>                    <td>Jacob</td>                    <td>Thornton</td>                    <td>@fat</td>                </tr>                <tr>                    <td>3</td>                    <td colspan="2">Larry the Bird</td>                    <td>@twitter</td>                </tr>            </tbody>        </table>    </body></html>

bootstrap带边框的表格

鼠标悬停

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>鼠标悬停</h2>        <table class="table table-hover">            <thead>                <tr>                    <th>#</th>                    <th>First Name</th>                    <th>Last Name</th>                    <th>Username</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>Mark</td>                    <td>Otto</td>                    <td>@mdo</td>                </tr>                <tr>                    <td>2</td>                    <td>Jacob</td>                    <td>Thornton</td>                    <td>@fat</td>                </tr>                <tr>                    <td>3</td>                    <td colspan="2">Larry the Bird</td>                    <td>@twitter</td>                </tr>            </tbody>        </table>    </body></html>

bootstrap表格鼠标悬停

紧凑表格

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>紧凑表格</h2>        <table class="table table-condensed">            <thead>                <tr>                    <th>#</th>                    <th>First Name</th>                    <th>Last Name</th>                    <th>Username</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>Mark</td>                    <td>Otto</td>                    <td>@mdo</td>                </tr>                <tr>                    <td>2</td>                    <td>Jacob</td>                    <td>Thornton</td>                    <td>@fat</td>                </tr>                <tr>                    <td>3</td>                    <td colspan="2">Larry the Bird</td>                    <td>@twitter</td>                </tr>            </tbody>        </table>    </body></html>

紧凑表格

状态类

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>状态类</h2>        <table class="table">            <thead>                <tr>                    <th>#</th>                    <th>Column heading</th>                    <th>Column heading</th>                    <th>Column heading</th>                </tr>            </thead>            <tbody>                <tr class="active">                    <td>1</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr>                    <td>2</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr class="success">                    <td>3</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr>                    <td>4</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr class="info">                    <td>5</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr>                    <td>6</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr class="warning">                    <td>7</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr>                    <td>8</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>                <tr class="danger">                    <td>9</td>                    <td>Column content</td>                    <td>Column content</td>                    <td>Column content</td>                </tr>            </tbody>        </table>    </body></html>

bootstrap各颜色状态表格

响应式表格

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <h2>响应式表格: 其会在小屏幕设备上（小于768px）水平滚动</h2>        <div class="table-responsive">            <table class="table">                <thead>                    <tr>                        <th>#</th>                        <th>Table heading</th>                        <th>Table heading</th>                        <th>Table heading</th>                        <th>Table heading</th>                        <th>Table heading</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>1</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>2</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>3</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>4</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>5</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>6</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>7</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>8</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                    <tr>                        <td>9</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                        <td>Table cell</td>                    </tr>                </tbody>            </table>        </div>    </body></html>

bootstrap响应式表格

阅读全文

0 0