# Bootstrap 整理
###### tags: `BootStrap`
Date : ---------

斷點| 語法 | 作用 | 分類|* 的值|
|---| -------- | -------- | -------- | -------- |
| | .row | 行 | 排版>排版 |
|+| .col-* | 欄 | 排版>排版 | 數字 1-12|
|| sm / md/ lg/ xl/ xxl | 斷點 | 排版>排版 |
|+| .container | 容器 | 排版>排版 |
|+| .align-items-\*| 垂直對齊 | 排版>欄 |start/ center/ end|
|+| .align-self-\*|彈性項目自行對齊| 排版>欄 | start/ center/ end|
|+| .justify-content-\* | 水平對齊 | 排版>欄 | start/ center/ end/ between/ evenly/ around |
|+| .d-block | display:block | -------- |
|+| .d-none | display:none | -------- |
|+| .d-flex| display:flex | -------- |
|+|.d-inline-block||
|+|.d-inline||
|+|.d-grid||排版>CSS Grid|
|+|.d-table||
|+|.d-inline-flex||
|+|.d-table-cell||
|+|.d-table-row||
|+| .order-\* | 排序 | 排版>排序 |數值/ frist |
|+| .offset-\* | 欄的推移 | 排版 |數值|
||.blockquote|引用來源|排版>文字排版| 用於\<blockquote>標籤|
||.gy-\* | 欄之間的 padding | 排版>Gutters |數值|
||.gx-\* |欄之間的 padding| 排版>Gutters |數值|
||.g-\* |欄之間的 padding| 排版>Gutters |數值|
||.address | 地址 | 內容 |
||.sub | 上標 | 內容 |
||.sup | 下標 | 內容 |
||.display-\*|文字標題| 內容 | 1-6 |
||.lead | 前導主題 | 內容>文本元素 |
||.mark | | 內容>文本元素 |
||.small | | 內容>文本元素 |
||.text-decoration-underline||內容>文本元素| |
||.text-decoration-line-through | | 內容>文本元素 |
||\<abbr>| 縮寫 | 內容 |
|| .img-fluid | 圖片等比滿版 |內容>圖片 |
||.img-thumbnail| 圖片圓角| 內容>圖片 |
|| | 圖片對齊 | 內容>圖片 |
|| \<thead> | 表格t-head | 內容>表格 |
|| \<tbody> | 表格t-body | 內容>表格 |
|| \<tfoot> | 表格t-foot | 內容>表格 |
|| .table-\* | 表格(變數)顏色 | 內容>表格 | primary/ info/ secondary/ success/ danger/ warning/ light/ dark|
|| .table-striped | 表格條紋樣式 | 內容>表格 |
|| .table-hover | 表格滑入的狀態 | 內容>表格 |
|| .table-bordered | 表格四邊加上邊框 | 內容>表格 |
||.table-borderless | 無框表格 | 內容>表格 |
|| .border-\* | 邊框顏色 | 內容>表格 | primary/ info/ secondary/ success/ danger/ warning/ light/ dark|
|| .d-inline-flex | | 通用類別-Flex |
|| .flex-row-\* | flex水平 | 通用類別-Flex | reverse|
|| .flex-column-\*| flex垂直 | 通用類別-Flex | reverse|
|+| .flex-fill| 填滿/ flex: 1 1 auto = flex: auto，內容太多可以撐開欄位寬度| 通用類別-Flex | |
|+| .flex-grow-1 | 伸縮值/內容不會撐開欄位寬度 | 通用類別-Flex | |
|| .me-auto| margin-right | 通用類別-Flex | |
|| .ms-auto| margin-left | 通用類別-Flex | |
|+| .flex-wrap| 進行換行 | 通用類別-Flex | reverse |
|+| .bg-\*| 背景顏色 | 通用類別 | primary/ info/ secondary/ success/ danger/ warning/ light/ dark/ body/ white/ transparent |
|| .bg-gradient| 背景漸層 | 通用類別 | |
|| .bg-opacity-\*| 背景透明度 | 通用類別 | 數值 |
|| .border-\*| 增加邊框 | 通用類別 | top/bottom/end/start |
|| .border-\*-0| 減少邊框 | 通用類別 | top/bottom/end/start |
|| .border-\*| 邊框粗細 | 通用類別 | 數值 |
|| .rounded-\*| Border-radius | 通用類別 | top/bottom/end/start/circle/pill |
|+| .text-\*| 文字顏色 | 通用類別 | primary/ info/ secondary/ success/ danger/ warning/ light/ dark/ body/ white/ transparent |
|| .d-print-non|螢幕出現(列印隱藏) | 通用類別 | |
|| .d-print-block| 列印出現(螢幕隱藏) | 通用類別 | |
|+| .float-\*| 浮動 | 通用類別 | none/end/start |
|| .user-select-all| 使用者點選時，這個段落將會被全選 | 通用類別 | |
|| .user-select-auto| 這個段落具有預設的選取行為 | 通用類別 | |
|| .user-select-none| 點選的時候，此段落將不會被選取 | 通用類別 | |
|| .pe-none| 連結不可被點 | 通用類別 | |
|| .pe-auto| 預設 | 通用類別 | |
|| .particle| | 通用類別 | |
|| .opacity-\*| 透明度 | 通用類別 |0-100 |
|| .position-\*| Position | 通用類別 |static/ relative/ absolute/ fixed/ sticky |
|| .{property}-{position}| 排列位置 | 通用類別 | |
|| .translate-middle| translateX(-50%) 與 translateY(-50%) | 通用類別 | |
|+| .w-\*| 寬度width | 通用類別 | auto/ 0-100% |
|| .h-\*| 高度 height | 通用類別 | auto/ 0-100% |
|| .p-\*| padding | 通用類別 | auto/ 0-5 |
|| .m-\*| margin | 通用類別 | auto/ 0-5 |
|| .ps-\*| padding-left | 通用類別 | auto/ 0-100% |
|| .ms-\*| margin-left | 通用類別 | auto/ 0-100% |
|| .mt-\*| margin-top | 通用類別 | auto/ 0-100% |
|| .pt-\*| padding-top | 通用類別 | auto/ 0-100% |
|| .mb-\*| bottom | 通用類別 | auto/ 0-100% |
|| .pb-\*| bottom | 通用類別 | auto/ 0-100% |
|| .me-\*| right | 通用類別 | auto/ 0-100% |
|| .pe-\*| right | 通用類別 | auto/ 0-100% |
|| .mx-\*| -left | 通用類別 | auto/ 0-100% |
|| .px-\*| -left | 通用類別 | auto/ 0-100% |
|| .my-\*| -right | 通用類別 | auto/ 0-100% |
|| .py-\*| -right | 通用類別 | auto/ 0-100% |
|+| .text-\*| 文字對齊 | 通用類別 | start/ end/ center|
|| .text-nowrap| 不換行 | 通用類別 | |
|| .text-lowercase| 小寫 | 通用類別 | |
|| .text-uppercasr| 大寫 | 通用類別 | |
|| .text-capitalize| 第一個字大寫 | 通用類別 ||
||.fs-\*|文字大小fontSize|通用類別|1-6|
||.link-綴詞|連結顏色|工具||
||.ratio|比例|工具|比例請詳見筆記/文件|
||.fixed-top|固定上方|工具||
||.fixed-bottom|固定下方|工具||
||.sticky-top||工具||
||.vstack|垂直堆疊|工具||
||.hstack|水平堆疊|工具||
||.gap-\*|間隔|通用類別|詳見文件|
||.vr|產生分隔線|工具||
||.stretched-link|連結延伸|工具
||.text-truncate |文字截斷|工具||
|| .accordion-flush |移除預設 background-color、外框和圓角使該手風琴能和父容器緊鄰|元件>手風琴||
||form-control|重製外觀 appcearance :none ，會是寬度 100% block 並調整內距、文字、顏色...|表單>表單控制||
||.form-control-\*|表單尺寸>表單控制|表單|sm/ lg|
||布林屬性 disabled|禁用>表單控制|表單||
||布林屬性 readonly|僅能閱讀|表單>表單控制||
||.form-control-plaintext|僅能閱讀的文本|表單>表單控制||
||.form-select|下拉選擇功能表|表單>選擇功能表||
|| 布林屬性 multiple|展開|表單>選擇功能表||
||.form-check|checkbox|表單>核取方塊和選項按鈕||
||.form-switch|切換開關|表單>核取方塊和選項按鈕||
||.form-check||表單>核取方塊和選項按鈕||
|| .form-check-inline||表單>核取方塊和選項按鈕||
||.btn-check|切換按鈕|表單>核取方塊和選項按鈕||
|| .form-range||表單>範圍||
||.input-group||表單>Input 群組||
||.form-floating ||表單>浮動標籤||
||.needs-validation||表單>驗證||
||.alert-綴詞|警報|元件>警報||
||.badge|標籤|元件>標籤||
||.breadcrumb|麵包屑|元件||
||.btn|預先定義的按鈕樣式|元件>按鈕|也可以在 \<a> 或 \<input> 元素上使用這些 Class（儘管有些瀏覽器可能會使用稍微不同的渲染）|
||.btn-綴詞||元件>按鈕||
||.btn-outline-綴詞|Out line 按鈕樣式|元件>按鈕||
||.btn-\*|按鈕尺寸|元件>按鈕|sm/ lg|
||.disabled|視覺上看起來被禁用|元件>按鈕||
||.active|預設顯示|||
||data-bs-toggle="button" |切換按鈕|元件>按鈕||
||.btn-group|按鈕群組|元件>按鈕群組||
||.btn-outline-綴詞|outline樣式|元件>按鈕群組||
||.btn-group-\*|尺吋|元件>按鈕|sm/ lg|
||.list-group|列表群組|元件>列表群組||
||.list-group-item|群組內的 item|元件>列表群組|可加 .active|
||.list-group-item-action|hover|元件>列表群組||
|| .list-group-flush|移除部分邊框及圓角，以在父容器中 (如：卡片) 產生邊緣貼齊的列表群組|元件>列表群組||
||.list-group-numbered|編號|元件>列表群組||
|+|.list-group-horizo ntal |將列表群組在所有斷點的排版從垂直更改為水平|元件>列表群組||
||list-group-item-綴詞|元件>列表群組||
||.card|卡片|元件>卡片||
||.card-header|卡片結構|元件>卡片||
||.card-body|卡片結構|元件>卡片||
||.card-footer|卡片結構|元件>卡片||
||.card-title|卡片主標title|元件>卡片||
||.card-link|卡片連結link樣式|元件>卡片||
||.card-subtitle|卡片次標subtitle|元件>卡片||
||.card-img-top|把圖片放在卡片的頂部|元件>卡片||
||.card-img-bottom|把圖片放在卡片的底部|元件>卡片||
||.card-text|文字內容可以添加到卡片|元件>卡片||
||.text-reset|重置一個文字或連結色彩|通用類別>文字||
||.card-img-overlay|將圖片轉換為卡片背景，並疊加卡片的文字|元件>卡片||
||.card-group|卡片群組|元件>卡片||
||.carousel|輪播圖|元件>輪播||
||.carousel-indicators|下方指示器|元件>輪播|顯示輪播的圖片數量、並可以點選跳至該圖播放。|
||.carousel-inner|放圖片的容器|元件>輪播||
||.carousel-item|放圖片的容器|元件>輪播||
||.carousel-control-prev|上一張按鈕|元件>輪播|data-bs-target #id 須跟輪播圖一致|
||.carousel-control-next|下一張按鈕|元件>輪播|data-bs-target #id 須跟輪播圖一致|
||.carousel-caption|字幕(字在圖上方)|元件>輪播||
||data-bs-interval="毫秒"|設定輪播秒數，放在.carousel|元件>輪播| |
||data-bs-touch="\*"|手機裝置觸控設定|元件>輪播|true/false|
||.carousel-fade|淡入淡出|元件>輪播||
||.slide|滑動效果|元件>輪播||
||.carousel-dark|深色模式，文字會變黑|元件>輪播||
||.carousel-fade|淡入淡出|元件>輪播||
||.btn-close|關閉(X)的按鈕樣式|元件>關閉按鈕||
||.btn-close-white|關閉(X)的按鈕樣式(白色)|元件>關閉按鈕||
||.collapse|隱藏內容。|元件>摺疊||
||.collapsing|會在轉換的過程中被套用。|元件>摺疊||
||.collapse.show |顯示內容。|元件>摺疊||
||data-bs-toggle="collapse"|觸發摺疊功能|元件>摺疊||
||.collapse-horizontal|水平折疊|元件>摺疊||
||.modal|互動視窗|元件>互動視窗||
||.modal-content|內容|元件>互動視窗||
||.modal-header||元件>互動視窗||
||.modal-title|標題|元件>互動視窗||
||.modal-body|內文|元件>互動視窗||
||.modal-footer|按鈕|元件>互動視窗||
||data-bs-toggle="modal"|互動視窗功能|元件>互動視窗|
||data-bs-backdrop="static"|靜態背景|元件>互動視窗||
||.modal-dialog-scrollable|滾輪|元件>互動視窗||
||.modal-dialog-centered |水平垂直置中|元件>互動視窗||
||.modal-\*|尺寸1140px/預設500px/800px/300px|元件>互動視窗|xl/lg/sm|
||data-bs-dismiss="modal"|關閉 modal 視窗|元件>互動視窗||
||.modal-dialog |視窗下滑的效果|元件>互動視窗||
||.fade|淡入淡出|元件>互動視窗||
||.nav|導覽|元件>導覽與頁籤|應用在menu|
||.nav-item||元件>導覽與頁籤||
||.nav-link||元件>導覽與頁籤||
||.nav-tabs|分頁標籤|元件>導覽與頁籤||
||.nav-pills|膠囊狀樣式|元件>導覽與頁籤||
||.nav-fill|填充|元件>導覽與頁籤||
||.nav-justified|對齊|元件>導覽與頁籤||
||.tab-content|標籤內文父元素|元件>導覽與頁籤|
||.tab-pane|標籤內文子元素|元件>導覽與頁籤|
||.navbar|導覽列|元件>導覽列||
||.navbar-brand|導覽列LOGO位置|元件>導覽列||
||.navbar-expand|響應式|元件>導覽列||
||.navbar-dark|導覽列文字顯示"白色|元件>導覽列||
||.navbar-light|導覽列文字顯示"黑色|元件>導覽列||
||.navbar-toggler|導覽響應式摺疊icon(漢堡按鈕)|元件>導覽列||
||.navbar-nav|導覽列的頁籤|元件>導覽列||
||.navbar-collapse||元件>導覽列||
||.dropdown|下拉選單|元件>下拉選單||
||data-bs-toggle="dropdown"|||
||.dropdown-menu|下拉清單|元件>下拉選單||
|+| .dropdown-menu-end|選單靠右|元件>下拉選單||
|+| .dropdown-menu-start|選單靠左|元件>下拉選單|
||.dropdown-header|分類標題|元件>下拉選單
||.dropdown-item|下拉清單item|元件>下拉選單||
||.dropdown-divider|清單中分隔線|元件>下拉選單||
||.dropdown-toggle|white-space: nowrap;|元件>下拉選單||
||.dropdown-toggle-split|分割按鈕|元件>下拉選單||
||.dropdown-menu-dark|深色樣式|元件>下拉選單||
||.dropup|選單方向-向上|元件>下拉選單||
||.dropend|向右|元件>下拉選單||
||.dropstart|向左|元件>下拉選單||
|| data-bs-auto-close="fales"|限制點按鈕才可以關閉選單|元件>下拉選單||
||.pagination|分頁|元件>分頁||
||.page-item|分頁item|元件>分頁||
||.page-link|分頁link|元件>分頁||
||.progress|外層使用 .progress 來指定進度條的最大值|元件>進度條||
||.progress-bar|內層使用 .progress-bar 來指定進度條目前的值|元件>進度條||
||.progress-bar-striped |進度條-條紋樣式|元件>進度條||
||.progress-bar-animated|進度條-動態樣式|元件>進度條||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||
||||||

