Bootstrap 響應式實用工具實例詳解
Bootstrap 提供了一些輔助類,以便更快地實現(xiàn)對移動設備友好的開發(fā)。這些可以通過媒體查詢結合大型、小型和中型設備,實現(xiàn)內容對設備的顯示和隱藏。
需要謹慎使用這些工具,避免在同一個站點創(chuàng)建完全不同的版本。響應式實用工具目前只適用于塊和表切換。
實例
下面的實例演示了上面所列舉的幫助器類的用法。調整瀏覽器的窗口大小,或者在不同的設備上加載實例,測試響應式實用工具類。
<div class="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">特別小型</span> <span class="visible-xs">✔ 在特別小型設備上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">小型</span> <span class="visible-sm">✔ 在小型設備上可見</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">中型</span> <span class="visible-md">✔ 在中型設備上可見</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">大型</span> <span class="visible-lg">✔ 在大型設備上可見</span> </div> </div> </div>
以上所述是小編給大家介紹的Bootstrap 響應式實用工具實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復雜的任務,因為Word文檔的格式(如.doc或.docx)與Web技術棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08JS 控制小數(shù)位數(shù)的實現(xiàn)代碼
上網(wǎng)查一查的確存在這種Bug,除了位數(shù)上控制之外也沒什么也好的方法(希望高手能提出其它思路)。2011-08-08JS判斷是否為數(shù)字,是否為整數(shù),是否為浮點數(shù)的代碼
2010-04-04詳解JavaScript中的數(shù)組合并方法和對象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對象合并方法,通過代碼的形式給大家介紹的非常詳細,需要的朋友可以參考下2018-05-05javascript 開發(fā)之百度地圖使用到的js函數(shù)整理
這篇文章主要介紹了javascript 開發(fā)之百度地圖使用到的js函數(shù)整理的相關資料,需要的朋友可以參考下2017-05-05