## 20241008(三)Day7

### [今日學習]
##### Model-對話框
data-bs-toggle="modal"、.modal-dialog、.modal-content
.modal-header、.modal-body、.modal-footer、.modal-title
.btn-close、data-bs-dismiss="modal"、aria-label="close"
data-bs-backdrop="static"設定無法透過點擊背景就關閉Modal(預設是會)

##### Card
.card-header、.card-body、.card-footer
.card-title、.card-text

##### nav
.nav-link
.nav-fill、.nav-item
.nav-pills

導覽被點選時，出現對應的資訊
.tab-content、.tab-pane製作內容
data-bs-toggle="pill"

##### Toast-點擊跳出提示窗
- .toast、.toast-header、.toast-body
- data-bs-dismiss="toast"

### [重點小結]
#### button & 對話框
##### 類別
1.popover：button周邊跳出提示窗
2.collapse：button平移，以顯示/隱藏內容
3.model：跳出對話框，ex：經典取消/確認對話框
4.card：展示窗
5.toast：點擊button，滑動跳出回覆內容，一段時間自動消失，ex：line右下角好友回覆提示窗
##### 常用 屬性&值
data-bs-toggle="*"，指定接下來寫的內容是什麼類別
.*-header框首、.*-body內容、.*-fotter框尾，基本框架
.*-title小標題、.*-text小標題內容

X，關掉提示窗的相關語法(皆寫在同一元素)
type="button"、.btn-close、data-bs-dismiss="*"、aria-label="close"

### [解惑]
##### 圖片過大怎麼放進容器
- class="img-fluid"圖片一般用這個解決
- class="container"這個似乎也能同樣效果，不過老師建議用在div之類的區塊元素上面

.img-fluid {
max-width: 100%;
height: auto;}

.container,.container-fluid {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: auto;
margin-left: auto;}