Vifaa vya Kifungu cha Bootstrap 5

Kifaa cha kusaidia / Kikosi cha kifaa cha kusaidia

Bootstrap 5 ina kikosi cha kifaa cha kusaidia cha kubadilisha uendelevu wa kina kwa kila elementi bila kusaidia chini ya kifaa cha CSS.

Mbugua

Kufaa kuu na mifungua ama kumchara mbugua ya kiwango cha kifungu cha CSS:

Mfano

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

Jifunze tena

Uwezo wa kifungu

Kutumia .border-1 kutoka .border-5 Kumaliza uwezo wa kifungu:

Mfano

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

Jifunze tena

Rangi ya kifungu

Tumia kina kwa uwezo wa rangi ya kifungu kuingia rangi ya kifungu:

Mfano

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

Jifunze tena

Kina kwa uwezo wa kifungu

Kutumia rounded Inaongeza mifano ya kina kwa uwezo wa kiwango:

Mfano

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

Jifunze tena

Kufikia kikamilifu na kumaliza mbuguzi

Kutumia .float-end Mifupi ya kufikia kikulia, au tumia: .float-start Kufikia kikamilifu na tumia: .clearfix Mifupi ya kumaliza mbuguzi:

Mfano

<div class="clearfix">
  <span class="float-start">Kufikia kikamilifu</span>
  <span class="float-end">Kufikia kikulia</span>
</div>

Jifunze tena

Kufikia kwa kina kwa kufikiria uenezi wa schermu

Kuandaa mifupi ya kufikia kikamilifu kwa kufikiria uenezi wa schermu, tumia mifupi ya kufikia kwa kina kwa kufikiria mbuguzi (.float-*-left|rightInayotaka kuzingatia ni:

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

Mfano

<div class="float-sm-end">Kwenye schermu za kubukia kidogo au zingine za kubwa zaidi kwenye eneo la kulia</div><br>
<div class="float-md-end">Kwenye schermu za kubukia kati au zingine za kubwa zaidi kwenye eneo la kulia</div><br>
<div class="float-lg-end">Kwenye schermu za kubukia kubwa au zingine za kubwa zaidi kwenye eneo la kulia</div><br>
<div class="float-xl-end">Kwenye schermu za kubukia kubwa au zingine za kubwa zaidi kwenye eneo la kulia</div><br>
<div class="float-xxl-end">Kwenye schermu za kubukia kubwa au zingine za kubwa zaidi kwenye eneo la kulia</div><br>
<div class="float-none">Haitakapongezwe mbuguzi</div>

Jifunze tena

Kumvua kwa kikati

Kutumia .mx-auto Mifupi ya kuzingatia kwa uharibifu (kongeza margin-left na margin-right: auto):

Mfano

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

Jifunze tena

Ukubwa wa nguvu

Tumia kifaa cha hali ya nguvu (w-*):.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100Tumia kifaa cha hali ya nguvu (w-*):

Mfano

<div class="w-25 bg-warning">Ukubwa wa nguvu 25%</div>
<div class="w-50 bg-warning">Ukubwa wa nguvu 50%</div>
<div class="w-75 bg-warning">Ukubwa wa nguvu 75%</div>
<div class="w-100 bg-warning">Ukubwa wa nguvu 100%</div>
<div class="w-auto bg-warning">Ukubwa wa nguvu wa kawaida</div>
<div class="mw-100 bg-warning">Ukubwa wa nguvu wa kawaida 100%</div>

Jifunze tena

Ukubwa wa kimo

Tumia kifaa cha hali ya kimo (h-*):.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100Mfano wa ukubwa wa kijana:

Mfano

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Ukubwa wa kimo 25%</div>
  <div class="h-50 bg-warning">Ukubwa wa kimo 50%</div>
  <div class="h-75 bg-warning">Ukubwa wa kimo 75%</div>
  <div class="h-100 bg-warning">Ukubwa wa kimo 100%</div>
  <div class="h-auto bg-warning">Ukubwa wa kimo wa kawaida</div>
  <div class="mh-100 bg-warning" style="height:500px">Ukubwa wa kimo cha kawaida 100%</div>
</div>

Jifunze tena

Ukubwa wa koo

Bootstrap 5 ina kawaida za margin na padding za kina kwa kawaida. Zinatumiwa kwa kila kijana:

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

Tumia la kifaa cha hali ya kwa kawaida:{miliki}sides}-{size} Kwa xs，na {miliki}sides}-{kufikia kwa}-{size} Kwa sm、md、lg、xl na xxl。

miliki Ina kawaida yafuatayo:

  • m - Kuwa margin
  • p - Kuwa padding

sides Ina kawaida yafuatayo:

  • t - Kuwa margin-top au padding-top
  • b - Kuwa margin-bottom au padding-bottom
  • s - Kuwa margin-left au padding-left
  • e - Kuwa margin-right au padding-right
  • x - Kuwa na uangalifu wa kushoto padding-left na padding-right au margin-left na margin-right
  • y - Kuwa na uangalifu wa kushoto padding-top na padding-bottom au margin-top na margin-bottom
  • jicho - Kuingiza kila barabara ya elementi ya kina margin au padding

