格線系統
container-fluid 滿版容器
container 定寬容器
手機、平板以上
col-12 col-md-3
平板直向md
平板橫向lg
桌機xl
不想管幾欄 就寫class=”col”
自動欄寬 col
col-4 ，如果有6個div 會自己換行
w-100 h-100
breakpoint
用時寫sm 與md ，優先序是md會蓋掉sm
col-12 col-md-4 col-lg-3 col-xxl-2
這個寫法用在col 上
另一種寫法寫在row
row row-cols-md-3 row-cols-lg-4 row-cols-xl-6
欄位間距
g-5
垂直居中
justify-content-center
align-items-center
col-8 col-md-6
height:98vh – > vh 是什麼?
background-size:cover; –> 是什麼?
mb4
格線距離的控制
圖片與寬高尺寸控制
class img-fluid 滿版圖片
css max-width:100%
w-100 與 max-width:100%
共用項目margin padding
卡片組件
.amos-card-img{
width:100%;
height:100%;
object-fit:cover;
}