Bootstrap4 模态框
模态框（ Modal ）是覆寫在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的内容，可以在不離開父窗體的情況下有一些互動。子窗 體可提供資訊互動等。 可以通過添加 .modal-sm 類來建立一個小模态框， .modal-lg 類可以建立一個大模态框。 尺寸類放在 <div> 元素的 .modal-dialog 類後
Bootstrap4 提示框
提示框是一個小小的彈窗，在滑鼠移動到元素上顯示，滑鼠移到元素外就消失。 通過向元素添加 data-toggle="tooltip" 來來建立提示框。 title 屬性的内容為提示框顯示的内容 注意 : 提示框要寫在 jQuery 的初始化代碼裡 : 然後在指定的元素上調用 tooltip() 方法
使用 data-placement 屬性來設定提示框顯示的方向 : top, bottom, left 或 right
Bootstrap4 彈出框
彈出框控件類似于提示框，它在滑鼠點選到元素後顯示，與提示框不同的是它可以顯示更多的内容。 通過向元素添加 data-toggle="popover" 來來建立彈出框。 title 屬性的内容為彈出框的标題， data-content 屬性顯示了彈出框的文本内容 注意 : 彈出框要寫在 jQuery 的初始化代碼裡 : 然後在指定的元素上調用 popover() 方法
使用 data-placement 屬性來設定提示框顯示的方向 : top, bottom, left 或 right
使用 data-trigger="focus" 屬性來設定在滑鼠點選元素外部區域來關閉彈出框 如果你想實作在滑鼠移動到元素上顯示，移除後消失的效果，可以使用 data-trigger 屬性，并設定值為 "hover"
Bootstrap4 滾動監聽(Scrollspy)
滾動監聽（ Scrollspy ）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目标。其基本的實作是随着您的滾動。 想要監聽的元素（通常是 body ）添加 data-spy="scroll" 然後添加 data-target 屬性，它的值為導航欄的 id 或 class ( .navbar ) 。這樣就可以聯系上可滾動區域 注意可滾動項元素上的 id （ <div id="section1"> ） 必須比對導航欄上的連結選項 （ <a href="#section1" target="_blank" rel="external nofollow" >) 。 可選項 data-offset 屬性用于計算滾動位置時，距離頂部的偏移像素。 預設為 10 px 。 設定相對定位 : 使用 data-spy="scroll" 的元素需要将其 CSS position 屬性設定為 "relative" 才能起作用。
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以讓我們不用寫 CSS 代碼就能實作想要的效果
邊框 1.添加或移除邊框
2.邊框顔色
3.邊框圓角設定
浮動 1.float-right 類用于設定元素右浮動 2.float-left 設定元素左浮動 3.clearfix 類用于清除浮動
響應式浮動 可以設定浮動 ( .float-*-left|right - * 為 sm, md, lg 或 xl) 的方向依賴于螢幕的大小
居中對齊 使用 .mx-auto 類來設定居中對齊
寬度 元素上使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設定寬度
高度 元素上使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設定高度
Bootstrap4 Flex（彈性）布局
Bootstrap 3 與 Bootstrap 4 最大的差別就是 Bootstrap 4 使用彈性盒子來布局，而不是使用浮動來布局 以下執行個體使用 d-flex 類建立一個彈性盒子容器，并設定三個彈性子元素
建立顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類
水準方向 1.flex-row 可以設定彈性子元素水準顯示，這是預設的。 2.使用 .flex-row-reverse 類用于設定右對齊顯示，即與 .flex-row 方向相反
垂直方向 1.flex-column 類用于設定彈性子元素垂直方向顯示 , 2.flex-column-reverse 用于翻轉子元素
内容排列 .justify-content-* 類用于修改彈性子元素的排列方式， * 号允許的值有： start ( 預設 ), end, center, between 或 around
等寬 .flex-fill 類強制設定各個彈性子元素的寬度是一樣的
擴充 .flex-grow-1 用于設定子元素使用剩下的空間。以下執行個體中前面兩個子元素隻設定了它們所需要的空間，最後一個擷取 剩餘空間
排序 .order 類可以設定彈性子元素的排序，從 .order-1 到 .order-12 ，數字越低權重越高 ( .order-1 排在 .order-2 之前 )
外邊距 1.mr-auto 類可以設定子元素右外邊距為 auto ，即 margin-right: auto!important; ， 2.ml-auto 類可以設定子元素左外邊距為 auto ，即 margin-left: auto!important;:
包裹 彈性容器中包裹子元素可以使用以下三個類： .flex-nowrap ( 預設 ), .flex-wrap 或 .flex-wrap-reverse 。設定 flex 容器是單行或 者多行
内容對齊 .align-content-* 控制在垂直方向上如何去堆疊子元素，包含的值有： .align-content-start ( 預設 ), .align-content end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch 。 這些類在隻有一行的彈性子元素中是無效的。
子元素對齊 要設定單行的子元素對齊可以使用 .align-items-* 類來控制，包含的值有： .align-items-start, .align-items-end, .align items-center, .align-items-baseline, 和 .align-items-stretch ( 預設 )
指定子元素對齊 設定指定子元素對齊對齊可以使用 .align-self-* 類來控制，包含的值有： .align-self-start, .align-self-end, .align-self center, .align-self-baseline, 和 .align-self-stretch ( 預設 )
Bootstrap4 多媒體對象
Bootstrap 提供了很好的方式來處理多媒體對象（圖檔或視訊）和内容的布局。應用場景有部落格評論、微網誌等 基礎多媒體對象 要建立一個多媒體對象，可以在容器元素上添加 .media 類，然後将多媒體内容放到子容器上，子容器需要添加 .media body 類，然後添加外邊距，内邊距等效果 想将頭像圖檔顯示在右側，可以在 .media-body 容器後添加圖檔
多媒體對象嵌套 多媒體對象可以多個嵌套（一個多媒體對象中包含另外一個多媒體對象） 要嵌套多媒體對象，可以把新的 .media 容器放到 .media-body 容器中
可以使用 align-self-* 相關類來設定多媒體對象的圖檔顯示位置