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，就会变成一行一个区块！

其他不一样的响应式排版，请锁定明天的文章！