您的位置: 首页  >  IT文章  >  bootstrap学习笔记细化(表格)

bootstrap学习笔记细化(表格)

分类: IT文章 • 2022-04-12 13:52:17

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>
源码

效果图片：bootstrap学习笔记细化(表格)

 

相关推荐