bootstrap学习笔记细化(表格) 

主要属性：
　　全屏宽度带水平线的表格　　.table
　　带边框的表格　　　　　　　.table-bordered
　　条纹状表格　　　　　　　　.table-striped
　　悬停变色表格　　　　　　　.table-hover
　　紧凑风格表格　　　　　　　.table-condensed
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        
        <table class="table" table-striped table-hover>
            
            <thead>
                <tr class="danger">
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                    <th>标题四</th>
                    <th>标题五</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="success">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="active">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    </body>
</html>
源码

效果图片：

 

 
posted @ 2017-06-15 17:08  美琳  阅读(181)  评论(0)    收藏  举报