---
# System prepended metadata

title: Bootstrap
tags: [HTML]

---

##    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;}
    