快捷導(dǎo)航

Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解

更新時(shí)間：2017年03月29日 14:00:47 作者：Carl_Hugo

Bootstrap 提供了一些輔助類，以便更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(jié)合大型、小型和中型設(shè)備，實(shí)現(xiàn)內(nèi)容對(duì)設(shè)備的顯示和隱藏。下面通過本文給大家分享Bootstrap 響應(yīng)式實(shí)用工具，一起看看吧

Bootstrap 提供了一些輔助類，以便更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(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è)備上可見</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è)備上可見</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è)備上可見</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è)備上可見</span>
    </div>
  </div>
</div>

以上所述是小編給大家介紹的Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(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)格式
在許多開發(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)證碼、獲取用戶信息
本文通過實(shí)例代碼給大家介紹了微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的相關(guān)知識(shí)，本文通過實(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ī)硪黄狫S動(dòng)態(tài)給對(duì)象添加事件的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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è)的代碼
Js刷新框架頁(yè)方法，有時(shí)候需要控制下框架里面的頁(yè)面內(nèi)容的刷新，下面的方法整理的比較詳細(xì)了，需要的朋友可以參考下。
2010-04-04