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”

在瀏覽器變小的時候，不會影響表格內容，而是下方多一條滾動條

效果：