zoukankan      html  css  js  c++  java
  • Bootstrap入门(四)表格

    Bootstrap入门(四)表格
    <table>标签
    首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class="table"补足了padding和水平方向上的分割线)
    <table class="table">
      ...
    </table>

     

    1.几个不同样式的表格(修改<table>标签中的class)
    1.1“table”普通
                
               <table class="table">
                    <thead>
                        <tr>
                            <th>biaoti</th>
                            <th>biaoti</th>
                            <th>biaoti</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>danyuange</th>
                            <th>danyuange</th>
                            <th>danyuange</th>
                        </tr>
                        <tr>
                            <th>danyuange</th>
                            <th>danyuange</th>
                            <th>danyuange</th>
                        </tr>
                        <tr>
                            <th>danyuange</th>
                            <th>danyuange</th>
                            <th>danyuange</th>
                        </tr>
                    </tbody>
                </table>      

    效果:

     

    1.2<table>标签中的class 改为“ table table-striped ”两行之前有不同的颜色(“斑马线”)
    效果:

     

    1.3<table>标签中的class 改为 “ table table-striped table-bordered ”多了水平方向上的分割线和边框
    效果:

     

    1.4<table>标签中的class 改为 “ table table-striped table-bordered table-hover ”鼠标经过、悬停时有效果
     
    2.状态类(在<tr>标签中修改class)
    跟之前的类似,有active,info,success,warning,danger等来为单元格添加标识 
                   
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr class="active">
                                <th>biaoti</th>
                                <th>biaoti</th>
                                <th>biaoti</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="success">
                                <th>danyuange</th>
                                <th>danyuange</th>
                                <th>danyuange</th>
                            </tr>
                            <tr class="info">
                                <th>danyuange</th>
                                <th>danyuange</th>
                                <th>danyuange</th>
                            </tr>
                            <tr class="warning">
                                <th>danyuange</th>
                                <th>danyuange</th>
                                <th>danyuange</th>
                            </tr>
                            <tr class="danger">
                                <th>danyuange</th>
                                <th>danyuange</th>
                                <th>danyuange</th>
                            </tr>
                        </tbody>
                    </table>

     效果:

     

     
    3.响应式效果
    把内容放在一个class为table-responsive的div中
    <table>的class改为“table table-condensed”
    在浏览器变小的时候,不会影响表格内容,而是下方多一条滚动条
    效果:

     

  • 相关阅读:
    HDU 3336 Count the string (KMP next数组运用——统计前缀出现次数)
    HDU 2594 Simpsons’ Hidden Talents (KMP——前缀后缀最长公共串)
    2015 Multi-University Training Contest 7 1011(DP)
    2015 Multi-University Training Contest 7 1005
    2015 Multi-University Training Contest 7 1007(DP)
    poj 2342 Anniversary party (树形dp)
    POJ 1611 The Suspects (并查集)
    poj 2236 Wireless Network(并查集)
    hdu 3591 The trouble of Xiaoqian(多重背包)
    hdu 2079 选课时间(母函数)
  • 原文地址:https://www.cnblogs.com/hnnydxgjj/p/5851206.html
Copyright © 2011-2022 走看看