Bootstrap 5 hyödylliset työkalut

Apuluokat / Helper-luokat

Bootstrap 5:llä on monia apuluokkia, joita voidaan käyttää nopeasti määrittämään elementtien ulkoasua ilman CSS-koodia.

Reunaviiva

Lisää tai poista elementin reunaviivat käyttämällä reunaviivatyyppiluokkaa:

Esimerkki

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

Kokeile itse

Reunaviivan leveys

Käyttö .border-1 asteikolla .border-5 Muuta reunaviivan leveyttä seuraavilla luokilla:

Esimerkki

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

Kokeile itse

Reunaviivan väri

Lisää reunaviivan väri mihin tahansa kontekstin reunaviivan väriluokkaan:

Esimerkki

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

Kokeile itse

Reunaviivan pyöristys

Käyttö rounded Elementin reunojen pyöristäminen:

Esimerkki

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

Kokeile itse

Liukuminen ja liukumisen poisto

Käyttö .float-end Liukumisen oikealle suuntaan oleva luokka, tai käytä .float-start Liukuu vasemmalle ja käyttää .clearfix Liukumisen poistoluokka:

Esimerkki

<div class="clearfix">
  <span class="float-start">Vasemmalle liukuminen</span>
  <span class="float-end">Oikealle liukuminen</span>
</div>

Kokeile itse

Vastauskykyinen liukuminen

Liukuu vasemmalle tai oikealle näytön leveyden mukaan, käytä vastauskykyisiä liukumisluokkia (.float-*-left|right)，jossa * on:

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

Esimerkki

<div class="float-sm-end">Oikealle liukuminen pienissä näytöissä tai leveämmillä näytöillä</div><br>
<div class="float-md-end">Oikealle liukuminen keskisuurissa näytöissä tai leveämmillä näytöillä</div><br>
<div class="float-lg-end">Oikealle liukuminen suurissa näytöissä tai leveämmillä näytöillä</div><br>
<div class="float-xl-end">Oikealle liukuminen erityisissä suurissa näytöissä tai leveämmillä näytöillä</div><br>
<div class="float-xxl-end">Oikealle liukuminen erityisissä suurissa näytöissä tai leveämmillä näytöillä</div><br>
<div class="float-none">Ei liukumista</div>

Kokeile itse

Keskelle tasainen

Käyttö .mx-auto Elementit, jotka keskittyvät (lisää margin-left ja margin-right: auto):

Esimerkki

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

Kokeile itse

Leveys

