--- # System prepended metadata title: bootstrap --- # Bootstrap 簡介 --- ## Bootstrap 是什麼 Bootstrap是一款前端網頁框架，為了深入了解Bootstrap的意義與作用，我們需要對以下名詞作了解： --- * 網頁框架： * 網頁框架的概念類似於我們製作簡報時使用的「模板」，是一套由他人所撰寫好的文件。 * 大多時候，我們不必知道網頁框架是如何被設計出來，只要知道如何使用，就能夠輕鬆設計出不錯看的頁面。 * 網頁框架的存在大幅提高網頁設計效率。 * 常見網頁框架如Bootstrap、Angular、React...。 --- * 前端： * 前端泛指在網頁中，我們可以看到的所有東西。 * 目前學過的HTML、CSS及之後要學的Javascript都屬於前端的範疇。透過以上兩個名詞，我們對Bootstrap應該有了較深的了解；接下來我們將開始學習Bootstrap這個方便與強大的工具，加快我們的設計效率及提升網頁效果。 --- ## 如何使用 Bootstrap ### Bootstrap 官網 ![](https://hackmd.io/_uploads/ryuGPlmV2.png) - [Bootstrap 官網](https://getbootstrap.com/) --- 1. 進入官網後，點選左上角的「DOCS」 ![](https://hackmd.io/_uploads/rJFNg-mVh.png) --- 2. 往下滑動後，可以找到如下的html檔案 ```xml! Bootstrap demo

Hello, world!

``` --- 3. 觀察過後，我們可以發現這份檔案中有兩個標籤較為特別 ```xml! ``` ```xml! ``` --- 4. 只要將這兩個標籤複製下來，適當貼到我們自己的HTML檔案中，就可以將Bootstrap引入我們的檔案中 * 貼至head標籤裡面 ```xml! ``` * 貼至body標籤裡面 ```xml! ``` --- 5. 寫一組 ``` #格線系統 (Grid-system) ###### tags: `NKFW 網頁設計入門` --- ## Breakpoint * 直接設計出來的網站無法適應所有大小的螢幕，所以我們需要對不同設備設計不同的排版。 * 以下是Bootstrap對於不同大小的設備做的分類，分別有以下的尺寸代號。 * 可以按-F12-切換裝置模擬，來看看不同大小的設備顯示網頁的狀況。 | Breakpoint | 類別名稱 | 尺寸 | 相對應的設備 | EX | |:----------- | -------- | ------ | ------------ |:------------------ | | Extra small | None | <576px | 手機直向寬度 | Samsung Galaxy S8+ | | Small | **sm** | ≥576px | 手機橫向 | | | Medium | **md** | ≥768px | 平板直向寬度 | iPad Air | | Large | **lg** | ≥992px | | 電腦螢幕 | :::warning 上面的表格僅為參考用，難免會有一些特殊尺寸的設備(Ultra、Pro)會尺寸比同類型的設備還要大一些。 ::: ## Container & Fluid container :::info Container的作用是用於填充整個畫面，容納其他元素。在Containter裡面有網格系統，網格系統則由row跟column組成，範例如下： ::: ```xml!

...

``` 1. container * 定寬容器 * 在每一個breakpoint上都有一個最大寬度(max-width) 2. container-fluid * 在所有大小的視窗中都是width:100%，會隨著視窗大小縮放 --- ## Grid :::info * Bootstrap的格線系統是由row跟column組成，每一個row都被切分成12等分 * 因為常用的版面是2、3、4欄的版面，所以就取最小公倍數12作為基準 ::: ![](https://i.imgur.com/wTAFtco.png) * 不指定column欄寬，會自動分配寬度 ```xml!

...

``` * 指定column欄寬 ```xml!

...

``` * column+breakpoint EX：在手機上面滿版(只有一欄)，但是希望在平板上面有三欄，我該怎麼做？ ```xml!

...

``` * row-cols欄數 * 控制一個row有幾個column，多的換行 * EX：平板橫向/電腦以上4欄，平板直向以上2欄，手機1欄 ```xml!

......

``` --- ## Flex 因為row有flex的屬性，所以我們可以對column做以下幾種操作： *

justify-content

align-items

align-content

```xml!

...

``` :::success 客戶奇怪的要求：我想要一個三欄的版面，但是我想要每一個欄位的寬度只有3/12 該怎麼做呢？ ::: :::spoiler 解答在這裡 ```xml!

...

``` ::: --- ## Gutter 是時候讓column之間有點喘息的空間了。 gutter控制每一個column的padding。 *

g-0

g-1

g-2

g-3

g-4

g-5

```xml!

...

