探索引導元件-css教學-PHP中文網

探索引導元件

Mary-Kate Olsen

發布： 2024-09-30 16:12:02

原創

557 人瀏覽過

Explore bootstrap omponents

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

牌

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

基本結構

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

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

登入後複製

客製化卡片

您可以廣泛自訂卡片：

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

<div class="card text-white bg-primary mb-3">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Text content goes here.</p>
  </div>
</div>

登入後複製

使用案例

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

日期選擇器

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

執行

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

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">

<!-- Include Datepicker CSS -->
<link rel="stylesheet" href="path/to/datepicker.css">

<!-- Include jQuery (required for some datepickers) -->
<script src="path/to/jquery.min.js"></script>

<!-- Include Bootstrap JS -->
<script src="path/to/bootstrap.bundle.min.js"></script>

<!-- Include Datepicker JS -->
<script src="path/to/datepicker.js"></script>

登入後複製

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

<input type="text" class="form-control" id="datepicker">

<script>
  $(document).ready(function(){
    $('#datepicker').datepicker({
      format: 'mm/dd/yyyy'
    });
  });
</script>

登入後複製

自訂選項

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

側邊欄

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

建立響應式側邊欄

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

<nav id="sidebarMenu" class="collapse d-lg-block sidebar">
  <div class="position-sticky">
    <ul class="nav flex-column">
      <!-- Menu Items -->
    </ul>
  </div>
</nav>

登入後複製

互動式側邊欄

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

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

複選框

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

設定複選框樣式

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

登入後複製

複選框組

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

<div class="form-group">
  <label>Select Options:</label>
  <div class="form-check">
    <!-- Checkbox Items -->
  </div>
</div>

登入後複製

頁尾

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

設計頁腳

建立一個簡單的頁腳：

<footer class="bg-light text-center text-lg-start">
  <div class="text-center p-3">
    © 2023 Your Company
  </div>
</footer>

登入後複製

黏頁腳

使頁腳黏在底部：

html, body {
  height: 100%;
}

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

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

登入後複製

<body class="d-flex flex-column">
  <div id="page-content">
    <!-- Main content -->
  </div>
  <footer id="sticky-footer" class="bg-dark text-white-50">
    <div class="container text-center">
      © 2023 Your Company
    </div>
  </footer>
</body>

登入後複製