# 共用項目 (Utilities)
###### tags: `NKFW 網頁設計入門`
:::info
共用項目是透過標籤的class來控制常見的CSS屬性。跟直接用CSS控制沒甚麼不同，但是增加了便利性。這裡要介紹的項目包含：
* spacing
* padding
* margin
* sizing
* width
* height
* background color
* border
* color
* display
<!-- 這裡我們將大量使用官方文件進行教學，讓大家知道如何自己看官方文件 -->
:::
[Bootstrap官方文件(英文)](https://getbootstrap.com/docs/5.3/utilities)
[Bootstrap官方文件-六角學院翻譯(中文)](https://bootstrap5.hexschool.com/)
# spacing
* 控制的屬性
* <h6 style="color:purple;display:inline">m</h6>：margin
* <h6 style="color:purple;display:inline">p</h6>：padding
* 控制的方向
* <h6 style="color:purple;display:inline">t</h6>：top
* <h6 style="color:purple;display:inline">b</h6>：bottom
* <h6 style="color:purple;display:inline">s</h6>：start
* <h6 style="color:purple;display:inline">e</h6>：end
* <h6 style="color:purple;display:inline">x</h6>：left and right
* <h6 style="color:purple;display:inline">y</h6>：top and bottom
* 控制的大小
* <h6 style="color:purple;display:inline">0~5</h6>
* <h6 style="color:purple;display:inline">auto</h6>
格式範例：
* `m-5`：上下左右有margin
* `mt-5`：只有上方有margin
# sizing
* 控制的屬性
* <h6 style="color:purple;display:inline">w</h6>：width
* <h6 style="color:purple;display:inline">h</h6>：height
* <h6 style="color:purple;display:inline">mw</h6>：max-width
* <h6 style="color:purple;display:inline">mh</h6>：max-height
* <h6 style="color:purple;display:inline">vw</h6>
* <h6 style="color:purple;display:inline">vh</h6>
* 控制的單位
* 數字(百分比)
* 只有<h6 style="color:purple;display:inline">25、50、75、100</h6>的單位可以用
# display
:::info
跟CSS的display基本上一樣。
可以結合Breakpoint尺寸代號進行控制。
:::
格式：`d-尺寸代號-值`
# 結合spacing, sizing, display的練習
### 水平置中
`mx-auto`使`content`水平置中，`my-3`在垂直方向上增加margin
* HTML
```xml=
<body>
<div class="content w-50 mx-auto my-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestiae eaque aliquam laborum quasi non veniam odit blanditiis? Omnis, voluptas!</div>
<div class="content w-50 mx-auto my-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestiae eaque aliquam laborum quasi non veniam odit blanditiis? Omnis, voluptas!</div>
<div class="content w-50 mx-auto my-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestiae eaque aliquam laborum quasi non veniam odit blanditiis? Omnis, voluptas!</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
```
### 靠在左右兩側
:::info
要怎麼讓兩個水平並排的區塊靠在左右兩邊呢？除了使用flex的`justify-content`之外，你還可以透過控制`margin`達到一樣的效果。
:::
* 在`nav`設定`d-flex`之後，使`left`, `right`兩個區塊可以併排(因為預設`flex-direction: row`，兩個區塊為水平排列方向)
* 之後，在`right`加上`ms-auto`，可以自動分配左邊的`margin`，所以`right`就被推到最右邊了。
* 如果沒有在`nav`設定`d-flex`，在`right`加上`ms-auto`是沒有作用的。flex解放了margin可以運用的空間。
```xml=
<body>
<nav class="d-flex">
<div class="left">
<h3>NKFW</h3>
</div>
<div class="right ms-auto">
<a href="#">活動簡介</a>
<a href="#">活動剪影</a>
<a href="#">關於我們</a>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
```
### 垂直置中
:::info
內容不能垂直置中真是討厭...使用`flex`或是控制`margin`可以垂直置中。
:::
* 在`right`設定`d-flex`，以解放垂直、水平方向的空間。
* 在標籤`a`設定`my-auto`，使其垂直置中。
```xml=
<body>
<nav class="d-flex">
<div class="left">
<h3>NKFW</h3>
</div>
<div class="right ms-auto d-flex">
<a href="#" class="my-auto mx-1">活動簡介</a>
<a href="#" class="my-auto mx-1">活動剪影</a>
<a href="#" class="my-auto mx-1">關於我們</a>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
### flex的RWD控制 (optional)
:::info
我想要在尺寸寬度在平板(`md`)以上的時候，讓一個區塊用flex排列，如果小於的話，就不要用flex排列。
:::
```xml=
<body>
<div class="block d-md-flex">
<div class="content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
<div class="content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
<div class="content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
</div>
</body>
```
上面的例子，等同於使用格線系統`container-row-col`的寫法：
```xml=
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
<div class="col-12 col-md content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
<div class="col-12 col-md content my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?</div>
</div>
</div>
</body>
```
:::info
這兩個寫法其實都OK，取決於你覺得哪個比較好寫。有時候我們不想要使用格線系統`container-row-column`的寫法，因為在一個小區塊上面塞很多層標籤，會看起來很臃腫。
:::
# background
設定標籤的背景色彩
* 格式：`bg-顏色`
* 可以使用的顏色(version 5.0)
* `primary`
* `secondary`
* `success`
* `danger`
* `warning`
* `info`
* `light`
* `dark`
* 還有很多......請到官網查看
* 可以使用的顏色(version 5.3)
* `primary`
* `primary-subtle`
* `secondary`
* `secondary-subtle`
* `success`
* `success-subtle`
* 還有很多......請到官網查看
# border
控制邊框
一定要在class上面加上`border`，剩下的根據需求增加到class：
* 控制顏色
* `border-顏色`
* 只使用某一邊的border
* `border-top`
* `border-end`
* `border-bottom`
* `border-start`
* 刪除某一邊的border
* `border-0`
* `border-top-0`
* `border-end-0`
* `border-bottom-0`
* `border-start-0`
* border寬度
* `border-寬度`
* 寬度：`0~5`
* rounded border
* `rounded`
* `rounded-top`
* `rounded-end`
* `rounded-bottom`
* `rounded-start`
* `rounded-circle`
* `rounded-pill`
* 還有很多...請到官網查詢
### 範例：做一個有邊框的內容區塊
:::info
做一個三欄版面，在左邊的區塊，靠左的一邊的地方要有圓角；在右邊的區塊，靠左的一邊的地方要有圓角。
:::
```xml=
<body>
<div class="container mt-5">
<div class="row">
<div class="col border rounded-start-5 p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti odit voluptatum est consequuntur dignissimos optio, quia magni vero eligendi beatae!</div>
<div class="col border p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti odit voluptatum est consequuntur dignissimos optio, quia magni vero eligendi beatae!</div>
<div class="col border rounded-end-5 p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti odit voluptatum est consequuntur dignissimos optio, quia magni vero eligendi beatae!</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
```
# color
控制文字色彩
:::info
去官網查查看有什麼顏色可以用吧
:::
# text-align
控制文字對齊
:::info
去官網查查看要怎麼讓文字置中吧
:::
# Project (Optional)
:::info
使用Utilities當中的項目美化你之前做過的Project吧。你可以：
* 在每個欄位之間增加margin，讓排版看起來舒服一點
* 在標籤上增加padding，讓內容看起來不會那麼擠
* 跟我一樣缺乏藝術細胞的人，使用background修改你的背景顏色讓他更好看些
* 覺得正正方方的版面很無聊嗎？讓你的欄位變成圓角邊框
:::
Sign in with Wallet
Connect another wallet