``` # 共用項目 (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 * 控制的屬性 *

m

：margin *

p

：padding * 控制的方向 *

t

：top *

b

：bottom *

s

：start *

e

：end *

x

：left and right *

y

：top and bottom * 控制的大小 *

0~5

auto

格式範例： * `m-5`：上下左右有margin * `mt-5`：只有上方有margin --- ## sizing * 控制的屬性 *

w

：width *

h

：height *

mw

：max-width *

mh

：max-height *

vw

vh

* 控制的單位 * 數字(百分比) * 只有

25、50、75、100

的單位可以用 ## display :::info 跟CSS的display基本上一樣。可以結合Breakpoint尺寸代號進行控制。 ::: 格式：`d-尺寸代號-值` ## 結合spacing, sizing, display的練習 ### 水平置中 `mx-auto`使`content`水平置中，`my-3`在垂直方向上增加margin * HTML ```xml=

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestiae eaque aliquam laborum quasi non veniam odit blanditiis? Omnis, voluptas!

``` ![](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= ``` ![](https://hackmd.io/_uploads/r13FxaGNh.png) ### 垂直置中 :::info 內容不能垂直置中真是討厭...使用`flex`或是控制`margin`可以垂直置中。 ::: * 在`right`設定`d-flex`，以解放垂直、水平方向的空間。 * 在標籤`a`設定`my-auto`，使其垂直置中。 ```xml= ``` ![](https://hackmd.io/_uploads/HkwdgaMV3.png) ### flex的RWD控制 (optional) :::info 我想要在尺寸寬度在平板(`md`)以上的時候，讓一個區塊用flex排列，如果小於的話，就不要用flex排列。 ::: ```xml=

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?

``` 上面的例子，等同於使用格線系統`container-row-col`的寫法： ```xml=

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, facilis! Ab nam quam corrupti officiis soluta perspiciatis. Illum, explicabo delectus?

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti odit voluptatum est consequuntur dignissimos optio, quia magni vero eligendi beatae!

``` ![](https://hackmd.io/_uploads/HJG9qpzNn.png) --- ## color 控制文字色彩 :::info 去官網查查看有什麼顏色可以用吧 ::: --- ## text-align 控制文字對齊 :::info 去官網查查看要怎麼讓文字置中吧 ::: --- ## Project (Optional) :::info 使用Utilities當中的項目美化你之前做過的Project吧。你可以： * 在每個欄位之間增加margin，讓排版看起來舒服一點 * 在標籤上增加padding，讓內容看起來不會那麼擠 * 跟我一樣缺乏藝術細胞的人，使用background修改你的背景顏色讓他更好看些 * 覺得正正方方的版面很無聊嗎？讓你的欄位變成圓角邊框 ::: --- # 現成組件 (Components) ###### tags: `NKFW 網頁設計入門` ## 前言與其一個一個組件慢慢學，不如直接從project當中學習 --- ## 使用現成組件需要注意的事情 :::info 怎麼我直接複製之後看起來壞掉了？你需要注意有以下幾點可能的原因： * 圖片路徑：你需要寫上正確的圖片路徑 * inline-style：官網會在範例上加上inline-style(為了展示用)。 ::: --- ## navbar :::info 一個完整的nav看起來相當龐大，但是我們可以分成好幾個部分來看： * `navbar-brand`：可以放icon之類的地方 * `navbar-toggler`：導覽列的Hamburger(三條線的icon)，控制nav內容展開跟收合 * `navbar-collapse`：包住navbar-nav，被`navbar-toggler`控制 * navbar-nav：nav的內容，本身是一個`ul` * nav-item：每一個項目都是一個`li` * link * dropdown-toggle：控制dropdown-menu的收合&展開 * dropdown-menu * search：搜尋列：本身是一個表單。 ::: ```xml= ``` ![](https://hackmd.io/_uploads/BJ9VBg74h.png) ![](https://hackmd.io/_uploads/r1HXSx7Nh.png) --- ## Carousel :::info Carousel是一個幻燈片，基本包含以下的部分： * carousel-inner：包住carousel-item的區塊。 * carousel-item：每一個item裡面都放一張圖片，代表幻燈片的圖片。 * carousel-control-prev：上一頁幻燈片的按鈕。 * carousel-control-next：下一頁幻燈片的按鈕。 ::: ```xml=

``` ![](https://hackmd.io/_uploads/SJA4Ilm4n.png) --- ## Card :::info card是一張卡片，裡面包含以下的元素： * card-img * card-body：裡面有`card-title`, `card-text` * card-title：卡片的標題 * card-text：卡片的文字 ::: ![](https://hackmd.io/_uploads/r19YvlXEn.png) ```xml=

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

``` ## 做一個個人網站 :::info 你可以... * 在網頁上方放一個導覽列 * 用卡片組件、列表介紹自己 * 放一個幻燈片區塊 ::: ## 做一個電商網站吧 :::info 做一個電商網站的基本元素有什麼： * 導覽列 * 購物商品 * 分頁導覽 * 按下商品購買鍵會彈出提示視窗 * 其他... ::: ### 做一個系網 :::info 系網可能會用到的元素： * 導覽列：navbar * 幻燈片-大圖：Carousel * 廣告、內容區塊：Card 你可能有一天就會用到這些東西，幫你們系/社團/學校/甚至是公司，架一個網站！ :::