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”
    在浏览器变小的时候,不会影响表格内容,而是下方多一条滚动条
    效果:

     

  • 相关阅读:
    map
    01背包和完全背包 POJ
    并查集 计算节点数量
    set
    map,vector,queue 图 综合运用
    并查集 hdu-1325 Is It A Tree?
    js中的ajax
    java算法
    MySql在Window上的安装
    微信开发账号要求
  • 原文地址:https://www.cnblogs.com/hnnydxgjj/p/5851206.html
Copyright © 2011-2022 走看看