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

    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”
    在浏览器变小的时候,不会影响表格内容,而是下方多一条滚动条
    效果:
  • 相关阅读:
    Spring MVC:框架及其组件介绍
    Goods:生成订单
    Goods:我的订单查询分页
    LeetCode:Kth Largest Element in an Array(need update)
    LeetCode:Swap Nodes in Pairs
    Goods:购物车条目加减数量实现
    LeetCode:Sum Root to Leaf Numbers
    Goods:购物车模块之全选按钮与条目之复选按钮的click事件
    Goods:查询某个用户的购物车条目以及添加购物车条目
    洛谷2387 NOI2014魔法森林(LCT维护最小生成树)
  • 原文地址:https://www.cnblogs.com/isme-zjh/p/11758516.html
Copyright © 2011-2022 走看看