[Day6] 學Bootstrap 是為了走更長遠的路~ Grid 篇(1) | Bootstrap 平均分配欄寬
前言今天終於來到本系列文第一個重頭戲,也是Bootstrap非常實用的~~~~~GridSystem(網格系統)BootstrapGrid的特點是用在RWD(響應式網頁設計)非常好用!不過並不是用了Grid就不需要用到Flex,學了之後發現它們是相輔相成的關係吧,那就讓我們進入正文吧!(PS.後來發現CSS也有個叫Grid的屬性[1],這邊釐清一下,這篇文章講的是Bootstrap的Grid哦!本日正文Gridsystem-Bootstrap[2]首先Grid有Container,Row,Column這三種元素,Container顧名思義就是容器,你可以先把Container想像成像一個
今天終於來到本系列文第一個重頭戲,也是 Bootstrap 非常實用的~~~~~ Grid System (網格系統)Bootstrap Grid 的特點是用在 RWD (響應式網頁設計) 非常好用!不過並不是用了 Grid 就不需要用到 Flex,學了之後發現它們是相輔相成的關係吧,那就讓我們進入正文吧!(PS. 後來發現 CSS 也有個叫 Grid 的屬性[1],這邊釐清一下,這篇文章講的是 Bootstrap 的 Grid 哦!
本日正文Grid system - Bootstrap[2]
首先 Grid 有 Container, Row, Column 這三種元素,Container 顧名思義就是容器,你可以先把 Container 想像成像一個 <div> 框住的區塊。
Container 裡面由 Row, Column 組成,Row 就是列,因此一列裡面會有很多欄,就是 Column。
在 Grid 世界裡,把一個空間分成 12 個區塊,因此 Row 一列中最多可以含有 12 個格子。(PS. 這邊指的不是 Column,不要搞混,看下面例子可能會比較清楚 )
概念講到這邊可能大家還是會覺得有點模糊吧,沒關係當初的我也是,還是直接看例子大家應該就知道怎麼回事了~例如把昨天的例子用 Grid 的方式改寫一下:
<div class="container"> <div class="row bg-primary"> <div class="col border">1</div> </div> <div class="row bg-info"> <div class="col border">2-1</div> <div class="col border">2-2</div> <div class="col border">2-3</div> &l...