bootstrap學習筆記細化(表格)

時間  2019-11-17
標籤 bootstrap 學習 筆記 細化 表格 欄目 Bootstarp 简体版
原文   原文鏈接 
主要屬性：
　　全屏寬度帶水平線的表格　　.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>
源碼

效果圖片：javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程