文章提要

Utilities 中 Media object , Borders , Clearfix , Close icon , Color , Display 統整

| 媒體物件 Media object |

CH6 34

Media object 基本架構

  • 圖片本與 .media-body 緊靠,可於 img 或 .media-body 加上 margin,就會得到下方示意圖空間
<div class="media">
    <img src="" alt="">
    <div class="media-body">
        <h5 class="mt-0">TITLE<h5>
        <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        </p>
    </div>
</div>

Bootstrap-Media-object示意

巢狀排列 Nesting

  • 一般會用於問與答
  • 於 media 內的 .media-body 再放入新的 media 元素即可
<div class="media">
    <img src="" alt="">
    <div class="media-body">
        <h5 class="mt-0">TITLE<h5>
        <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        </p>
        <div class="media">
            <img src="" alt="">
            <div class="media-body">
                <h5 class="mt-0">TITLE<h5>
                <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                </p>
            </div>
        </div>
    </div>
</div>

對齊 Alignment

| 將目標,替換成 center , end , start 改變其排版 line 100 | 範例

  • .align-self-center , .align-self-end , .align-self-start
  • align-self-{ center|end|start }, 放置 img class 中,即可讓圖片置中 , 置上 , 置下
<div class="media">
    <img class="d-flex align-self-目標 mr-3" src="http://lorempixel.com/output/people-q-c-64-64-5.jpg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Center-aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

排序 Order

  • 前面幾個範例 img 皆在 .media.media-body 前,這邊可放置 .media-body 外後方,即可更改內文與圖片的排序
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

清單 Media list

  • 範例
  • <ul><ol> 使用 .list-unstyled 清除瀏覽器默認的樣式設定,li 設定 .media Class 依照上方 media object 基本架構寫下去。

| Border 邊框 |

CH6 35

Border

  • Additive 添加
    • 可分別加入 border , border-top , border-right , border-left , border-bottom 來顯示各個方向的邊框
  • Subtractive 減法
    • 可分別加入 border-0 , border-top-0 , border-right-0 , border-left-0 , border-bottom-0 來使某個方向的邊框線消失
  • Border color
    • Bootstrap 中客製的各種顏色,這些顏色名稱後續會一直用到要記得。
    • primary 綠色 , secondary 深灰, success 綠色 , danger 紅色 , warning 黃色 , info 藍綠色 , light 淺灰 , dark 黑色 , white 白色

Bootstrap-主題色

  • Border-radius
    • 改變任一邊圓角弧度
      • .rounded , .rounded-top , .rounded-right , .rounded-bottom , .rounded-left , .round-circle ( 正圓 ) , .rounded-pill , .rounded-0
    • 圓角弧度大小可使用 .rounded-lg , .rounded-sm

// border-radius 改變任一邊圓角弧度 示意圖 ▼
Bootstrap-border-radius示意

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

| Clearfix 清除浮動 + Close Icon 關閉圖示 |

CH6 36.37

Close icon

  • 請記得加入 aria-lable="Close" ,此功能是提醒盲人朋友這是關閉按鈕
    <button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">×</span>
    </button>

Bootstrap-close-icon關閉圖示

| Color |

CH6 38

color

  • 文字顏色 .text-{ 主題色 }
    • primary 綠色 , secondary 深灰, success 綠色 , danger 紅色 , warning 黃色 , info 藍綠色 , light 淺灰 , dark 黑色 , white 白色
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
  • 文字加上 a 連結,滑鼠滑入顏色會比實體色深一點
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>

Background color

  • .bg-{ 主題色 }
    • primary 綠色 , secondary 深灰, success 綠色 , danger 紅色 , warning 黃色 , info 藍綠色 , light 淺灰 , dark 黑色 , white 白色
  • 建議使用有色背景時,字可選白色或黑色,提升閱讀性
    • .text-white , .text-dark , .text-gray-dark
      <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
      <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>

『註』背景透明,可使用 .bg-tranparent ,此方式 Bootstrap 並未提到,隱藏版用法 XD。

| Display |

CH6 39

Display 範例

  • Display 屬性: block , inline , inline-block ( 保留 block 與 inline 屬性 )。
  • 目前現有的元素去改變它的 display 屬性,例如:行內元素變區塊 或 區塊變行內元素。
  • Div 標籤預設為 block,如果加入 .d-inline 就會變行內屬性,本來 100% 就會變成文字寬度。
  • span 預設為 inline 屬性,如果加入 .d-block 就會變成區塊屬性。
  • 於 div 中加入 .d-inline-block 與加入 .d-inline 表面上看起來一樣,但分別加入高度會發現, .d-inline 高度無效, .d-inline-block 會產生高度。

不同斷點加入 display 屬性應用練習 範例

  • Bootstrap 是以小裝置寫到大裝置,所以全裝置最小時套用 d-none 元素消失 → sm 以上 ( ≥576px ) 套用 d-sm-block → lg 以上 ( ≥992px ) 套用 d-lg-inline-block

資料來源

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

作者