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>      

效果:css

 

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>

 效果:bootstrap

 

 
3.響應式效果
把內容放在一個class爲table-responsive的div中
<table>的class改成「table table-condensed」
在瀏覽器變小的時候,不會影響表格內容,而是下方多一條滾動條
效果:

 

相關文章
相關標籤/搜索