---
# System prepended metadata

title: 共用項目 (Utilities)
tags: [NKFW 網頁設計入門]

---

# 共用項目 (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>
```

![](https://hackmd.io/_uploads/H1kBtnME3.png)



### 靠在左右兩側

:::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>
```
![](https://hackmd.io/_uploads/r13FxaGNh.png)

### 垂直置中

:::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>
```

![](https://hackmd.io/_uploads/HkwdgaMV3.png)


### 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>
```

![](https://hackmd.io/_uploads/HJG9qpzNn.png)


# color 

控制文字色彩

:::info
去官網查查看有什麼顏色可以用吧
:::

# text-align

控制文字對齊

:::info
去官網查查看要怎麼讓文字置中吧
:::

# Project (Optional)
:::info
使用Utilities當中的項目美化你之前做過的Project吧。你可以：

* 在每個欄位之間增加margin，讓排版看起來舒服一點

* 在標籤上增加padding，讓內容看起來不會那麼擠
* 跟我一樣缺乏藝術細胞的人，使用background修改你的背景顏色讓他更好看些
* 覺得正正方方的版面很無聊嗎？讓你的欄位變成圓角邊框
:::