前言

原創文章，歡迎轉載，請保留出處。
有任何錯誤、疑問或者建議，歡迎指出。
我的郵箱:[email protected]

在上一篇文章中（http://blog.csdn.net/maxwell_nc/article/details/45791745）中主要講到Bootstrap的柵格佈局系統，雖然之前說要更新如何寫導航欄，但是想了下還是先介紹下如何做CSS的媒體查詢和響應式表格，這樣才能為以後的編碼打下基礎。

CSS的媒體查詢

媒體查詢 是評估 True 或 False 的一種表達。如果為 True，則繼續使用樣式表。如果為 False，則不能使用樣式表。這種簡單邏輯通過表示式變得更加強大，使您能夠更靈活地對特定的設計場景使用自定義的顯示規則。

在bootstrap中，定義了下面幾個關鍵的分界點閾值：

/* 超小螢幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的程式碼，因為這在 Bootstrap 中是預設的（Bootstrap 是移動裝置優先） */

/* 小螢幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等螢幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大螢幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) 
 
{ ... }

分別對應柵格佈局系統裡面的

超小螢幕 .col-xs-* 小螢幕 .col-sm-*
中等螢幕 .col-md-* 大螢幕 .col-lg-*

實際開發中，我們自己寫的CSS檔案中可以這樣定義

/* 這裡是當瀏覽器寬度最大不超過767px時應用的效果 */
@media screen and (max-width: 767px) {
    .../*相當於在bootstrap定義的超小螢幕*/
}

/* 這裡是當瀏覽器寬度最小不小於768px時應用的效果  */
@media ( min-width : 768px) {   
    .../*相當於在bootstrap定義的除超小螢幕在外的螢幕*/
 

}

響應式的表格

首先什麼是響應式的表格，簡單來說，就是在不同寬度的瀏覽器下面顯示的表格可以讓人接受，不會“擠”在一起，看下兩種情況的截圖就知道了：

• bootstrap3提供的預設的響應式表格：
  
• 非響應式表格：
  

由於這裡提供的表格資料還比較少，不能體會非響應式的表格帶來的不便，尤其是資料列數和行數都非常多的情況下，表格會變得無法閱讀，而響應式的表格就不會影響閱讀。

響應式表格並非只有這種解決方案（Bootstrap3中的響應式表格），還有可以在列數比較少的情況下，把表頭變成左邊的第一列並且凍結，其他行轉行為列來瀏覽；又或者在允許的情況下減少列數來顯示資料…這個可以自己利用CSS媒體查詢來實現，我這裡不做具體介紹，我們主要介紹一下如何利用Bootstrap3快速實現響應式表格。

在Bootstrap3中有一個非常簡單的方式實現響應式表格，那就是在table標籤外面加上一個div標籤，程式碼如下：

<div class="table-responsive">
    <table>
        ...
    </table>
</div>

即可實現上面展示的響應式表格。

自定表格的風格

這裡來個小插曲，示範如何修改table的風格，
由於我上篇提供的原始碼沒有這個效果，這次是我新增的小細節，而且背景色我稍微調了下，所以原來bootstrap提供的 table-striped類的顏色（斑馬線顏色）和背景不協調，這裡也稍微調了下，效果如下：

我這裡的表格使用Bootstrap全域性的CSS表格類 table-striped 和table-hover，前者是表格的斑馬線（間隔顏色），後者是滑鼠劃過（停留在上面）時的特效。

/* 表格的間隔顏色 */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f1f1f1;
}

/* 當前劃過的表格的行的顏色 */
.table-striped>tbody>tr:hover {
    background-color: #e80027;
    color: #ffffff;
}

要注意CSS選擇器的使用，很多人寫table表格不些tbody標籤，瀏覽器預設加上了tbody後就使得CSS樣式不生效，所以建議寫表格還是要加上thead和tbody標籤。

後記

為了防止有些人不知道怎麼用，我還不厭其煩的講解下，原始碼部分不帶jquery和bootstrap的js和css檔案，所以要自己下，另外要吧程式打包成web應用，使用tomcat或者nginx之類的伺服器啟動伺服器後在訪問。

除了博文所寫之外，我還更新瞭如何製作BOX的原始碼：

我這裡寫的Bootstrap技術都是實際開發中非常常用的，就比如馬上要講解的導航欄基本大部分的管理系統都用到，而這次提供原始碼中的“Box”（非bootstrap提供的pannel），你可以看到github上面各種的bootstrap模板都有類似的實現。

不過我這裡的設計的Bootstrap網站都是前端的，包括各種資料都是寫死的，這裡我只是為了演示Bootstrap而這樣做，或許以後會講解如何利用Bootstrap結合後端做一個完整的專案。