文章前提

Utilities 中 Float , Image replacement , position , screenreaders , sizing ,spacing , text , verticle alignment , visibility

| Float |

CH6 42

Float

  • 有使用 float 就必須做清除浮動動作 .clearfix
  • 將目標,換成不同 float-{ left | right | none }
    <div class="clearfix">
    <div class="float-目標">Float left on all viewport sizes</div>
    <div class="float-目標">Float right on all viewport sizes</div>
    <div class="float-目標">Don't float on all viewport sizes</div>
    </div>

Resopnsive

  • 有使用 float 就必須做清除浮動動作 .clearfix
  • 於 float 中加入不同斷點 ( sm , md , lg , xl ) ,可看範例拉動視窗,觀察變化

Image replacement 圖像替換 隱藏文字功能

CH6 43

……

  • 圖片中文字是不需要顯示,只是為了 SEO 做存在時,就會把此文字隱藏,也會用於 logo 中
  • 可把下方目標替換成 .text-hide ,使其正確顯示

    ★ 但官方顯示之後將會移除此方式。因螢幕閱讀器 ( Screenreaders ) 中已有類似功能,也有很多方式可取代此功能 ( 或插入圖片,使用 display:none; 文字)

<h1 class="目標" style="background-image: url('http://lorempixel.com/400/200/food'); width: 400px; height: 200px;">
  Bootstrap
</h1>

Position 位置

CH6 44

  • 課程練習下載 – components / navbar.html ( 練習中 Utilities / position.html 範例較不好解釋,所以到 navbar.html 看範例 )
  • Bootstrap 路徑 : Utilities / Position

…..

fixed top

  • .fixed-top

    fixed bottom

  • .fixed-bottom

sticky top

  • 範例
  • 使用 .sticky-top 的元素,會置於頂部 ( 產生捲軸的頁面才看到此效果 ) ,另外並非所有瀏覽器皆支援此 CSS ( 例如 IE )

Screenreaders 螢幕閱讀器

CH6 45
Bootstrap 路徑 : Utilities / Screenreaders

  • 透過 .sr-only 將一個元素對所有設備隱藏 除了螢幕閱讀器。將.sr-only 與 .sr-only-focusable 結合,以便在其被 focused 時再次顯示該元素(例如通過鍵盤使用)。也可以用作 Sass mixins。

Sizing

CH6 46
Bootstrap 路徑 : Utilities / Sizing

  • Sizing 提供不同的寬與高尺寸
  • Sizing 中寬度與高度提供了四種尺寸 ( 25% , 50% , 75% , 100% , auto )
  • .h-數值 , .w-數值
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
  • Sizing 中寬度與高度也可使用 .mw-100 ( .max-width: 100%; ) 和 .mh-100 ( .max-height: 100%; )
  • .max-width: 100%; 最大寬度不會超過 100%
  • .max-height: 100%; 最大高度不會超過 100%
  • 範例
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

Spacing

CH6 46
Bootstrap 路徑 : Utilities / Spacing

  • {property}{sides}-{size} 命名這些 Class
    • 屬性 property : m- ( margin ) 和 p- ( padding )
    • 邊緣 side : t , b , l , r , x , y , 空白
    • 尺寸 : 0 , 1 , 2 , 3 , 4 , 5 , auto
      • 1 : $spacer x 0.25
      • 2 : $spacer x 1.5
      • 3 : $spacer
      • 4 : $spacer x 1.5
      • 5 : $spacer x 3
      • 備註 $spacer 即 16 px
    • 水平置中 Horizontal centering
      • .mx-auto ( .max-width: auto ; )

Text

CH6 48
Bootstrap 路徑 : Utilities / Text

Text alignment : .text-justify

  • text-justify 對齊範例
  • 每段文字後方皆會對齊,但許多瀏覽器在中文文字是不支援 .text-justify 對齊功能

Bootstrap-有無使用-text-justify-差異

Text alignment : .text-方向

  • text-方向 ( left , center , right ) ,也可加入 viewpont ( sm , md , lg , xl)
<p class="text-left">Left aligned text on all viewport sizes.</p><p class="text-center">Center aligned text on all viewport sizes.</p><p class="text-right">Right aligned text on all viewport sizes.</p><p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p><p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p><p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p><p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Text wrapping and overflow

範例

  • .text-truncate
    • 會讓多溢出的字轉換為 … ,內容必須設定寬度此功能才會有效
    • Requires → display : inline-block ; 或 display: block ;
  • .text-wrap
  • .text-nowrap

Text transform

  • .text-lowercase
    • 所有字變小寫
  • .text-uppercase
    • 所有字變大寫
  • .text-capitalize
    • 每個字第一個字母變大寫

Font weight and italics

  • .font-weight-blod
  • .font-weight-bolder
  • .font-weight-normal
  • .font-italic

font-weight-and-italics-示意圖

Vertical alignment 垂直對齊

CH6 49
Bootstrap 路徑 : Utilities / Vertical align

  • 只會影響 inline , inline-block , block , table 元素
  • .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom , align-text-top
  • 分為 ❶ table cell 表格 與 ❷ inline elements 行內元素 ( 把圖片註解拿掉試試 ) 範例
    • .align-baseline 對齊文字基準線
    • .align-bottom 將元素底部與整體的底部對齊 , align-text-bottom 與父元素字體的底部對齊。可看此篇文章 MDN Web docs: vertical align

Bootstrap-課堂vertical-alignment問與答

Visibility 可視性

CH6 50
Bootstrap 路徑 : Utilities / Visibility

visibility 與 display: none; 差異

範例

  • .invisible 會使物件消失,但是空間會保留
  • display:none; 物件和空間都會消失

資料來源

最後修改日期: 8 3 月, 2020

作者