在 Bootstrap 4 中使用 .align-items-*-center 類在不同螢幕上將單行專案居中對齊      .讓我們看看如何在小、中、大螢幕尺寸上將單行上的彈性專案居中對齊 -在小螢幕上居中對齊   專案 1   專案 2   專案 3   專案 4 在中螢幕上居中對齊   專案 1   專案 2   專案 3   專案 4 在大螢幕上居中對齊   專案 1   專案 2   專案 3   ... 閱讀更多

在 Bootstrap 4 中使用 align-baseline 類將元素與父元素的基線對齊。設定 align-baselinec 類，如下面的程式碼片段所示 -現在在其中新增內容 -     演示基線 您可以嘗試執行以下程式碼以將元素與父元素的基線對齊 -示例線上演示       Bootstrap 示例                                   示例       這是演示文字       演示基線      

要設定元素具有圓角，請在 Bootstrap 4 中使用 rounded-bottom 類。設定 rounded-bottom 類 -在上面，我還設定了另一個類來設定元素的樣式 -.demo {   width: 100px;   height: 120px;   margin: 10px;   background-color: orange; }您可以嘗試執行以下程式碼以實現 rounded-bottom 類 -示例線上演示       Bootstrap 示例                                   示例       矩形       我們有兩個帶有圓角（底部）的矩形：                  

在 Bootstrap 4 中使用 flex-wrap 類來換行彈性專案。以下是換行彈性專案的程式碼片段 -   .   .  

要為 Bootstrap 卡片設定容器並將其設定為組，請使用 card-group 類。使用它並像下面這樣建立包含兩張 Bootstrap 卡片網格 -             演示文字！                          警告！           以下是使用 Bootstrap 建立網格（卡片組）的示例 -示例線上演示       Bootstrap 示例                             訊息組                             演示文字！                                         警告！                                        做得好！                                       已選中！                          

在 Bootstrap 中使用 .modal(“toggle”) 方法來切換模態框。如下所示，模態框在點選按鈕時生成 -$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });以下是上面使用的按鈕 -   模態框一 您可以嘗試執行以下程式碼以實現 modal(“toggle”) 方法 -示例線上演示       Bootstrap 示例                               示例     模態框一                                         ×             示例模態框                                 點選外部關閉它。                                 關閉                                   $(document).ready(function(){     $("#button1").click(function(){       $("#newModal").modal("toggle");     });   });  

使用 card-group 類在 Bootstrap 4 中建立一個卡片組 -                         讓我們在 Bootstrap 中建立一個像網格一樣的卡片組 -示例線上演示       Bootstrap 示例                             訊息組                             阿根廷大勝！                                         演示文字！                                       不要越界！                                       我做到了！                                       成功了！                    

在 Bootstrap 中使用 d-flex 類建立一個彈性容器。這裡，我設定了兩個彈性專案 -     一   二 您可以嘗試執行以下程式碼以實現 .d-flex 類 -示例線上演示       Bootstrap 示例                               理解彈性盒             一       二      

在 Bootstrap 中使用 .btn-outline-dark 類在按鈕上設定深色輪廓。以下是帶有深色輪廓的按鈕示例 -使用 btn-outline-dark 類將上述輪廓設定為按鈕，如下所示 -   提交 您可以嘗試執行以下程式碼以實現 btn-outline-dark 類 -示例線上演示       Bootstrap 示例                               Bootstrap 4     學習  btn-outline-dark 類用法：     提交  

在 Bootstrap 中使用 border-0 類可消除元素的所有邊框，如下所示 -   無邊框 我們還在上面設定了 CSS 樣式 -.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }您可以嘗試執行以下程式碼以實現 border-0 類 -示例線上演示       Bootstrap 示例                               .mystyle {       width: 120px;       height: 100px;       margin: 10px;       background: gray;     }             兩個矩形     橙色邊框     無邊框