zoukankan      html  css  js  c++  java
  • 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>
    源码

    效果图片:

     
  • 相关阅读:
    ☀【布局】
    _#【CSS3】
    _#minheight
    【其它】引入css
    【css3】url
    鼠标闲置一段时间后自动隐藏
    图解SQLServer2005获取WebService数据
    Oracle字符串字段内的字符排序
    一个c#读取扫雷内存的demo
    sqlserver使用bcp分解字符串
  • 原文地址:https://www.cnblogs.com/linjiaxiaomeiainia/p/7018874.html
Copyright © 2011-2022 走看看