bootstrap - HackMD

# 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! <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> </body> </html> ``` --- 3. 觀察過後，我們可以發現這份檔案中有兩個標籤較為特別 ```xml! <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> ``` ```xml! <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> ``` --- 4. 只要將這兩個標籤複製下來，適當貼到我們自己的HTML檔案中，就可以將Bootstrap引入我們的檔案中 * 貼至head標籤裡面 ```xml! <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> ``` * 貼至body標籤裡面 ```xml! <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> ``` --- 5. 寫一組<button>，測試看看是否有效果 ```xml! <button></button> ``` #格線系統 (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! <div class="container"> <div class="row"> <div class="col"> ... </div> <div class="col"> ... </div> <div class="col"> ... </div> </div> </div> ``` 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! <div class="container"> <div class="row"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div> </div> ``` * 指定column欄寬 ```xml! <div class="container"> <div class="row"> <div class="col-4">...</div> <div class="col-8">...</div> </div> </div> ``` * column+breakpoint EX：在手機上面滿版(只有一欄)，但是希望在平板上面有三欄，我該怎麼做？ ```xml! <div class="container"> <div class="row"> <div class="col col-md-4">...</div> <div class="col col-md-4">...</div> <div class="col col-md-4">...</div> </div> </div> ``` * row-cols欄數 * 控制一個row有幾個column，多的換行 * EX：平板橫向/電腦以上4欄，平板直向以上2欄，手機1欄 ```xml! <div class="container"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 justify-content-center"> <div class="col">......</div> <div class="col">......</div> <div class="col">......</div> <div class="col">......</div> <div class="col">......</div> </div> </div> ``` --- ## Flex 因為row有flex的屬性，所以我們可以對column做以下幾種操作： * <p style="color:purple">justify-content</p> * <p style="color:purple">align-items</p> * <p style="color:purple">align-content</p> ```xml!  <div class="container"> <div class="row justify-content-between"> <div class="col-4">...</div> <div class="col-8">...</div> </div> </div> ``` :::success 客戶奇怪的要求：我想要一個三欄的版面，但是我想要每一個欄位的寬度只有3/12 該怎麼做呢？ ::: :::spoiler 解答在這裡 ```xml! <div class="container"> <div class="row justify-content-center"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> </div>  <div class="container"> <div class="row justify-content-around"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> </div> ``` ::: --- ## Gutter 是時候讓column之間有點喘息的空間了。 gutter控制每一個column的padding。 * <p style="color:purple">g-0</p> * <p style="color:purple">g-1</p> * <p style="color:purple">g-2</p> * <p style="color:purple">g-3</p> * <p style="color:purple">g-4</p> * <p style="color:purple">g-5</p> ```xml! <div class="container"> <div class="row "> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> </div> ```  # 共用項目 (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修改你的背景顏色讓他更好看些 * 覺得正正方方的版面很無聊嗎？讓你的欄位變成圓角邊框 ::: --- # 現成組件 (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= <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> ``` ![](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= <div id="carouselExample" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> ``` ![](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= <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> ``` ## 做一個個人網站 :::info 你可以... * 在網頁上方放一個導覽列 * 用卡片組件、列表介紹自己 * 放一個幻燈片區塊 ::: ## 做一個電商網站吧 :::info 做一個電商網站的基本元素有什麼： * 導覽列 * 購物商品 * 分頁導覽 * 按下商品購買鍵會彈出提示視窗 * 其他... ::: ### 做一個系網 :::info 系網可能會用到的元素： * 導覽列：navbar * 幻燈片-大圖：Carousel * 廣告、內容區塊：Card 你可能有一天就會用到這些東西，幫你們系/社團/學校/甚至是公司，架一個網站！ :::

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.