bootstrap5 快速查詢

# bootstrap5 快速查詢 {%hackmd BJrTq20hE %} ## CDN： [bootstrap5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) CSS： ```htmlembedded <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> ``` JS： ```javascript= <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> ``` ## 六角Gulp設定： ```htmlembedded // bootstrap @import "../../../node_modules/bootstrap/scss/functions"; @import "./helpers/variables"; @import "./helpers/utilities"; @import "../../../node_modules/bootstrap/scss/bootstrap"; ``` ![](https://i.imgur.com/LGs9wK8.png) 只顯示外框：btn-outline-primary 大小： btn-sm、 btn-lg - 格線系統：由column(欄)、gutter(間距)組成 - 排版三劍客： .container、.row、.col 1~12 - .container - .container 固定寬度 - .container-fluid 滿版 - .row &emsp;g-0：不需要 gutters &emsp;g-1 ~ g-5：上下左右留白 &emsp;gx-?、gy-?：X軸或Y軸留白 - 名言 1：.col- 的外層只能是 .row &emsp;offset- 偏移column [https://bootstrap5.hexschool.com/docs/5.0/layout/columns/#offsetting-columns](https://bootstrap5.hexschool.com/docs/5.0/layout/columns/#offsetting-columns) - 名言 2：.row 裡面只能是 .col- - 名言 3：網頁內容與元件請放在 .col- 裡面常見錯誤，在 .col 增加寬度常見錯誤，在格線系統調整左右 margin 與 padding 常見觀念：可以加上下的 margin 與 padding 常見觀念：最外層至少補一個 container(因為通常會居中) 常見觀念：整體格線邏輯是一致 ![](https://i.imgur.com/HsspRsq.png) </br> ## BS的自訂斷點： [https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width) - 最小寬度：`@include media-breakpoint-up(md) { ... }` //md(tablets, 768px and up) 以上(如BS預設) - 最大寬度：`@include media-breakpoint-down(md) { ... }` - 特定的斷點：`@include media-breakpoint-only(md) { ... }` @media (min-width: 768px) and (max-width: 991.98px) { ... } - 範圍斷點：`@include media-breakpoint-between(md, xl) { ... }` // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199.98px) { ... } ## 圖片： - `.img-fluid`：響應式圖片 - `.img-thumbnail`：讓圖片呈現圓角 1px 的邊框。 - `<figure>`：圖片加標題(放在圖片下方) [https://bootstrap5.hexschool.com/docs/5.0/content/figures/](https://bootstrap5.hexschool.com/docs/5.0/content/figures/) ```htmlembedded= <figure class="figure"> <img src="..." class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> ``` ## Helpers ( 工具 ) - 連結顏色： `.link-primary` - 比例( Ratios )：嵌入式長寬比，用ratio包裹圖片或影片 `ratio` ratio-16x9 ( 有1x1、4x3、16x9、21x9 ) - 版面位置： .fixed-top：固定頂端 .fixed-bottom `.sticky-top`：黏住頂端 &emsp; sticky-sm-top &emsp; sticky-md-top &emsp; sticky-lg-top &emsp; sticky-xl-top - 垂直、水平堆疊：( BS v5.1.0 ) ```javascript= //vstack、hstack <div class="vstack gap-3"> //垂直堆疊 <div class="hstack gap-3"> //水平堆疊 <div class="bg-light border">First item</div> <div class="bg-light border">Second item</div> <div class="bg-light border">Third item</div> </div> ``` - Card：連結延伸 (Stretched link)：透過 CSS 將連結 “延伸”，令任何 HTML 元素或 Bootstrap 元件變得可點擊。 ```javascript= <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="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> //stretched-link <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> </div> </div> ``` - 垂直分隔線：`<hr>` tag的兄弟 ```javascript= <div class="hstack gap-3"> <div class="bg-light border">First item</div> <div class="bg-light border ms-auto">Second item</div> //vr垂直分隔線 <div class="vr"></div> <div class="bg-light border">Third item</div> </div> ``` ## Utilities ( 通用類別 ) - 背景顏色： `bg-primary` - 邊框： - 增加邊框 ```javascript= //border <span class="border"></span> <span class="border-top"></span> <span class="border-end"></span> <span class="border-bottom"></span> <span class="border-start"></span> ``` * 減少邊框 ```javascript= //border-0 <span class="border-0"></span> <span class="border-top-0"></span> <span class="border-end-0"></span> <span class="border-bottom-0"></span> <span class="border-start-0"></span> ``` - 邊框顏色： ```javascript= <span class="border border-primary"></span> ``` * 邊框寬度：有1~5 ```javascript= <span class="border border-1"></span> ``` - 園角： ```javascript= //rounded <img src="..." class="rounded" alt="..."> <img src="..." class="rounded-top" alt="..."> <img src="..." class="rounded-end" alt="..."> //右 <img src="..." class="rounded-bottom" alt="..."> <img src="..." class="rounded-start" alt="..."> //左 <img src="..." class="rounded-circle" alt="..."> <img src="..." class="rounded-pill" alt="..."> ``` - 園角尺寸半徑：0~3 ```javascript= <img src="..." class="rounded-0" alt="..."> //半徑如下： $border-radius: 0.25rem !default;//rounded-1 $border-radius-sm: 0.2rem !default;//rounded-2 $border-radius-lg: 0.3rem !default;//rounded-3 $border-radius-pill: 50rem !default; ``` - Display： `.d-{value} for xs` `.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.` //value 為以下其中一個： - none - inline - inline-block - block - grid - table - table-cell - table-row - flex - inline-flex ```javascript= //沒有!important的inline <ul class="list-inline"> <li class="list-inline-item">This is a list item.</li> <li class="list-inline-item">And another one.</li> <li class="list-inline-item">But they're displayed inline.</li> </ul> ``` - 浮動 ( Float )： ```javascript= <div class="float-start">Float start on all viewport sizes</div><br>//左 <div class="float-end">Float end on all viewport sizes</div><br>//右 <div class="float-none">Don't float on all viewport sizes</div>//清除浮動 ``` - 溢出 (Overflow)： ```javascript= //overflow-auto <div class="overflow-auto">...</div>//常用 <div class="overflow-hidden">...</div> <div class="overflow-visible">...</div> <div class="overflow-scroll">...</div> ``` - 位置 (Position)： ```javascript= //position-relative <div class="position-static">...</div> <div class="position-relative">...</div> <div class="position-absolute">...</div> <div class="position-fixed">...</div> <div class="position-sticky">...</div> //自訂responsive： position-lg-relative ``` - 排列元素： - top - 用於垂直定位 top - start - 用於水平定位 left (LTR) - bottom - 用於垂直定位 bottom - end - 用於水平定位 right (LTR) 其中，position 為以下的其中一種: - 0 - 用於 0 的邊界定位 - 50 - 用於 50% 的邊界定位 - 100 - 用於 100% 的邊界定位 ```javascript= <div class="position-absolute top-50 start-50"></div>//元素中心點為右下角 <div class="position-absolute bottom-50 end-50"></div>//元素中心點為左上角 ``` - 元素置中：以元素的重心為中間點此類別將 transform 之 translateX(-50%) 與 translateY(-50%) 應用於元素，並結合使用邊界定位通用類別，讓你可以把元素完全置中。 ```javascript= <div class="position-absolute top-50 start-50 translate-middle"></div>//在外框的正中心 <div class="position-absolute top-0 start-50 translate-middle-x"></div>//只針對X軸的中心點 <div class="position-absolute top-50 start-0 translate-middle-y"></div> //自訂responsive：translate-middle-lg ``` - 透明度： ```javascript= //opacity- <div class="opacity-100">...</div> <div class="opacity-75">...</div> <div class="opacity-50">...</div> <div class="opacity-25">...</div> ``` - 陰影 (Shadows)： ```javascript= //shadow <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div> <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div> <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div> ``` - 尺寸 (Sizing)： - 預設包含 `25%, 50%, 75%, 100% 和 auto` ```javascript= //w-25、h-25 <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> ``` - 您還可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別。 ```javascript= //mw-100、mh-100 <img src="..." class="mw-100" alt="..."> //max-width <img src="..." class="mh-100" alt="..."> //max-height ``` - 相對於視窗(min) ```javascript= //min-vw-100 <div class="min-vw-100">Min-width 100vw</div> <div class="min-vh-100">Min-height 100vh</div> <div class="vw-100">Width 100vw</div> <div class="vh-100">Height 100vh</div> ``` - 間隔 (Spacing)：如果是適用於所有從 xs 到 xxl 斷點的間隔通用類別，就不需加入中斷點縮寫。因為從 min-width: 0 以上開始都將應用這些類別，因此不受 media query 的約束。但若是針對其餘斷點，就需要包含中斷點縮寫。對於 xs 使用固定格式 {property}{sides}-{size} 命名，對於 sm、md、lg、xl 和 xxl，使用格式 {property}{sides}-{breakpoint}-{size} 命名。 *property* 設定: - `m` - 設定 margin 的類別 - `p` - 設定 padding 的類別 *sides* 設定: - `t` - 設定 margin-top 或是 padding-top 的類別 - `b` - 設定 margin-bottom 或是 padding-bottom 的類別 - `s` - (start) 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right - `e` - (end) 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left - `x` - 同時設定 *-left 和 *-right - `y` - 時設定 *-top 和 *-bottom - `blank(空白)` - 同時設定 margin 或 padding 在元素的四個邊緣 *size* 設定: - `0` - 設定 margin 或是 padding 為 0 - `1` - (預設) 設定 margin 或是 padding 為 $spacer * .25 //4 - `2` - (預設) 設定 margin 或是 padding 為 $spacer * .5 //8 - `3` - (預設) 設定 margin 或是 padding 為 $spacer = 1 rem //16 - `4` - (預設) 設定 margin 或是 padding 為 $spacer * 1.5 //24 - `5` - (預設) 設定 margin 或是 padding 為 $spacer * 3 //48 - `auto` - 設定 margin 為 auto margin可以設為負值： [https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding](https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding) 自訂： ```sass $spacers: ( 0: 0, 1: $spacer * 0.25, //4 2: $spacer * 0.5, //8 25: $spacer * 0.75, //12 3: $spacer, //16 35: $spacer * 1.25, //20 4: $spacer * 1.5, //24 5: $spacer * 2, //32 6: $spacer * 2.5, //40 7: $spacer * 3, //48 l60: $spacer * 3.75, //60 l64: $spacer * 4, //64 ) !default; ``` ```javascript= //複製貼上用 0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5, 25: $spacer * 0.75, 3: $spacer, 35: $spacer * 1.25, 4: $spacer * 1.5, 5: $spacer * 2, 6: $spacer * 2.5, 7: $spacer * 3, l60: $spacer * 3.75, l64: $spacer * 4, ``` - 文字大小：對應.h1–.h6，有1~6(大~小) ```javascript= <p class="fs-1">.fs-1 text</p> //2.5rem(40px) <p class="fs-2">.fs-2 text</p> //2rem(32px) <p class="fs-3">.fs-3 text</p> //1.75rem <p class="fs-4">.fs-4 text</p> //1.5rem <p class="fs-5">.fs-5 text</p> //1.25rem <p class="fs-6">.fs-6 text</p> //1rem ``` ```sa 六角的倍數： $h1-font-size: $font-size-base * 4; //64px $h2-font-size: $font-size-base * 3; //48px $h3-font-size: $font-size-base * 1.75; //28px $h4-font-size: $font-size-base * 1.5; //24px $h5-font-size: $font-size-base * 1.25; //20px $h6-font-size: $font-size-base; //16px $h7-font-size: $font-size-base * 0.875 ;//14px，同<small> $h8-font-size: $font-size-base * 0.75 ;//12px 6: $h6-font-size, 7: $h7-font-size, 8: $h8-font-size, $display-font-sizes: ( 1: 5rem, //80 2: 4.5rem, //72 3: 4rem, //64 4: 3.5rem, //56 5: 3rem, //48 6: 2.5rem, //40 ) !default; ``` - 文字截斷(Text truncation)：.text-`truncate`：以透過刪節號截斷文字。需為 display: inline-block 或是 display: block。父層須限制寬度 - 文字顏色： ```javascript= //text-primary <p class="text-primary">.text-primary</p> ``` - 文字對齊： ```javascript= //text-start <p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> (text-md-start) ``` - 換行：使用 .text-nowrap 強制文字不換行。 ```javascript= //text-wrap、text-nowrap <div class="badge bg-primary text-wrap" style="width: 6rem;"> <div class=" bd-highlight text-nowrap" style="width: 8rem;"> ``` - 大小寫變換： ```javascript= //text-uppercase <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> //只有將第一個字母轉為大寫，而其他字母不受影響。 ``` - 標題字：當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、更細、稍具有風格化的標題樣式。有1~6(大~小) ```javascript= //display-1 <h1 class="display-1">Display 1</h1> ``` - 行內 HTML5 元素的格式：您可以使用==mark==標籤強調文本。 `<mark>` ~~這行文本將被視為已刪除的文本。~~ `<del>` 這行文本旨在被視為不再準確。 `<s>` 這行文本旨在被視為對文檔的補充。 `<ins>` ++這行文本將呈現為帶下劃線。++ `<u>` <span style="font-size:14px">這行文本應被視為精美的印刷品。</span> `<small>` **此行呈現為粗體文本。** `**<strong>**`( ctrl + b ) *此行呈現為斜體文本。* `*<em>*`( ctrl + i ) 請注意，這些標籤目的目的： - `<mark>` 代表被標記的重點是文本，以供參考或標記。 - `<small>` 代表旁注和小字體，例如版權聲明和版權文字。 - `<s>` 不再代表相關或不再準確的元素。 - `<u>` 代表一定範圍的行內文字，應表現出其具有非文本文字的方式。如果你只是想在文本上加入樣式，你應該改用以下幾類： - .mark與`<mark>`風格一致。 - .small與`<small>`風格一致。 - .text-decoration-underline與`<u>`風格一致。 - .text-decoration-line-through與`<s>`風格一致。 - 粗細和斜體：font-weight 或 font-style。font-style 通用類別的縮寫為 .fst-*， font-weight 通用類別的縮寫為 .fw-*。 ```javascript= //font-weight <p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> //font-style <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p> ``` - 行高(line height)： ```javascript= <p class="lh-1">This is a long paragraph written to show how the line-heigh</p> <p class="lh-sm">This is a long paragraph written to show how the line-height</p> <p class="lh-base">This is a long paragraph written to show how the line-height</p> <p class="lh-lg">This is a long paragraph written to show how the line-height</p> ``` - 重置色彩：使用 .text-reset 來重置一個文字或連結色彩，以便它們繼承父層的顏色。 ```javascript= //text-muted <p class="text-muted"> //柔和的文字 Muted text with a <a href="#" class="text-reset">reset link</a>. </p> ``` - 文字裝飾： ```javascript= //text-decoration-none <p class="text-decoration-underline">This text has a line underneath it.</p> //底線 <p class="text-decoration-line-through">This text has a line going through it.</p> //刪除線 <a href="#" class="text-decoration-none">This link has its text decoration removed</a> ``` - 文字排版： - 無樣式：ul>li ```javascript= <ul class="list-unstyled"> <li>This is a list.</li> <li>It appears completely unstyled.</li> <li>This may still come in handy in some situations.</li> </ul> ``` - 改為inline( 橫向排列 )： ```javascript= <ul class="list-inline"> <li class="list-inline-item">This is a list item.</li> <li class="list-inline-item">And another one.</li> <li class="list-inline-item">But they're displayed inline.</li> </ul> ``` - 表格： ```javascript= <table class="table table-dark table-striped table-hover"> //表格顏色、條紋間距、hover變色 <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> </tr> </thead> <tbody> <tr class="table-active"> //用於凸顯整行 <th scope="row" class="table-active">1</th> //或是凸顯一格 <td>Mark</td> </tr> </tbody> </table> <table class="table table-bordered border-primary table-borderless"> //邊框、藍色邊框、無邊框 <div class="table-responsive"> //響應式表格( 要包在外面 ) <table class="table"> ... </table> </div> <table class="table align-middle"> //垂直置中 <thead> <tr> ... </tr> </thead> ``` - 表單： - 一般表單： ```javascript= <div class="mb-3"> <label for="formFileMultiple" class="form-label">Multiple files input example</label> //mb-1 <input class="form-control" type="file" id="formFileMultiple" multiple> </div> ``` - 融合標籤與input的一體成形表單： ```javascript= <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> ``` - 可輸入的下拉式選單： ```javascript= <label for="exampleDataList" class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> <datalist id="datalistOptions"> <option value="San Francisco"> <option value="New York"> </datalist> ``` - 下拉式選單： ```javascript= <select class="form-select" aria-label="Default select example"> //<select class="form-select-lg" aria-label="Default select example"> //<select class="form-select-sm" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> </select> ``` - 非表單的下拉選單( 要BS的JS )： ```javascript= <div class="input-group mb-3"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> //分隔線 <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> ``` - 勾選或單選： ```javascript= <div class="form-check form-switch form-check-inline"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Default checkbox </label> </div> //使用 .form-switch 類別來呈現切換開關。 //透過把 .form-check-inline 加到任何 .form-check 來將核取方塊或選項按鈕組合放到同一水平行上。 ``` - 調整bar： ```javascript= <label for="customRange3" class="form-label">Example range</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> ``` - 把多個input整合成一行： ```javascript= <div class="input-group mb-3"> //<div class="input-group input-group-sm mb-3"> //<div class="input-group input-group-lg mb-3"> <input type="text" class="form-control" placeholder="Username" aria-label="Username"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Server" aria-label="Server"> </div> ``` - 表單驗證： ```javascript= <form class="was-validated"> <div class="col-md-4"> <label for="validationCustom01" class="form-label">First name</label> <input type="text" class="form-control" id="validationCustom01" value="Mark" required> <div class="valid-feedback"> Looks good! </div> </div> </form> // .is-invalid 和 .is-valid 可以代表驗證成功或失敗 ``` - 垂直對齊 (Vertical alignment)：(inline限定) 使用 vertical-alignment 通用類別改變元素的對齊。請注意，垂直對齊僅影響 inline、inline-block、inline-table、和 table 元素。 <u>若需要讓非行內元素的內容垂直置中（如 `<div>` 等等），請使用我們的 flex box 通用類別。</u> ```javascript= //align-middle <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> ``` - 可視性 (Visibility)：使用 visibility: hidden ```javascript= <div class="visible">...</div> <div class="invisible">...</div> //隱藏 <div class="md-invisible">...</div> //要去utlities加responsive ``` - `display: none` vs `visibility: hidden`差別： none：使用none的時候，該元素會被移除而導致畫面跳一下 hidden：該元素佔用空間持續存在，隱藏時不會跳一下 ## components(元件) - 麵包屑： ```javascript= //breadcrumb <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> ``` - 自訂屬性： [https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#states](https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#states) 如透明度：貼在_utilities.scss ```sass "opacity": ( property: opacity, responsive: true, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ``` - 徽章badge( 小圓點標籤 )：[https://getbootstrap.com/docs/5.0/components/badge/](https://getbootstrap.com/docs/5.0/components/badge/) - modal關閉按鈕顏色： class="`btn-close` `btn-close-white`" //X按鈕有分為黑色、白色 - 進度線( progress )：

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.