iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

30天打造品牌特色電商網站系列 第 10

30天打造品牌特色電商網站 Day.10 CSS框架-Bootstrap5

除了昨天提到的media query可以做出響應式網頁之外,今天介紹的Bootstrap 5.1版本也能快速上手,更輕鬆的做出排版喔!

Containers 容器

透過containers父元素可以將子元素全部排列在中間區塊,會依不同的裝置切換適當的寬度。

<div class="container">
	<!-- 需排列的物件 -->
</div>

依裝置改變大小的通用縮寫

bootstrap對於大小有明確的定義:

  1. Extra small ( <576px ) xs
  2. Small ( ≥576px ) sm
  3. Medium ( ≥768px ) md
  4. Large ( ≥992px ) lg
  5. Extra large ( ≥1200px ) xl
  6. Extra extra large ( ≥1400px ) xxl
    也可以稱呼上方縮寫為 切斷點
    bootstrap針對包含這樣縮寫的class名稱,
    都已經寫好media query,是非常好用的css模板。

舉例,以大小及container來看,bootstrap有相關寫法:

<div class="container-lg">
</div>

這塊 div 在裝置 Large ( ≥992px ) 時,
會用bootstrap提供的css寬度,小於 992px 時就會回到預設 100%。


容器裡的東西怎麼排

通常會在裡面先放 row 父元素,
底下新增 col 子元素,

<div class="container">
	<div class="row">
		<div class="col">第一排區塊1</div>
		<div class="col">第一排區塊2</div>
		<div class="col">第一排區塊3</div>
	</div>
	<div class="row">
		<div class="col">第二排區塊1</div>
		<div class="col">第二排區塊2</div>
		<div class="col">第二排區塊3</div>
	</div>
</div>

什麼是col
這是 bootstrap 裡的 col 項目,也就是 column 的意思。
column將最大寬度分成 12 欄,是一個非常好拆分的數字。
bootstrap語法裡,col-1 就是寬1欄的意思,col-4 就會是4欄,
那如果想要在電腦上,每行有三個物件,但是縮到手機版時,
想讓物件只剩一行一個呢?
這裡可以用到上方提到的通用縮寫,
col-切換點-欄數,
以上方說明為例:

<div class="container">
	<div class="row">
		<div class="col-12 col-md-6">第一排區塊1</div>
		<div class="col-12 col-md-6">第一排區塊2</div>
		<div class="col-12 col-md-6">第一排區塊3</div>
	</div>
	<div class="row">
		<div class="col-12 col-md-6">第二排區塊1</div>
		<div class="col-12 col-md-6">第二排區塊2</div>
		<div class="col-12 col-md-6">第二排區塊3</div>
	</div>
</div>

這些區塊會在螢幕寬度 ≥768px 時,
會使用 col-md-6 這個 class 的定義,
使他們寬度只有一行(12欄)的一半(6欄),
而換到 <768px 時,就不會讀到 col-md-6 的樣式,
直接讀取 col-12,就會變成一行一個區塊!

其他不一樣的響應式排版,請鎖定明天的文章!


上一篇
30天打造品牌特色電商網站 Day.9 RWD響應式設計介紹
下一篇
30天打造品牌特色電商網站 Day.11 CSS框架-Bootstrap5
系列文
30天打造品牌特色電商網站30

尚未有邦友留言

立即登入留言