30天打造品牌特色电商网站 Day.11 CSS框架-Bootstrap5

昨天已经初步介绍几个简单常用的bootstrap语法，
今天来看看几个也是好用、比较详细或特殊的情况。

col可以先空几栏吗

使用 offset-断点-栏数，
可以让此区块的左边空出想要的栏数，

<div class="container>
	<div class="row">
		<div class="col-3 offset-md-3">宽3栏，左边空3栏</div>
		<div class="col-3 offset-md-3">宽3栏，左边空3栏</div>
	</div>
</div>

上面会执行出一行里，空3栏，出现一个宽3栏的div，然後再空3栏，出现一个宽3栏的div，而且因为有断点 md ( ≥768px ) ，因此小於 768px 就不会空栏位。
这时就满12栏了，这里补充一下，如果有超出12栏，下个当行物件会换行。

row里面位置的排列

在 row 的 class 里加上排序的名称

1. row的垂直排列
   让物件在上下的空间中排序

   • align-items-start
     会排在最上面
   • align-items-center
     会排在垂直距离的中间
   • align-items-end
     排在最下面

2. 物件的排列

   • justify-content-start
     同行物件排在最左边，中间没有空隙。
   • justify-content-center
     同行物件一起排在正中间，中间没有空隙。
   • justify-content-end
     同行物件排在最右边，中间没有空隙。
   • justify-content-between
     扣掉同行物件的宽度，剩下宽度均分在物件之中，
     所以假设只有两个物件，一个会靠左一个靠右。

补充好用的padding、margin的class名称

前几天分享的css属性：padding、margin在这边也可能用上，
个人觉得搭配 row、col 这些区块真的很方便！
先来介绍各个缩写，再一起组合起来！

1. padding或是margin

• padding 以 p 表示
• margin 以 m 表示

2. 方向性

• 上面：t（top）
• 下面：b（bottom）
• 左边：s （start）
• 右边：e（end）
• 左右两边都要：x（横向x轴）
• 上下两边都要：y（直向y轴）
• 上下左右都要的话，这边不用设定，直接接数字

3. 距离(倍数)

距离前面要用 - 一横来分开

• 0：就是0
• 1：0.25em
• 2：0.5em
• 3：1em ( 刚好一倍，所以最常用)
• 4：1.5em
• 5：3em
• auto：浏览器自动调整margin（所以padding不能用喔）

4. 举例

• p-1
  就是padding：0.25em;
• mt-3
  就是margin-top：1em;
• m-auto
  浏览器自动设定margin

以上就是响应式网站快速简单的写法！
有兴趣也可以到 Bootstrap 的官方文件浏览喔！
https://getbootstrap.com/docs/5.1/getting-started/introduction/