Praktyczne narzędzia Bootstrap 5

Klasy pomocnicze / Helper

Bootstrap 5 ma wiele klas pomocniczych, które pozwalają szybko ustawić styl elementów bez użycia kodu CSS.

Obramowanie

Dodaj lub usuń obramowanie elementu za pomocą klasy ramki:

Przykłady

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

Spróbuj sam

Szerokość krawędzi

Używanie .border-1 do .border-5 Zmień szerokość krawędzi:

Przykłady

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

Spróbuj sam

Kolor krawędzi

Dodaj kolor do krawędzi używając dowolnej klasy koloru kontekstowego:

Przykłady

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

Spróbuj sam

zaokrąglone krawędzie

Używanie zaokrąglone Dodaj zaokrąglone rogi do elementu:

Przykłady

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

Spróbuj sam

Wypływ i czyszczenie wypływu

Używanie .float-end Klasa do wypływu w prawo elementów, lub używając .float-start Wypływ w lewo, używając .clearfix Klasa do czyszczenia wypływu:

Przykłady

<div class="clearfix">
  <span class="float-start">Wypływ do lewej
  <span class="float-end">Wypływ do prawej
</div>

Spróbuj sam

Współczynnik wypływu

Zmiana wypływu w lewo lub w prawo w zależności od szerokości ekranu, używając klas wypływowych odpowiedzi na ekran:.float-*-left|right) gdzie * to:

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

Przykłady

<div class="float-sm-end">W przypadku ekranów małych lub szerszych, wypływ do prawej
<div class="float-md-end">W przypadku ekranów średnich lub szerszych, wypływ do prawej
<div class="float-lg-end">W przypadku ekranów dużych lub szerszych, wypływ do prawej
<div class="float-xl-end">W przypadku ekranów extra dużych lub szerszych, wypływ do prawej
<div class="float-xxl-end">W przypadku ekranów extra dużych lub szerszych, wypływ do prawej
<div class="float-none">Nie wykonywać wypływu</div>

Spróbuj sam

Wyrównanie do środka

Używanie .mx-auto Elementy wyrównane do środka (dodaj margin-left i margin-right: auto):

Przykłady

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

Spróbuj sam

Szerokość

Użycie klas w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100) Ustawienie szerokości elementu:

Przykłady

<div class="w-25 bg-warning">Szerokość 25%</div>
<div class="w-50 bg-warning">Szerokość 50%</div>
<div class="w-75 bg-warning">Szerokość 75%</div>
<div class="w-100 bg-warning">Szerokość 100%</div>
<div class="w-auto bg-warning">Automatyczna szerokość</div>
<div class="mw-100 bg-warning">Maksymalna szerokość 100%</div>

Spróbuj sam

Wysokość

Użycie klas h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100Ustawienie wysokości elementu:

Przykłady

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Wysokość 25%</div>
  <div class="h-50 bg-warning">Wysokość 50%</div>
  <div class="h-75 bg-warning">Wysokość 75%</div>
  <div class="h-100 bg-warning">Wysokość 100%</div>
  <div class="h-auto bg-warning">Automatyczna wysokość</div>
  <div class="mh-100 bg-warning" style="height:500px">Maksymalna wysokość 100%</div>
</div>

Spróbuj sam

Odległości

Bootstrap 5 ma szeroki zakres responsywnych klas margin i padding. Są one odpowiednie dla wszystkich punktów przerwania:

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

Użycie tych klas ma format:{property}{sides}-{size} do xsoraz {property}{sides}-{breakpoint}-{size} do sm、md、lg、xl i xxl。

property To jedno z następujących:

  • m - Ustaw margin
  • p - Ustaw padding

sides To jedno z następujących:

  • t - Ustaw margin-top lub padding-top
  • b - Ustaw margin-bottom lub padding-bottom
  • s - Ustaw margin-left lub padding-left
  • e - Ustaw margin-right lub padding-right
  • x - Ustaw jednocześnie padding-left i padding-right lub margin-left i margin-right
  • y - Ustaw jednocześnie padding-top i padding-bottom lub margin-top i margin-bottom
  • blank - Ustawia margines na wszystkich czterech bokach elementu margin lub padding

size To jedno z następujących:

  • 0 - Ustaw margin lub padding Ustaw na 0
  • 1 - Ustaw margin lub padding Ustaw na .25rem
  • 2 - Ustaw margin lub padding Ustaw na .5rem
  • 3 - Ustaw margin lub padding Ustaw na 1rem
  • 4 - Ustaw margin lub padding Ustaw na 1.5rem
  • 5 - Ustaw margin lub padding Ustaw na 3rem
  • auto - Ustaw margin Ustaw na auto