Käytä w-*-luokkia (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Aseta elementin leveys:

Esimerkki

<div class="w-25 bg-warning">Leveys 25%</div>
<div class="w-50 bg-warning">Leveys 50%</div>
<div class="w-75 bg-warning">Leveys 75%</div>
<div class="w-100 bg-warning">Leveys 100%</div>
<div class="w-auto bg-warning">Automaattinen leveys</div>
<div class="mw-100 bg-warning">Suurin leveys 100%</div>

Kokeile itse

Korkeus

Käytä h-*-luokkia (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Aseta elementin korkeus:

Esimerkki

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

Kokeile itse

Aukot

Bootstrap 5 sisältää laajan valikoiman responsiivisia margin- ja padding-käyttöluokkia. Ne sopivat kaikkiin katkoihin:

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

Näiden luokkien käyttömuoto on:{ominaisuus}{sides}-{size} käyttöön xs，ja {ominaisuus}{sides}-{breakpoint}-{size} käyttöön sm、md、lg、xl ja xxl。

ominaisuus Se on seuraavista:

  • m - Aseta margin
  • p - Aseta padding

sides Se on seuraavista:

  • t - Aseta margin-top tai padding-top
  • b - Aseta margin-bottom tai padding-bottom
  • s - Aseta margin-left tai padding-left
  • e - Aseta margin-right tai padding-right
  • x - Aseta samanaikaisesti padding-left ja padding-right tai margin-left ja margin-right
  • y - Aseta samanaikaisesti padding-top ja padding-bottom tai margin-top ja margin-bottom
  • blank - Aseta elementin kaikille neljälle reunalle margin tai padding

size Se on seuraavista:

  • 0 - Aseta margin tai padding Asetettu 0
  • 1 - Aseta margin tai padding Asetettu .25rem
  • 2 - Aseta margin tai padding Asetettu .5rem
  • 3 - Aseta margin tai padding Asetettu 1rem
  • 4 - Aseta margin tai padding Asetettu 1.5rem
  • 5 - Aseta margin tai padding Asetettu 3rem
  • auto - Aseta margin Asetettu arvoksi auto

Esimerkki

<div class="pt-4 bg-warning">Minulla on vain yläpuolinen sisäinen marginaali (1.5rem)</div>
<div class="p-5 bg-success">Minulla on kaikki reunat sisäisinä marginaaleina (3rem)</div>
<div class="m-5 pb-5 bg-info">Minulla on kaikki reunat ulkoisina marginaaleina (3rem) ja alapuolinen sisäinen marginaali (3rem)</div>

Kokeile itse

Lisää etäisyyden esimerkkejä

.m-# / m-*-# Kaikkien reunojen ulkoinen marginaali Kokeile
.mt-# / mt-*-# Yläpuolinen ulkoinen marginaali Kokeile
.mb-# / mb-*-# Alapuolinen ulkoinen marginaali Kokeile
.ms-# / ms-*-# Vasen ulkoinen marginaali Kokeile
.me-# / me-*-# Oikea ulkoinen marginaali Kokeile
.mx-# / mx-*-# Vasen ja oikea sisäinen marginaali Kokeile
.my-# / my-*-# Ylä- ja alapuolinen ulkoinen marginaali Kokeile
.p-# / p-*-# Kaikkien reunojen sisäinen marginaali (täyttö) Kokeile
.pt-# / pt-*-# Yläpuolinen sisäinen marginaali Kokeile
.pb-# / pb-*-# Alapuolinen sisäinen marginaali Kokeile
.ps-# / ps-*-# Vasen sisäinen marginaali Kokeile
.pe-# / pe-*-# Oikea sisäinen marginaali Kokeile
.py-# / py-*-# Ylä- ja alapuolinen sisäinen marginaali Kokeile
.px-# / px-*-# Vasen ja oikea sisäinen marginaali Kokeile

Voit tutustua CSS mittayksiköiden tietokirja Lue lisää remistä ja eri mittayksiköistä.

varjo

Käytä shadow- Lisää varjo elementille luokalla：

Esimerkki

<div class="shadow-none p-4 mb-4 bg-light">ei varjoa</div>
<div class="shadow-sm p-4 mb-4 bg-white">Pieni varjo</div>
<div class="shadow p-4 mb-4 bg-white">Oletusvarjo</div>
<div class="shadow-lg p-4 mb-4 bg-white">Suuri varjo</div>

Kokeile itse

Pystysuuntainen kohdistus

Käytä align- Luokat muuttavat elementtien kohdistusta (vain inline-, inline-block-, inline-table- ja taulukon soluelementit):

Esimerkki

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

Kokeile itse

Kuvasuhde

Luo vastauksena isäntälle laajennettava video tai diapresentaatio.

Lisää .ratio Luokat vastaavat valitsemaasi kuvasuhdetta .aspect-ratio-* Lisää vanhempiin elementteihin ja lisää sisennettyjä (video tai iframe):

Esimerkki

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

Kokeile itse

Näkyvyys

Käyttö .visible tai .invisible Luokat voivat hallita elementtien näkyvyyttä：

Huomautus：Nämä luokat eivät muuta CSS display-arvoa. Ne lisäävät vain visibility:visible tai visibility:hidden。

Esimerkki

<div class="visible">I am visible.</div>
<div class="invisible">I am invisible.</div>

Kokeile itse

Sulkemisikoni

Käyttö .btn-close Luokat voivat määrittää sulkemisikonin tyylin. Yleensä käytetään varoituskehoituksiin ja modaalikkeihin.

Esimerkki

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

Kokeile itse

Näytönlukija

Käyttö .visually-hidden Luokat voivat piilottaa elementtejä kaikilla laitteilla, paitsi näytönlukijoissa:

Esimerkki

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

Kokeile itse

Värit

Kuten 'Värit' -luvussa kuvataan, seuraavassa on lueteltu kaikki teksti- ja taustaväri-luokat:

Tekstiväriin liittyvät luokat ovat:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（Oletusarvo body väri/yleensä musta）
  • .text-light

Esimerkki

Kokeile itse

Kontekstitekstiluokat voidaan käyttää myös linkkeihin:

Esimerkki

Kokeile itse

Voit myös käyttää .text-black-50 tai .text-white-50-luokkaa lisätäksesi 50% läpinäkyvyyttä mustaan tai valkoiseen tekstiin:

Esimerkki

Kokeile itse

Taustaväri

Taustaväriin liittyvät luokat ovat:

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

Huomaa, että taustaväri ei aseta tekstin väriä, joten joissakin tapauksissa sinun täytyy käyttää niitä yhdessä .text-* Luokat voidaan käyttää yhdessä.

Esimerkki

Kokeile itse