先看效果圖
大螢幕中等
小
特小
上**
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
大型裝置可見
中型裝置可見
小型裝置可見
特小型裝置可見
1.不管在什麼螢幕上，柵格柵格系統都會自動的每行row分為12列col-xs-* col-sm-* col-md-* col-lg-*後面跟的引數是當前的螢幕中每個div所佔列數，比如：col-xs-6就是在超小螢幕中佔6列，也就是螢幕的一半（12/6列=2個div），col-md-3是在中等螢幕中佔三列也就是12/3列=4個div。
如果理解不了，就這樣記xs，sm，md，lg指的是螢幕大小，後面的數字一律用12除就是你的頁面要顯示的列數
2.class="visible-md"
visible-xs 額外的小裝置可見（小於768px）可見
visible-sm 小型裝置（768px起）可見
visible-md 中型裝置（768px-991px）可見
visible-lg 大型裝置可見（992px及以上）可見
hidden-xs 額外的小裝置可見（小於768px）隱藏
hidden-sm 小型裝置（768px起）隱藏
hidden-md 中型裝置（768px-991px）隱藏
hidden-lg 大型裝置可見（992px及以上）隱藏
響應式實現
一 css實現響應式 css響應式的實現主要依賴於css 查詢 查詢包含乙個可選的 型別和零或多個表示式來限制使用 特性的樣式表範圍,例如 width，height，color。css3中的media queries讓內容的呈現可以只針對特定範圍的輸出裝置而不必去改變內容本身。即通過 查詢判斷螢幕寬...
實現響應式布局
響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的 響應式站點列表 譯者注 可以好好看看示例中的 在不同解析度下的展現方式 對新手來說，響應式設計 可能有一點複雜，但是事實上比你想象的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到...
響應式實現初探
前段時間，因為專案需要，略微接觸了一下響應式設計。在此記錄一些經驗之談。我所理解的響應式設計，是 能響應當前螢幕的寬度，呈現相應合適的樣式和內容。比如在手機端，手機端螢幕較小，而且使用者可能在3g網路下訪問。在手機端下顯示的時候，呈現的內容較之桌面要少一些，所消耗的流量也要少些。通過css的 查詢，...