自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

互聯(lián)網(wǎng)知識(shí)

精準(zhǔn)傳達(dá) ? 價(jià)值共享

洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營(yíng)銷(xiāo)規(guī)律

bootstrap響應(yīng)式設(shè)計(jì)visible-sm、hidden-xs等的使用

作者:狐靈科技 | 2019-07-30 22:32 |點(diǎn)擊:

啟用響應(yīng)式特性

通過(guò)在文檔中的 <head> 標(biāo)簽里添加合適的meta標(biāo)簽并引入一個(gè)額外的樣式表即可啟用響應(yīng)式CSS。如果你已經(jīng)在定制頁(yè)面編譯好一個(gè)Bootstrap, 那么只需添加一個(gè)meta標(biāo)簽。


  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意! Bootstrap在默認(rèn)情況下是沒(méi)有引入響應(yīng)式特性的,因?yàn)椴皇侨魏吻闆r都需要使用到。我們并不是鼓勵(lì)開(kāi)發(fā)者移除此功能, 而是在需要使用的時(shí)候才啟用它。

關(guān)于響應(yīng)式Bootstrap

Responsive devices

Media queries允許在一些條件基礎(chǔ)上自定義CSS 例如:—ratios、widths、display type, etc— 但通常都是圍繞著 min-width 和 max-width 這兩者。

  • 修改柵格系統(tǒng)中列的寬度
  • 需要的時(shí)候, 用堆疊元素代替浮動(dòng)
  • 調(diào)整標(biāo)題和文本的大小以便適合各種設(shè)備

謹(jǐn)慎的使用media queries,先從你的手機(jī)用戶(hù)開(kāi)始吧。對(duì)于大型的項(xiàng)目, 應(yīng)該考慮使用專(zhuān)門(mén)的代碼庫(kù), 而不是構(gòu)筑在media queries之上。

被支持的設(shè)備

Bootstrap 所支持的幾個(gè)media queries都放在了一個(gè)文件中, 可以讓你的項(xiàng)目更靈活的去適應(yīng)不同設(shè)備和屏幕分辨率。包括:

類(lèi)型 布局寬度 列寬 間隙寬度
大屏幕 大于等于1200px 70px 30px
默認(rèn) 大于等于980px 60px 20px
平板 大于等于768px 42px 20px
手機(jī)到平板 小于等于767px 流式列,無(wú)固定寬度
手機(jī) 小于等于480px 流式列,無(wú)固定寬度

  1. /* 大屏幕 */
  2. @media (min-width: 1200px) { ... }
  3.  
  4. /* 平板電腦和小屏電腦之間的分辨率 */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7. /* 橫向放置的手機(jī)和豎向放置的平板之間的分辨率 */
  8. @media (max-width: 767px) { ... }
  9.  
  10. /* 橫向放置的手機(jī)及分辨率更小的設(shè)備 */
  11. @media (max-width: 480px) { ... }

響應(yīng)式布局輔助class

為了更快的針對(duì)移動(dòng)設(shè)備做開(kāi)發(fā), 下面列出的輔助class用于針對(duì)不同設(shè)備顯示和隱藏內(nèi)容。下表是可用的class列表, 以及它們?cè)诟鱾€(gè)media query布局下的效果。這些class可以在 responsive.less 文件中找到。

Class 手機(jī)767px 及以下 平板979px 到 768px 電腦默認(rèn)
.visible-phone 顯示
.visible-tablet 顯示
.visible-desktop 顯示
.hidden-phone 顯示 顯示
.hidden-tablet 顯示 顯示
.hidden-desktop 顯示 顯示

何時(shí)使用

在有限的情況下使用, 避免創(chuàng)建同一個(gè)站點(diǎn)的不同版本。當(dāng)這些class能對(duì)每種設(shè)備的展示做有益的補(bǔ)充的時(shí)候才使用。響應(yīng)式工具不能用于table元素,而且本就不支持。

響應(yīng)式工具測(cè)試案例

調(diào)整瀏覽器的寬度或者在不同的設(shè)備上加載該頁(yè)面用以測(cè)試上述的class。

在...上顯示

綠色選中標(biāo)記用以指示這些class在你當(dāng)前的可視窗口是可見(jiàn)的。

  • 手機(jī)
  • 平板
  • 電腦? 電腦

在...上隱藏

這里的綠色選中標(biāo)記用以指示這些class在你當(dāng)前的可視窗口是隱藏的。

  • 手機(jī)? 手機(jī)
  • 平板? 平板
  • 電腦
如沒(méi)特殊注明,文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請(qǐng)注明?? "bootstrap響應(yīng)式設(shè)計(jì)visible-sm、hidden-xs等的使用
多一份免費(fèi)策劃方案,總有益處。

請(qǐng)直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢(xún)

網(wǎng)站設(shè)計(jì) 品牌營(yíng)銷(xiāo)

多一份參考,總有益處

聯(lián)系狐靈科技,免費(fèi)獲得專(zhuān)屬《策劃方案》及報(bào)價(jià)

咨詢(xún)相關(guān)問(wèn)題或預(yù)約面談,可以通過(guò)以下方式與我們聯(lián)系

業(yè)務(wù)熱線(xiàn):15082661954 / 大客戶(hù)專(zhuān)線(xiàn):15523356218