Alat Umum Bootstrap 5

Kelas Utilities / Helper

Bootstrap 5 mempunyai banyak kelas utility/helper yang dapat digunakan untuk menata gaya elemen tanpa memerlukan kode CSS.

Garis

Gunakan kelas garisan untuk menambah atau menghapus garisan elemen:

Contoh

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Cuba Sendiri

边框宽度

Penggunaan .border-1 到 .border-5 来改变边框的宽度：

Contoh

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Cuba Sendiri

边框颜色

使用任意上下文边框颜色类向边框添加颜色：

Contoh

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Cuba Sendiri

边框圆角

Penggunaan rounded 类为元素添加圆角：

Contoh

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Cuba Sendiri

Gerakan dan membersihkan gerakan

Penggunaan .float-end Kelas menggerakkan ke kanan elemen, atau menggunakan .float-start Menggerakkan ke kiri, dan menggunakan .clearfix Kelas membersihkan gerakan:

Contoh

<div class="clearfix">
  <span class="float-start">Menggerakkan ke kiri</span>
  <span class="float-end">Menggerakkan ke kanan</span>
</div>

Cuba Sendiri

Gerakan Berresponsif

Menggerakkan elemen ke kiri atau kanan berdasarkan lebar skrin, gunakan kelas gerakan berresponsif (.float-*-left|right) di mana * adalah:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Contoh

<div class="float-sm-end">Menggerakkan ke kanan di skrin kecil atau lebar lebih banyak</div><br>
<div class="float-md-end">Menggerakkan ke kanan di skrin menengah atau lebar lebih banyak</div><br>
<div class="float-lg-end">Menggerakkan ke kanan di skrin besar atau lebar lebih banyak</div><br>
<div class="float-xl-end">Menggerakkan ke kanan di skrin super besar atau lebar lebih banyak</div><br>
<div class="float-xxl-end">Menggerakkan ke kanan di skrin besar atau lebar lebih banyak</div><br>
<div class="float-none">Tidak menggerakkan</div>

Cuba Sendiri

Tengah

Penggunaan .mx-auto Elemen tengah (Tambah margin-left dan margin-right: auto):

Contoh

<div class="mx-auto bg-warning" style="width:150px">Tengah</div>

Cuba Sendiri

Lebar

Gunakan kelas w-*（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Tetapkan lebar elemen：

Contoh

<div class="w-25 bg-warning">Lebar 25%</div>
<div class="w-50 bg-warning">Lebar 50%</div>
<div class="w-75 bg-warning">Lebar 75%</div>
<div class="w-100 bg-warning">Lebar 100%</div>
<div class="w-auto bg-warning">Lebar otomatis</div>
<div class="mw-100 bg-warning">Lebar maksimum 100%</div>

Cuba Sendiri

Ketinggian

Gunakan kelas h-*（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Tetapkan ketinggian elemen：

Contoh

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Ketinggian 25%</div>
  <div class="h-50 bg-warning">Ketinggian 50%</div>
  <div class="h-75 bg-warning">Ketinggian 75%</div>
  <div class="h-100 bg-warning">Ketinggian 100%</div>
  <div class="h-auto bg-warning">Ketinggian otomatis</div>
  <div class="mh-100 bg-warning" style="height:500px">Ketinggian maksimum 100%</div>
</div>

Cuba Sendiri

jarak

Bootstrap 5 mempunyai kelas penggunaan margin dan padding responsif yang luas. Mereka sesuai untuk semua breakpoints：

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

格式使用这些类为：{property}{sides}-{size} Digunakan untuk xs，dan {property}{sides}-{breakpoint}-{size} Digunakan untuk sm、md、lg、xl dan xxl。

property Adalah salah satu dari berikut:

  • m - Ditetapkan margin
  • p - Ditetapkan padding

sides Adalah salah satu dari berikut:

  • t - Ditetapkan margin-top atau padding-top
  • b - Ditetapkan margin-bottom atau padding-bottom
  • s - Ditetapkan margin-left atau padding-left
  • e - Ditetapkan margin-right atau padding-right
  • x - Ditetapkan bersamaan padding-left dan padding-right atau margin-left dan margin-right
  • y - Ditetapkan bersamaan padding-top dan padding-bottom atau margin-top dan margin-bottom
  • blank - Ditetapkan di empat sisi elemen margin atau padding

