Bootstrap 5 Utility Classes

Utilities / Helper Classes

May maraming utility/helper class ang Bootstrap 5, na maaaring gamitin upang mabilis na i-set ang estilo ng elemento nang walang CSS code.

Border

Mga utility na class ng Bootstrap 5 ay marami, at maaaring mag-set ng estilo ng elemento nang mabilis nang walang CSS code.

Halimbawa

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

Subukan nang personal

LAPAD NG BORDER

Gamitin .border-1 sa .border-5 Sa gayon, magbabago ka ng lapad ng border:

Halimbawa

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

Subukan nang personal

KULAY NG BORDER

Gamit ang anumang klase ng kulay ng border sa konteksto upang magdagdag ng kulay sa border:

Halimbawa

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

Subukan nang personal

BORDER ROUND

Gamitin rounded Para magdagdag ng rounded sa elemento ng klase:

Halimbawa

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

Subukan nang personal

Pagflot at paglilinis ng pagflot

Gamitin .float-end Klase pagflot ng kanan na elemento, o gamit .float-start Magpunta sa kaliwa pagflot, at gamit .clearfix Klase paglilinis ng pagflot:

Halimbawa

<div class="clearfix">
  <span class="float-start">Magpunta sa kaliwa pagflot</span>
  <span class="float-end">Magpunta sa kanan pagflot</span>
</div>

Subukan nang personal

Responsive Floating

Ayon sa lapad ng layut, magflot ng elemento sa kanan o sa kaliwa gamit ang responsibong klase pagflot (.float-*-left|right) kung saan * ay:

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

Halimbawa

<div class="float-sm-end">Sa maliliit na layut o mas malawak na layut, magpunta sa kanan pagflot</div><br>
<div class="float-md-end">Sa medyo malaking layut o mas malawak na layut, magpunta sa kanan pagflot</div><br>
<div class="float-lg-end">Sa malaking layut o mas malawak na layut, magpunta sa kanan pagflot</div><br>
<div class="float-xl-end">Sa labas na malaking layut o mas malawak na layut, magpunta sa kanan pagflot</div><br>
<div class="float-xxl-end">Sa espesyal na malaking layut o mas malawak na layut, magpunta sa kanan pagflot</div><br>
<div class="float-none">Hindi magiging pagflot</div>

Subukan nang personal

Sentro na itaas

Gamitin .mx-auto Sentro na elemento (magdagdag ng margin-left at margin-right: auto):

Halimbawa

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

Subukan nang personal

Lapad

Gumamit ng klase w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Tayo'y magtatakda ng lapad ng elemento:

Halimbawa

<div class="w-25 bg-warning">Lapad 25%</div>
<div class="w-50 bg-warning">Lapad 50%</div>
<div class="w-75 bg-warning">Lapad 75%</div>
<div class="w-100 bg-warning">Lapad 100%</div>
<div class="w-auto bg-warning">Automatikong lapad</div>
<div class="mw-100 bg-warning">Pinakamalaking lapad 100%</div>

Subukan nang personal

Taas

Gumamit ng klase h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Tayo'y magtatakda ng taas ng elemento:

Halimbawa

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Taas 25%</div>
  <div class="h-50 bg-warning">Taas 50%</div>
  <div class="h-75 bg-warning">Taas 75%</div>
  <div class="h-100 bg-warning">Taas 100%</div>
  <div class="h-auto bg-warning">Automatikong taas</div>
  <div class="mh-100 bg-warning" style="height:500px">Pinakamataas na taas 100%</div>
</div>

Subukan nang personal

Pantay

Bootstrap 5 ay may malawak na responsibong klase ng padidin at paghahawak. Ito ay tinutukoy sa lahat ng breakpoint:

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

Ang paggamit ng mga klase na ito ay sa format:{property}{sides}-{size} Used for xs，以及 {property}{sides}-{breakpoint}-{size} Used for sm、md、lg、xl at xxl。

property Isa sa mga sumusunod:

  • m - Set margin
  • p - Set padding

sides Isa sa mga sumusunod:

  • t - Set margin-top o padding-top
  • b - Set margin-bottom o padding-bottom
  • s - Set margin-left o padding-left
  • e - Set margin-right o padding-right
  • x - Set at the same time padding-left at padding-right o margin-left at margin-right
  • y - Set at the same time padding-top at padding-bottom o margin-top at margin-bottom
  • blank - Set sa lahat ng apat na gilid ng elemento margin o padding

size Isa sa mga sumusunod:

  • 0 - Set margin o padding Set to 0
  • 1 - Set margin o padding Set to .25rem
  • 2 - Set margin o padding Set to .5rem
  • 3 - Set margin o padding Set to 1rem
  • 4 - Set margin o padding Set to 1.5rem
  • 5 - Set margin o padding Set to 3rem
  • auto - Set margin Set to auto

