除了昨天提到的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，就會變成一行一個區塊！

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