Przykłady

<div class="pt-4 bg-warning">Mam tylko górny wewnętrzny margines (1.5rem)</div>
<div class="p-5 bg-success">Mam wewnętrzne marginesy (3rem) na wszystkich bokach</div>
<div class="m-5 pb-5 bg-info">Mam marginesy zewnętrzne (3rem) i dolny wewnętrzny margines (3rem) na wszystkich bokach</div>

Spróbuj sam

Więcej przykładów odstępów

.m-# / m-*-# Zewnętrzny margines wszystkich boków Spróbuj
.mt-# / mt-*-# Górny zewnętrzny margines Spróbuj
.mb-# / mb-*-# Dolny zewnętrzny margines Spróbuj
.ms-# / ms-*-# Lewy zewnętrzny margines Spróbuj
.me-# / me-*-# Prawy zewnętrzny margines Spróbuj
.mx-# / mx-*-# Lewy i prawy wewnętrzny margines Spróbuj
.my-# / my-*-# Górny i dolny zewnętrzny margines Spróbuj
.p-# / p-*-# Wewnętrzny margines wszystkich boków (wypełnienie) Spróbuj
.pt-# / pt-*-# Górny wewnętrzny margines Spróbuj
.pb-# / pb-*-# Dolny wewnętrzny margines Spróbuj
.ps-# / ps-*-# Lewy wewnętrzny margines Spróbuj
.pe-# / pe-*-# Prawy wewnętrzny margines Spróbuj
.py-# / py-*-# Górny i dolny wewnętrzny margines Spróbuj
.px-# / px-*-# Lewy i prawy wewnętrzny margines Spróbuj

Możesz znaleźć nas Podręcznik jednostek CSS Przeczytaj więcej o rem i różnych jednostkach rozmiaru.

Cień

Użyj shadow- Klasa dodaje cień do elementu:

Przykłady

<div class="shadow-none p-4 mb-4 bg-light">Brak cienia</div>
<div class="shadow-sm p-4 mb-4 bg-white">Mały cień</div>
<div class="shadow p-4 mb-4 bg-white">Domyślny cień</div>
<div class="shadow-lg p-4 mb-4 bg-white">Duży cień</div>

Spróbuj sam

Wyrównanie pionowe

Użyj align- Klasy zmieniają sposób wyrównania elementów (tylko dla elementów inline, inline-block, inline-table i komórek tabeli):

Przykłady

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

Spróbuj sam

Proporcja

Twórz responsywne wideo lub slajdy na podstawie szerokości elementu nadrzędnego.

Dodaj .ratio Klasy odpowiadają za wybraną proporcję .aspect-ratio-* Dodaj do elementu nadrzędnego i dodaj w nim wtyczkę (wideo lub iframe):

Przykłady

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

Spróbuj sam

Widoczność

Używanie .visible lub .invisible Klasy mogą kontrolować widoczność elementów:

Komentarz:Te klasy nie zmieniają wartości CSS display. Dodają tylko visibility:visible lub visibility: hidden;

Przykłady

<div class="visible">Jestem widoczny.</div>
<div class="invisible">Jestem niewidoczny.</div>

Spróbuj sam

Ikona zamknięcia

Używanie .btn-close Klasy mogą ustawić styl ikony zamknięcia. Zwykle używane w oknach informacyjnych i modalnych.

Przykłady

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

Spróbuj sam

Czytnik ekranowy

Używanie .visually-hidden Klasy mogą ukrywać elementy na wszystkich urządzeniach, z wyjątkiem czytników ekranowych:

Przykłady

<span class="visually-hidden">Będę ukryty na wszystkich ekranach oprócz czytników ekranowych.</span>

Spróbuj sam

Kolory

Jak wspomniano w rozdziale "Kolory", poniżej znajduje się lista wszystkich klas tekstowych i kolorów tła:

Klasy odpowiednie dla kolorów tekstu to:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（domyślny kolor ciała/zwykle czarny）
  • .text-light

Przykłady

Spróbuj sam

Klasy tekstu kontekstowego mogą być również używane do linków:

Przykłady

Spróbuj sam

Możesz również używać klas .text-black-50 lub .text-white-50, aby dodać 50% przezroczystości do czarnego lub białego tekstu:

Przykłady

Spróbuj sam

Kolor tła

Klasy odpowiednie dla kolorów tła to:

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

Proszę zauważyć, że kolor tła nie ustawia koloru tekstu, więc w niektórych przypadkach musisz je używać z .text-* Klasy razem używane.

Przykłady

Spróbuj sam