boostrap content

重置排版

Reboot

就像css的Reset 將樣式設為一致

兩個重點

有設定box-sizing

Native font stac>>字體堆疊

winwdows 記得加入 微軟正黑體

文字與語意化

h1>>含語意的標籤

p h1 >>不含語意 但是具有樣式的class

要使用比較大的字體時 可使用display 1

s

滑鼠右鍵顯示文字

引用文字

把預設的標籤符號清除掉

LILINE 同一行

描述型清單

dl 最外框

dt 左邊的標題

dd 描述

text-truncate 會將多餘的文字裁切掉

Images

.img-fluid >> 響應是

對齊

float-left
float-right

記得要清除浮動

圖片置中有2種

<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>

Figures

圖片以及他的描述

<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

表格基本架構說明

RWD 在外層加入一個table-responsive

有特定的中斷點

table-responsive-sm
table-responsive-md
table-responsive-lg
table-responsive-xl

是中斷點以下 EX:500以下