# Bootstrap 5筆記 ## 目錄 > :::spoiler 清單 > [TOC] > ::: --- ## 介紹 Bootstrap：由HTML、CSS、JavaScript三件套撰寫的前端框架，有良好的RWD設計，現成的樣式跟套件可使用 ## 使用方式 ### CDN引用 > 訪問網站時經過bootstrap伺服器 > 會根據使用者所在地連到距離最近的主機 > 如果CDN Server掛掉就無法訪問網站 - 引用步驟 1. CSS引用 ```html <!-- 加入html <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> ``` 2. JavaScript引用 ```javascript <!-- 加入js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous" ></script> ``` ### 下載離線檔 > 可以修改code (但通常不需要) > 完整下載檔案較大 (可以選擇壓縮版) - 安裝步驟 - 到官網下載最新版本 > min為壓縮板，其他版本差異請看說明文件 > 若使用Vue + Vite開發建議看這兩篇教學 > [🔗link1](/@chinggo/rkyqvjGtd)、[🔗link2](/@chinggo/HJ0H8r4s_?utm_source=preview-mode&utm_medium=rec) ### CSS Reset 與重置 需要重置CSS設定的原因： - 更新部分瀏覽器的預設值，在可變動的元件間距上使用 `rem` 替代 `em`。 - 避開使用 `margin-top`。垂直邊界的 margins 可能會重疊，進而產生不能預期的結果。更重要的是， 使用單向的 `margin` 是一個更單純的思考模式。 - 為了在跨裝置時能輕鬆縮放，區塊元素的 `margin` 應採用 `rem`。 - 盡可能使用 `inherit` ，將 `font` 相關屬性的宣告保持在最低需求 > 為避免不同瀏覽器預設css設定差異，建議先覆蓋掉不同瀏覽器有差異的設定 Bootstrap自動進行覆蓋後的設定：[🔗點此查看](https://bootstrap5.hexschool.com/docs/5.0/content/reboot/) ### Grid system (格線系統) - container：格線系統最外層 - components：Bootstrap 提供的一些撰寫好樣式的互動式功能，通常放置在 col 內，除非該 div 未使用格線系統 - Utilities：通用類別可以讓格線系統在不同大小的裝置上，呈現不同的顯示方式 > column常見總數為12 - container - .container：固定寬度，每個breakpoint都設置1個max-width - .container-fiuld：滿版，每個breakpoint都為width: 100% > Grid system最外層至少要有1個 container - .row > vscode會補全`<div class="rol"></div>` > `.rol`的下一層一定要是`.col`，否則會報錯 - .col-1 ~ 12 > vscode會補全`<div class="col"></div>` > 用於劃分格子，盡量不要設定width、左右margin、padding > height跟上下margin、padding不影響 > col-number 決定該col佔據的欄位寬度，e.g., col-2佔2欄寬，col-10佔10欄寬 > 如果加總<=12在同一行， > 超過將會自動換行 ``` <div class="row"> <!-- 第1行 --> <div class="col-3 black">網頁內容</div> <div class="col-3 black">網頁內容</div> <div class="col-5 black">網頁內容</div> </div> ``` ``` <div class="row"> <!-- 第1行 --> <div class="col-4 black">網頁內容</div> <div class="col-4 black">網頁內容</div> <div class="col-4 black">網頁內容</div> </div> ``` ``` <div class="row"> <!-- 第1行 --> <div class="col-5 black">網頁內容</div> <div class="col-7 black">網頁內容</div> <!-- 第2行 --> <div class="col-4 black">網頁內容</div> </div> ``` ``` <div class="row"> <!-- 第1行 --> <div class="col-4 black">網頁內容</div> <div class="col-5 black">網頁內容</div> <div class="col-2 black">網頁內容</div> <!-- 第2行 --> <div class="col-2 black">網頁內容</div> </div> ``` - breakpoint (斷點) 可以直接在element class中加入以下參數 | 型別 | 參數 | pixel | |---|---|---| | xs(預設) | .col- | < 576px | | sm | .col-sm- | >= 576px | | md | .col-md- | >= 768px | | lg | .col-lg- | >= 992px | | xl | .col-xl- | >= 1200px | | xxl | .col-xxl- | >= 1400px | > 更完整內容：[🔗link](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/) ```css <div class="container"> <div class="row"> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> <div class="col-12 col-md-4 col-lg-3">網頁內容</div> </div> <!-- < 576px時1行1個 --> <!-- >= 768px時1行3個 --> <!-- >= 992px時1行4個 --> </div> ``` ### Display > 一種Utilities，預設不受media query限制 - `.d-{value}`： xs<br> {value} list - none：隱藏 - inline：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display) - inline-block：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display) - block：[🔗Display](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#Display) - grid：[🔗grid](#Grid-system-格線系統) - table - table-cell - table-row - flex：[flexbox](https://hackmd.io/Oa7iXlbrQ2CGheqWVo2xRQ#RWD-Responsive-Web-Design) - inline-flex：[🔗與flexbox差異](https://ithelp.ithome.com.tw/articles/10238558) ```html // none <div class="d-none">This element will not be displayed</div> // inline <div class="d-inline">This is an inline element</div> // inline-block <div class="d-inline-block">This is an inline-block element</div> // block <div class="d-block">This is a block element</div> // grid <div class="d-grid"> // <div>...</div> </div> // table <table class="d-table" style="width: 100%; border-collapse: collapse"> <tr class="d-table-row"> <td class="d-table-cell" style="border: 1px solid black">Table cell 1</td> <td class="d-table-cell" style="border: 1px solid black">Table cell 2</td> <td class="d-table-cell" style="border: 1px solid black">Table cell 3</td> </tr> <tr class="d-table-row"> <td class="d-table-cell" style="border: 1px solid black">Table cell 4</td> <td class="d-table-cell" style="border: 1px solid black">Table cell 5</td> <td class="d-table-cell" style="border: 1px solid black">Table cell 6</td> </tr> </table> ``` ```html // flex <div class="d-flex" style="width: 100%; height: 100px; background-color: lightgrey" > <div style="flex-basis: 25%; background-color: red">Flex item 1</div> <div style="flex-basis: 25%; background-color: yellow">Flex item 2</div> <div style="flex-basis: 25%; background-color: blue">Flex item 3</div> <div style="flex-basis: 25%; background-color: green">Flex item 4</div> </div> ``` ```html // inline-flex <div class="d-inline-flex" style="width: 100%; height: 100px; background-color: lightgrey" > <div style="flex-basis: 25%; background-color: red"> Inline Flex item 1 </div> <div style="flex-basis: 25%; background-color: yellow"> Inline Flex item 2 </div> <div style="flex-basis: 25%; background-color: blue"> Inline Flex item 3 </div> <div style="flex-basis: 25%; background-color: green"> Inline Flex item 4 </div> </div> ``` - `.d-{breakpoint}-{value}`：sm、 md、lg、xl、xxl > 電腦版以上隱藏div > `.d-lg-none ` > xs設定隱藏，平板以上顯示div > `.d-none .d-md-blick` ### nested grid ``` <div class="container"> <div class="row"> <div class="col-4 black">選單</div> <div class="col 8"> <div class="row"> <div class="col-6 black">商品欄位</div> <div class="col-6 black">商品欄位</div> <div class="col-6 black">商品欄位</div> </div> </div> </div> </div> ``` ![](https://i.imgur.com/FGpS4lD.png) --- ###### tags: `Front-end` `Bootstrap`