Terokai omponen bootstrap

Bootstrap 5, salah satu rangka kerja bahagian hadapan yang paling popular, membawakan pelbagai komponen dan utiliti berguna yang membantu pembangun membina tapak web yang responsif dan menarik secara visual dengan cepat.

Kad

Kad ialah komponen serba boleh dalam Bootstrap 5 yang membolehkan anda memaparkan kandungan dengan cara yang bersih dan teratur. Ia sesuai untuk mempamerkan maklumat dengan cara yang menyenangkan dari segi estetika dan berfungsi.

Struktur Asas

Kad asas terdiri daripada bekas dengan kelas .kad, yang mengandungi elemen seperti pengepala, badan dan pengaki kad.

<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>

Menyesuaikan Kad

Anda boleh menyesuaikan kad secara meluas:

• Imej: Tambahkan imej menggunakan .card-img-top atau .card-img-bottom.
• Reka letak: Gunakan dek kad, kumpulan atau lajur untuk reka letak yang berbeza.
• Warna: Gunakan kelas kontekstual seperti .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>

Kes Penggunaan

• Profil Pengguna: Paparkan maklumat pengguna dengan avatar.
• Penyenaraian Produk: Pamerkan produk dengan imej dan penerangan.
• Catatan Blog: Ringkaskan artikel dengan tajuk dan petikan.

Pencari tarikh

Walaupun Bootstrap 5 tidak termasuk pemetik tarikh asli, penyepaduan satu adalah mudah menggunakan perpustakaan pihak ketiga seperti Tempus Dominus atau Bootstrap Datepicker.

Perlaksanaan

Pertama, masukkan fail CSS dan JS yang diperlukan:

<!-- 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>

Kemudian, mulakan pemetik tarikh:

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

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

Pilihan Penyesuaian

• Format: Sesuaikan format tarikh.
• Tarikh Mula dan Tamat: Hadkan julat tarikh yang boleh dipilih.
• Tema: Gunakan gaya yang berbeza.

Bar sisi

Bar sisi adalah penting untuk navigasi, terutamanya dalam aplikasi web yang kompleks.

Mencipta Sidebar Responsif

Anda boleh mencipta bar sisi responsif menggunakan sistem grid Bootstrap dan komponen runtuh.

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

Bar Sisi Interaktif

Tingkatkan pengalaman pengguna dengan menambahkan interaksi:

• Kesan Tuding: Gunakan CSS untuk menyerlahkan item menu.
• Menu Boleh Dilipat: Laksanakan submenu yang berkembang pada klik.
• Ikon: Menggabungkan ikon menggunakan Font Hebat atau Ikon Bootstrap.

Kotak semak

Kotak pilihan membolehkan pengguna memilih berbilang pilihan daripada satu set.

Menggayakan Kotak Semak

Bootstrap 5 menyediakan gaya kotak pilihan tersuai:

<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>

Kumpulan Kotak semak

Kotak pilihan kumpulan untuk organisasi yang lebih baik:

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

Pengaki

Pengaki adalah penting untuk menyediakan navigasi dan maklumat tambahan.

Merekabentuk Pengaki

Buat pengaki mudah:

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

Pengaki Melekit

Jadikan pengaki melekat pada bahagian bawah:

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>

Kesimpulan

Menguasai komponen Bootstrap 5 ini boleh meningkatkan fungsi dan estetika projek web anda dengan ketara. Dengan memahami cara untuk menyesuaikan dan melaksanakan Kad, Penetik Tarikh, Bar Sisi, Kotak Semak dan Pengaki, anda boleh mencipta laman web yang mesra pengguna dan menarik secara visual. Teruskan bereksperimen dengan gaya dan konfigurasi yang berbeza untuk mencari yang paling sesuai untuk keperluan khusus anda.

Bacaan Lanjut:

• Dokumentasi Rasmi Bootstrap
• Menyesuaikan Bootstrap

Atas ialah kandungan terperinci Terokai omponen bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!