Bootstrap 隨筆記

邊學邊紀錄。

其他

• 有自動設定 border-box
• <img> 自帶 vertical-align: middle

container

分成 container 跟 container-fluid，前者是根據下圖在不同分界點設定 max-width：

後者就是永遠 100% 寬度。

如果不想設 fluid 但又想針對某些裝置做滿版，可以加上尾綴字：

<div class="container-sm">576px 以下 100%</div>
<div class="container-md">768px 以下 100%</div>
<div class="container-lg">992px 以下 100%</div>
<div class="container-xl">1200px 以下 100%</div>
<div class="container-xxl">1400px 以下 100%</div>

width / height

width

• w-25
• w-50
• w-75
• w-100
• w-auto
• mw-100

height

• h-25
• h-50
• h-75
• h-100
• h-auto
• mh-100
• min-vh-100
• vh-100

border

方向

border
border-top
border-end
border-bottom
border-start

寬度

border border-1
border border-2
border border-3
border border-4
border border-5

圓角

rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-circle
rounded-pill

圓角尺寸

rounded-0
rounded-1
rounded-2
rounded-3

display

• d-flex
• d-inline-flex
• d-inline
• d-inline-block
• d-block
• d-grid

Text

對齊

• text-start
• text-center
• text-end

粗細

fw-bold
fw-bolder
fw-normal
fw-light
fw-lighter
fst-italic
fst-normal

大小寫

• text-lowercase
• text-uppercase
• text-capitalize

文字大小

• fs-1
• fs-2
• fs-3
• fs-4
• fs-5
• fs-6

顏色

• text-primary
• text-secondary
• text-success
• text-danger
• text-warning
• text-info
• text-light
• text-dark
• text-body
• text-muted
• text-white
• text-black-50
• text-white-50

Flex

方向

• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

主軸

• justify-content-start
• justify-content-end
• justify-content-center
• justify-content-between
• justify-content-around
• justify-content-evenly

次軸

• align-items-start
• align-items-end
• align-items-center
• align-items-baseline
• align-items-stretch

子次軸

• align-self-start
• align-self-end
• align-self-center
• align-self-baseline
• align-self-stretch

收縮 / 展開

• flex-grow-1
• flex-shrink-1

換行

• flex-nowrap
• flex-wrap

順序

• order-0
• order-1
• order-2
• order-3
• order-4
• order-5