Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解
Bootstrap 提供了一些輔助類，以便更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備友好的開(kāi)發(fā)。這些可以通過(guò)媒體查詢結(jié)合大型、小型和中型設(shè)備，實(shí)現(xiàn)內(nèi)容對(duì)設(shè)備的顯示和隱藏。
需要謹(jǐn)慎使用這些工具，避免在同一個(gè)站點(diǎn)創(chuàng)建完全不同的版本。響應(yīng)式實(shí)用工具目前只適用于塊和表切換。
實(shí)例
下面的實(shí)例演示了上面所列舉的幫助器類的用法。調(diào)整瀏覽器的窗口大小，或者在不同的設(shè)備上加載實(shí)例，測(cè)試響應(yīng)式實(shí)用工具類。
<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">✔ 在特別小型設(shè)備上可見(jiàn)</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">✔ 在小型設(shè)備上可見(jiàn)</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">✔ 在中型設(shè)備上可見(jiàn)</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">✔ 在大型設(shè)備上可見(jiàn)</span>
</div>
</div>
</div>
以上所述是小編給大家介紹的Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
- 談一談bootstrap響應(yīng)式布局
- 20分鐘成功編寫(xiě)bootstrap響應(yīng)式頁(yè)面 就這么簡(jiǎn)單
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
相關(guān)文章
javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
JS實(shí)現(xiàn)控制表格只顯示行邊框或者只顯示列邊框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格只顯示行邊框或者只顯示列邊框的方法,涉及javascript使用表格對(duì)象的rules屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)將毫秒數(shù)轉(zhuǎn)換為易讀時(shí)長(zhǎng)格式
在許多開(kāi)發(fā)場(chǎng)景中,我們通常需要將后端接口返回的毫秒數(shù)轉(zhuǎn)換成更易讀的時(shí)長(zhǎng)格式,本文將封裝一個(gè)簡(jiǎn)潔的 JavaScript 函數(shù)實(shí)現(xiàn)這一功能,需要的可以了解下2025-02-02
微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05
JS從非數(shù)組對(duì)象轉(zhuǎn)數(shù)組的方法小結(jié)
這篇文章主要給大家介紹了關(guān)于JS從非數(shù)組對(duì)象轉(zhuǎn)數(shù)組的一些方法，分別是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的詳細(xì)實(shí)現(xiàn)方法，需要的朋友可以參考下。2018-03-03
js實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS動(dòng)態(tài)給對(duì)象添加事件的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JS動(dòng)態(tài)給對(duì)象添加事件的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JavaScript中window.showModalDialog()用法詳解
這篇文章主要介紹了JavaScript中window.showModalDialog()用法詳解,需要的朋友可以參考下2014-12-12
js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn)
這篇文章介紹了js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-07-07
Js刷新框架頁(yè)方法，有時(shí)候需要控制下框架里面的頁(yè)面內(nèi)容的刷新，下面的方法整理的比較詳細(xì)了，需要的朋友可以參考下。2010-04-04