size Adalah salah satu dari berikut:

  • 0 - Buat margin atau padding Disebutkan dengan 0
  • 1 - Buat margin atau padding Disebutkan dengan .25rem
  • 2 - Buat margin atau padding Disebutkan dengan .5rem
  • 3 - Buat margin atau padding Disebutkan dengan 1rem
  • 4 - Buat margin atau padding Disebutkan dengan 1.5rem
  • 5 - Buat margin atau padding Disebutkan dengan 3rem
  • auto - Buat margin Disebutkan dengan auto

Contoh

<div class="pt-4 bg-warning">Saya hanya mempunyai padding atas (1.5rem)</div>
<div class="p-5 bg-success">Saya mempunyai padding di seluruh sisi (3rem)</div>
<div class="m-5 pb-5 bg-info">Saya mempunyai margin di seluruh sisi (3rem) dan padding bawah (3rem)</div>

Cuba Sendiri

Contoh jarak lainnya

.m-# / m-*-# Margin di seluruh sisi Coba
.mt-# / mt-*-# Margin atas Coba
.mb-# / mb-*-# Margin bawah Coba
.ms-# / ms-*-# Margin kiri Coba
.me-# / me-*-# Margin kanan Coba
.mx-# / mx-*-# Padding kiri dan kanan Coba
.my-# / my-*-# Margin atas dan bawah Coba
.p-# / p-*-# Padding di seluruh sisi (isikan) Coba
.pt-# / pt-*-# Padding atas Coba
.pb-# / pb-*-# Padding bawah Coba
.ps-# / ps-*-# Padding kiri Coba
.pe-# / pe-*-# Padding kanan Coba
.py-# / py-*-# Padding atas dan bawah Coba
.px-# / px-*-# Padding kiri dan kanan Coba

Anda dapat melihat di Panduan Satuan CSS Baca lebih banyak tentang rem dan ukuran satuan yang berbeda di dalamnya.

Bayang

请使用 shadow- Kelas untuk menambah bayang pada elemen:

Contoh

<div class="shadow-none p-4 mb-4 bg-light">Tiada bayang</div>
<div class="shadow-sm p-4 mb-4 bg-white">小型阴影</div>
<div class="shadow p-4 mb-4 bg-white">默认阴影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大型阴影</div>

Cuba Sendiri

垂直对齐

请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：

Contoh

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Cuba Sendiri

纵横比

根据父级的宽度创建响应式视频或幻灯片。

将 .ratio 类与您选择的纵横比 .aspect-ratio-* 添加到父元素，并在其中添加嵌入（视频或 iframe）：

Contoh

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Cuba Sendiri

可见性

Penggunaan .visible atau .invisible 类可控制元素的可见性：

注释：这些类不会更改 CSS display 值。它们只添加 visibility:visible atau visibility:hidden。

Contoh

<div class="visible">Saya dapat dilihat.</div>
<div class="invisible">Saya tak dapat dilihat.</div>

Cuba Sendiri

Ikon Tutup

Penggunaan .btn-close Kelas boleh menetapkan gaya ikon tutup. Biasanya digunakan untuk kotak peringatan dan modal.

Contoh

<button type="button" class="btn-close"></button>

Cuba Sendiri

Pereka Bacaan Layar

Penggunaan .visually-hidden Kelas boleh disembunyikan elemen di semua peranti, kecuali pereka bacaan layar:

Contoh

<span class="visually-hidden">Saya akan disembunyikan di semua skrin kecuali untuk pereka bacaan layar.</span>

Cuba Sendiri

Warna

Sebagai yang disebutkan di bab 'Warna', berikut adalah senarai semua kelas teks dan warna latar belakang:

Kelas untuk warna teks adalah:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（Warna default body/biasanya hitam）
  • .text-light

Contoh

Cuba Sendiri

Kelas teks konteks juga boleh digunakan untuk pautan:

Contoh

Cuba Sendiri

Anda juga boleh menggunakan .text-black-50 atau .text-white-50 kelas untuk menambahkan 50% kecerahan teks hitam atau putih:

Contoh

Cuba Sendiri

Warna Latar Belakang

Kelas untuk warna latar belakang adalah:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Perhatikan, warna latar belakang tidak akan menetapkan warna teks, jadi dalam beberapa kes, anda perlu untuk menggunakannya dengan .text-* Kelas bersama-sama digunakan.

Contoh

Cuba Sendiri