size Ina kawaida yafuatayo:

  • 0 - Kuwa margin au padding Wakilisha kwa 0
  • 1 - Kuwa margin au padding Wakilisha kwa .25rem
  • 2 - Kuwa margin au padding Wakilisha kwa .5rem
  • 3 - Kuwa margin au padding Wakilisha kwa 1rem
  • 4 - Kuwa margin au padding Wakilisha kwa 1.5rem
  • 5 - Kuwa margin au padding Wakilisha kwa 3rem
  • auto - Kuwa margin Wakilisha kwa auto

Mfano

<div class="pt-4 bg-warning">Nimeangalia mafuriko wa ndani wa kwanza (1.5rem)</div>
<div class="p-5 bg-success">Nimeangalia kila barabara kina mafuriko wa ndani (3rem)</div>
<div class="m-5 pb-5 bg-info">Nimeangalia kila barabara kina mafuriko ya nje (3rem) na mafuriko wa ndani wa nyuma (3rem)</div>

Jifunze tena

Mifano ya jirani ya kimaana

Mwili wa kushoto wa uangalifu wa nje wa kila barabara Mtaarifu
Mwili wa kushoto wa uangalifu wa nje Mtaarifu
Mwili wa kushoto wa uangalifu wa nje Mtaarifu
Mwili wa kushoto wa uangalifu wa nje Mtaarifu
Mwili wa kushoto wa uangalifu wa nje Mtaarifu
Mwili na kushoto wa uangalifu wa ndani Mtaarifu
Mwili na kushoto wa uangalifu wa nje Mtaarifu
Mwili wa kushoto wa uangalifu wa ndani wa kila barabara (mbegu) Mtaarifu
Mwili wa kushoto wa uangalifu wa ndani Mtaarifu
Mwili wa kushoto wa uangalifu wa nyuma Mtaarifu
Mwili wa kushoto wa uangalifu wa ndani Mtaarifu
Mwili wa kushoto wa uangalifu wa nyuma Mtaarifu
Mwili na kushoto wa uangalifu wa nyuma Mtaarifu
Mwili na kushoto wa uangalifu wa ndani Mtaarifu

Unaweza kufikia kwenye Makala ya mifano ya majadiliano ya CSS Kujiandika zaidi kuhusu rem na ukubwa wa ukuru wa ukweli wa CSS.

rafiki

Tumia rafiki- Kikoa cha elementi kina kama rafiki:

Mfano

<div class="shadow-none p-4 mb-4 bg-light">hakuna rafiki</div>
<div class="shadow-sm p-4 mb-4 bg-white">Shadhu mdogo</div>
<div class="shadow p-4 mb-4 bg-white">Shadhu wa kawaida</div>
<div class="shadow-lg p-4 mb-4 bg-white">Shadhu kubwa</div>

Jifunze tena

Ujumbe wa kina

Tumia align- Class inayoweza kusimamia ujumbe wa kina (inaingia kwa kiwango kikubwa, kiwango cha kina, kiwango cha kina cha kina na kina cha mtindo):

Mfano

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

Jifunze tena

Asilimia ya kina

Kufanya video au slideshow inayofanyia kueleza asilimia ya kina kwa kuzingatia ukweli wa kina mengine.

Ongeza .ratio Class inayoweza kusimamia asilimia ya kina: .aspect-ratio-* Ongeza kwa kina mengine, na wakati huo wakosa matokeo (video au iframe):

Mfano

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

Jifunze tena

Muonekano

Kutumia .visible au .invisible Class inayoweza kusimamia viwango vya muonekano wa kina:

Mafano:Hizi klabu hazikikuhusu hazina kufanyia uharibifu wa thamani ya CSS display. Hivyo, yanaongeza visibility:visible au visibility:hidden。

Mfano

<div class="visible">Ninaangalia kwamba ninaonekana kwenye vizuri zote.</div>
<div class="invisible">Ninaangalia kwamba ninaonekana kwenye vizuri zote.</div>

Jifunze tena

Ikona ya kuzima

Kutumia .btn-close Kati zingeweka mabadiliko ya ikona ya kuzima. Kwa kawaida inatumiwa kwenye kufikia na kifungu cha mawasiliano.

Mfano

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

Jifunze tena

Kibali cha kueleza

Kutumia .visually-hidden Kati zingekubaliwa kwenye vizuri zote hasa kwenye kibali cha kueleza:

Mfano

<span class="visually-hidden">Anga kubaki kwenye vizuri zote hasa kwenye kibali cha kueleza.</span>

Jifunze tena

Rangi

Kama ilianezungumza katika kitabu cha rangi, hapa inatoa orodha ya kati za rangi za matukio na rangi za nyuma ya mawingu:

Kati za rangi ya matukio ni:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(mbali na rangi ya kichwa ya kawaida / kwa kawaida ya kichwa chake ni kijani)
  • .text-light

Mfano

Jifunze tena

Kati za matukio ya kijani pia zinaweza kutumika kwa viungo:

Mfano

Jifunze tena

Wewe wengi unaweza kutumia .text-black-50 au .text-white-50 kwa kuingia 50% ya uharibifu wa rangi ya kichwa:

Mfano

Jifunze tena

Rangi ya nyuma ya mawingu

Kati za rangi ya nyuma ya mawingu ni:

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

Tafadhali tazama, rangi ya nyuma ya mawingu hauweza kufanyia rangi ya matukio, kwa hivyo katika ukosefu wa mawingu, unahitaji kuongeza kati za ... .text-* Kusaidia kutumia kati za kike

Mfano

Jifunze tena