|loading|-|-|
|-|-|-|
|spinner-border|線條轉圈||
|spinner-grow|圓形漸層||
| .spinner-border-sm| 尺寸變化|loadding 屬於文字，可以直接使用文字樣式修改大小
| .spinner-grow-sm |尺寸變化
||

|data-bs-toggle|觸發功能||
|---|--|-|
|data-bs-toggle="collapse"|觸發摺疊功能|元件>摺疊|
|data-bs-toggle="modal"|觸發互動視窗功能|元件>互動視窗|
|data-bs-toggle="tab"|頁籤|元件>導覽與頁籤|
|data-bs-toggle="pill"|頁籤(藥丸樣式)|元件>導覽與頁籤|
|data-bs-toggle="dropdown"|下拉選單|元件>下拉選單|
|data-bs-toggle="popover"|彈出提示框|元件>彈出提示框
|data-bs-toggle="tooltip"|工具提示框|元件>工具提示框

|data-bs-dismiss|||
|-|-|-|
|data-bs-dismiss="modal"|關閉互動視窗|元件>互動視窗|
|data-bs-offset="10(水平位移量),20(垂直位移量)"|設定偏移|元件>下拉選單
|data-bs-reference="parent"|設定偏移|元件>下拉選單
|data-bs-content|提示框的內容|元件>彈出提示框
|data-bs-trigger="focus"|在下一次按鈕以外任何地方 click 收起 popover |元件>彈出提示框
|data-bs-trigger="hover"|滑鼠移動按鈕彈出， 移出消失。|元件>彈出提示框
| data-bs-trigger| 預設為 click ，必須點按鈕才會關閉popover|元件>彈出提示框
|data-bs-placement="right" /bottom /left /top |彈出視窗方向|元件>彈出提示框
|data-bs-placement="top"|放置位置 top/left/bottom/right|元件>工具提示框