Bootstrap 5 是最受歡迎的前端框架之一，它帶來了一系列有用的組件和實用程序，可幫助開發人員快速構建響應靈敏且具有視覺吸引力的網站。

牌

卡片是 Bootstrap 5 中的多功能元件，可讓您以乾淨、有組織的方式顯示內容。它們非常適合以美觀且實用的方式展示資訊。

基本結構

基本卡片由類別為 .card 的容器組成，其中包含卡片頁首、正文和頁尾等元素。

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

客製化卡片

您可以廣泛自訂卡片：

• 圖片：使用 .card-img-top 或 .card-img-bottom 新增映像。
• 版面配置：使用卡片組、組或列進行不同的版面配置。
• 顏色：利用上下文類，如 .bg-primary、.text-white。

  
Header
  

    
Primary card title
    
Text content goes here.
  

使用案例

• 使用者個人資料：用頭像顯示使用者資訊。
• 產品清單：展示有圖像和描述的產品。
• 部落格文章：用標題和摘錄總結文章。

日期選擇器

雖然 Bootstrap 5 不包含本機日期選擇器，但使用 Tempus Dominus 或 Bootstrap Datepicker 等第三方函式庫整合一個日期選擇器非常簡單。

執行

首先，包含所需的 CSS 和 JS 檔案：

然後，初始化日期選擇器：

自訂選項

• 格式：自訂日期格式。
• 開始和結束日期：限制可選擇的日期範圍。
• 主題：應用不同的風格。

側邊欄

側邊欄對於導航至關重要，尤其是在複雜的 Web 應用程式中。

建立響應式側邊欄

您可以使用 Bootstrap 的網格系統和折疊組件來建立響應式側邊欄。

互動式側邊欄

透過加入互動來增強使用者體驗：

• 懸停效果：使用CSS突顯選單項目。
• 可折疊選單：實現點擊時展開的子選單。
• 圖示：使用 Font Awesome 或 Bootstrap Icons 合併圖示。

複選框

複選框允許使用者從一組中選擇多個選項。

設定複選框樣式

Bootstrap 5提供自訂複選框樣式：

  
    Default checkbox
  

複選框組

分組複選框以更好地組織：

  Select Options:
  

    
  

頁尾

頁腳對於提供額外的導航和資訊至關重要。

設計頁腳

創造一個簡單的頁尾：

黏頁腳

將頁腳黏在底部：

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

結論

掌握這些 Bootstrap 5 元件可以顯著增強 Web 專案的功能和美觀性。透過了解如何自訂和實作Cards、Datepickers、Sidebars、Checkboxes 和Footers，您可以建立使用者友善且具有視覺吸引力的網站。不斷嘗試不同的樣式和配置，找到最適合您的特定需求的樣式和配置。

延伸閱讀：

• Bootstrap官方文件
• 自訂 Bootstrap