進到 Bootstrap 官網,然後如下示意圖來下載,也可順便留意所下載的本版:
然後在下圖的示意中,說明了若只需要「Grid System」的話,所需要的檔案:
從剛剛下載的資料夾裡,有 css
資料夾,在裡面找到 bootstrap-grid.min.css
檔案,如下圖:
請複製一份,放到 practice/vendors/bootstrap/
資料夾裡即可。
https://getbootstrap.com/docs/5.3/layout/grid/#grid-options
記得以下這幾個版面的分界點:
xs
:螢幕寬度大於等於 0px。
sm
:螢幕寬度大於等於 576px。
md
:螢幕寬度大於等於 768px。
lg
:螢幕寬度大於等於 992px。
xl
:螢幕寬度大於等於 1200px。
xxl
:螢幕寬度大於等於 1400px。
如下示意圖:
將 列
寫在 container 中。
將 欄
寫在 列中。
每一列共有視覺上看不到的 12 欄可做劃分。
語法:offset-{breakpoint}-{number}
在某個 {breakpoint}
範圍以上,位移 {number}
欄。例:
語法:order-{breakpoint}-{number}
在某個 {breakpoint}
範圍以下,{number}
數值較小的先出現。例:
在 column
裡面的部份,也可以再放 row
來切 12 欄。例:
關於左右 margin 負邊界(未指定寬度的情況下,左右的 margin 為負值時,會創造出額外空間):
因為 Bootstrap 的 row(有負邊界),分別是:
所以當 row 放在其它自己的 div 標籤時,該 div 標籤記得加以下兩行的 css:
例:
遇到 max-width,需扣掉 0.02px,如下示意:
完成結果示意:
請建立 practice/rwd_sample.html
檔案,提供以下的 html:
及 CSS:
註:斷點的數值(記下來):576、768、992、1200、1400。
請執行以下:
一、瀏覽器寬度 >=
1400px 時:(此項已預設完成。)
1、section.content_sec
元素的寬度設定成 1320px。
二、1200px <=
瀏覽器寬度 <=
1399.98px 時:
1、section.content_sec
的寬度設定成 1140px。
三、992px <=
瀏覽器寬度 <=
1199.98px 時:
1、section.content_sec
的寬度設定成 960px。
四、768px <=
瀏覽器寬度 <=
991.98px 時:
1、section.content_sec
的寬度設定成 720px。
五、576px <=
瀏覽器寬度 <=
767.98px 時:
1、section.content_sec
的寬度設定成 540px。
2、div.img_block
的寬度(我使用 flex-basis
),設定成 40%。
六、瀏覽器寬度 <=
575.98px 時:
1、section.content_sec
的寬度設定成 100%。
2、div.block
設定成上圖下文,也就是將 flex-direction
設定成 column。
3、div.img_block
的 flex-basis
設定回預設值,也就是 auto。
4、section.content_sec div.block.img_right div.img_block
的 order
設定成 1。
5、section.content_sec div.block.img_right div.text_block
的 order
設定成 2。
參考作法: