iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Modern Web

不斷片(篇)挑戰系列 第 4

<DAY 4> 從Bootstrap 5理解容器(上)

  • 分享至 

  • xImage
  •  

你們好!今天是鐵人賽的第四天,要帶給大家的是在Bootstrap 5裡基本的布局元素,在特定區塊、網格內將物件進行包裹不讓其跑出容器外,是使我們方便進行排版的方式之一。

容器指令 說明
container 每個斷點都會設置max-width
container-fluid 斷點大小是width:100%
container-{breakpoint} 在未指定斷點大小前width:100%
預設的container範例
流體container範例
  • 在每個容器內都可以裝下各種不同占比的物件,現在上個示意圖:
容器占比表示
  • 容器內總占比以12格去平分,這意味著這一容器假設在一橫排滿版的情況下,可以把物件以12格的占比大小去平分。

第四天的鐵人賽就先到這邊結束囉!再來朝著第五天努力前進吧!不斷片挑戰第四天圓滿結束!拍手~拍手~


上一篇
<DAY 3> HTML基本架構(下)
下一篇
<DAY 5> 從Bootstrap 5理解容器(下),能不能好好的把東西裝進容器收好
系列文
不斷片(篇)挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言