Halimbawa

<div class="pt-4 bg-warning">Mayroon akong lamang padding sa itaas (1.5rem)</div>
<div class="p-5 bg-success">Mayroon akong padding (3rem) sa lahat ng gilid</div>
<div class="m-5 pb-5 bg-info">Mayroon akong margin (3rem) at padding sa lahat ng gilid at padding sa ilalim (3rem)</div>

Subukan nang personal

More spacing examples

.m-# / m-*-# All sides margin Subukan
.mt-# / mt-*-# Top margin Subukan
.mb-# / mb-*-# Bottom margin Subukan
.ms-# / ms-*-# Left margin Subukan
.me-# / me-*-# Right margin Subukan
.mx-# / mx-*-# Left at right padding Subukan
.my-# / my-*-# Top at bottom margin Subukan
.p-# / p-*-# All sides padding (padding) Subukan
.pt-# / pt-*-# Top padding Subukan
.pb-# / pb-*-# Bottom padding Subukan
.ps-# / ps-*-# Left padding Subukan
.pe-# / pe-*-# Right padding Subukan
.py-# / py-*-# Top at bottom padding Subukan
.px-# / px-*-# Left at right padding Subukan

Maaari mong basahin sa aming CSS Unit Reference Manual Basa ang mas maraming impormasyon tungkol sa rem at iba pang uri ng mga panunod-sukat sa iba't ibang laki.

lilim

Gumamit ng shadow- Magdagdag ng lilim sa kategorya ng elemento:

Halimbawa

<div class="shadow-none p-4 mb-4 bg-light"> walang lilim</div>
<div class="shadow-sm p-4 mb-4 bg-white">Maliit na lilim</div>
<div class="shadow p-4 mb-4 bg-white">Default na lilim</div>
<div class="shadow-lg p-4 mb-4 bg-white">Malaking lilim</div>

Subukan nang personal

Pag-alinlangan sa piling yata

Gumamit ng align- Ang klase ay magbabago ng paraan ng alinlangan ng elemento (tanging para sa inline, inline-block, inline-table at cell ng table):

Halimbawa

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

Subukan nang personal

Aspektong proporsyon

Tumugon sa lapad ng magulang upang gumawa ng responsibong video o slideshow.

Magdagdag ng .ratio Ang klase ay nakakasunod sa iyong piniling aspektong proporsyon .aspect-ratio-* Magdagdag sa magulang na elemento, at magdagdag ng embedded (video o iframe):

Halimbawa

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

Subukan nang personal

Kapahamakan

Gamitin .visible o .invisible Ang klase ay maaaring kontrolin ang kapahamakan ng elemento:

Komento:Ang mga klase na ito ay hindi magbabago ng halaga ng CSS display. Sila lamang ay nagdagdag ng visibility:visible o visibility:hidden。

Halimbawa

<div class="visible">Ako'y nakikita.</div>
<div class="invisible">Ako'y hindi makikita.</div>

Subukan nang personal

Ikon ng pagsasara

Gamitin .btn-close Ang klase ay maaaring itakda ang istilo ng ikon ng pagsasara. Kalimitan ay ginagamit sa mga pop-up at modal.

Halimbawa

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

Subukan nang personal

Screen reader

Gamitin .visually-hidden Ang klase ay maaaring itago ang elemento sa lahat ng device, maliban sa screen reader:

Halimbawa

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

Subukan nang personal

Kulay

Gaya ng sinasabi sa kabanata ng 'Kulay', ibinukod sa ibaba ang listahan ng lahat ng klase ng kulay ng teksto at kulay ng lagyan:

Ang mga klase na may kaugnayan sa kulay ng teksto ay:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(Default na kulay ng body / kalimitan ay black)
  • .text-light

Halimbawa

Subukan nang personal

Ang klase ng teksto ng konteksto ay maaaring gamitin din sa mga link:

Halimbawa

Subukan nang personal

Maaari ka ring gamitin ang .text-black-50 o .text-white-50 klase upang magdagdag ng 50% na takip sa kulay ng black o white na teksto:

Halimbawa

Subukan nang personal

Kulay ng lagyan

Ang mga klase na may kaugnayan sa kulay ng lagyan ay:

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

Paging sabihin, ang kulay ng lagyan ay hindi magtatakda ng kulay ng teksto, kaya sa ilang mga kaso, kailangan mong gamitin sila kasama ang .text-* Magsamang gamit ang klase.

Halimbawa

Subukan nang personal