Harmonogram kursów

Tutorial Bootstrap 5

• Kurs BS5
• Wprowadzenie do BS5
• Kontenery BS5
• Podstawy siatki BS5
• Formatowanie BS5
• Kolory BS5
• Tabele BS5
• Obrazy BS5
• Jumbotron BS5
• Okna ostrzegawcze BS5
• Przyciski BS5
• Grupy przycisków BS5
• Odznaki BS5
• Pasek postępu BS5
• Ładowarka BS5
• Strony nawigacyjne BS5
• Grupy listy BS5
• Karty BS5
• Menu rozwijane BS5
• Zwijanie BS5
• Nawigacja BS5
• Panel nawigacyjny BS5
• Slajdy BS5
• Modały BS5
• Podpowiedzi BS5
• Pop-up BS5
• Toast BS5
• Scrollspy BS5
• Offcanvas BS5
• Praktyczne narzędzia BS5
• Flex BS5

Formularze Bootstrap 5

• Formularze BS5
• Menu wyborcze BS5
• Pola wyboru i przyciski radiowe BS5
• Zakres BS5
• Grupy wejściowe BS5
• Etykiety pływające BS5
• Walidacja formularzy BS5

Siatka Bootstrap 5

• System siatki BS5
• BS5 Stosowanie/w poziomie
• BS5 Siatka XSmall
• BS5 Siatka Small
• BS5 Siatka Medium
• BS5 Siatka Large
• BS5 Siatka XLarge
• BS5 Siatka XXL
• Przykład siatki BS5

Inne Bootstrap 5

• Szablon podstawowy BS5
• Test BS5

Kursy wyborcze

Polecane kursy:

• Skarbiec CodeW3C.com

ramie elastyczne

Największa różnica między Bootstrap 3 a Bootstrap 4 & 5 polega na tym, że Bootstrap 5 używa teraz flexbox zamiast float do obsługi układu.

moduł elastycznego ramienia, który pozwala na łatwiejsze projektowanie elastycznych struktur responsywnych bez użycia float lub pozycjonowania.

Jeśli nie znasz flex, możesz nauczyć się tego w naszym Kurs CSS Flexbox naucz się.

Komentarz:Wersje IE9 i wcześniejsze nie obsługują Flexbox.

Komentarz:Jeśli potrzebujesz obsługi IE8-9, użyj Bootstrap 3. Jest to najbardziej stabilna wersja Bootstrap, zespół wciąż go wspiera, aby naprawiać kluczowe błędy i wprowadzać zmiany w dokumentacji. Jednak nie będą wprowadzane żadne nowe funkcje.

Przykład

Aby utworzyć kontener flexbox i przekształcić bezpośrednie elementy potomne w elementy flex, użyj d-flex Klasa:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>

Spróbuj sam

Przykład

Aby utworzyć kontener wiersza wewnętrznego flexbox, użyj d-inline-flex Klasa:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>

Spróbuj sam

Kierunek poziomy

użyj .flex-row Wyświetlać elementy flex w poziomie (obok siebie). Jest to ustawienie domyślne.

Wskazówka:używając .flex-row-reverse Można wyprostować je w kierunku prawym poziomym:

Przykład

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>

Spróbuj sam

Kierunek pionowy

użyj .flex-column Wyświetlać elementy flex w pionie (zamiast siebie nawzajem), lub użyć .flex-column-reverse Odwrócić kierunek pionowy:

Przykład

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>

Spróbuj sam

Wyśrodkuj zawartość

używając .justify-content-* Klasa może zmienić sposób wyrównania elementów elastycznych. Dostępne klasy to:

• start(domyślnie)
• end
• center
• between
• around

Przykład

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Spróbuj sam

Równa szerokość

używając na elemencie flex .flex-fill Można zmusić je do równego szerokości:

Przykład

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Elastyczny element 1</div>
  <div class="p-2 bg-warning flex-fill">Elastyczny element 2</div>
  <div class="p-2 bg-primary flex-fill">Elastyczny element 3</div>
</div>

Spróbuj sam

Rozciągać

używając na elemencie flex .flex-grow-1 Można zająć dodatkowe miejsce. W poniższym przykładzie, pierwsze dwa elementy flex zajmują niezbędne miejsce, a ostatni element zajmuje pozostałą dostępną przestrzeń:

Przykład

<div class="d-flex">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary flex-grow-1">Element elastyczny 3</div>
</div>

Spróbuj sam

Wskazówka:używając na elemencie flex .flex-shrink-1 może się kurczyć, jeśli to konieczne.

Kolejność

używając .order klasy mogą zmieniać wizualną kolejność konkretnego elementu flex. Dostępne klasy od 0 do 5, gdzie najniższa liczba ma najwyższy priorytet (order-1 jest przed order-2, itd.):

Przykład

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Element elastyczny 1</div>
  <div class="p-2 bg-warning order-2">Element elastyczny 2</div>
  <div class="p-2 bg-primary order-1">Element elastyczny 3</div>
</div>

Spróbuj sam

automatycznych marginesów zewnętrznych

używając .me-auto(przesuwa projekt w prawo) lub użyć .ms-auto(przesuwa projekt w lewo) Można łatwo dodać automatyczne marginesy do elementów flex:

Przykład

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 bg-primary">Element elastyczny 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Element elastyczny 1</div>
  <div class="p-2 bg-warning">Element elastyczny 2</div>
  <div class="p-2 ms-auto bg-primary">Element elastyczny 3</div>
</div>

Spróbuj sam

Przełącz wiersze

poprzez .flex-nowrapdomyślnie,.flex-wrap lub .flex-wrap-reversekontrolują, jak elementy flex są opakowywane w kontenerze flex.

Przykład

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

Spróbuj sam

Wyśrodkuj zawartość

użyj .ustawia-zawartość-* Klasy kontrolują verticalne wyważenie elementów elastycznych. Dostępne klasy to:

• .ustawia zawartość na początek(domyślnie)
• .ustawia zawartość na koniec
• .centeruje zawartość
• .align-content-between
• .align-content-around
• .align-content-stretch

Komentarz:Te klasy nie mają wpływu na wiersz jednorzędowy.

Kliknij poniższy przycisk, aby zobaczyć różnice między pięcioma klasami: zmieniając wertykalne wyważanie elementów elastycznych w oknie instancji.

Przykład

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

Spróbuj sam

Wyśrodkuj elementy

użyj .align-items-* klasa kontrolnawiersz jednorzędowywertykalne wyważanie elastycznych elementów. Dostępne klasy to:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch(domyślnie)

Kliknij poniższy przycisk, aby zobaczyć różnice między pięcioma klasami:

Przykład

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

Spróbuj sam

samowyważenie

użyj .align-self-* klasa kontrolnaokreśla elastyczne elementysposób wertykalnego wyważania.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch(domyślnie)

Kliknij poniższy przycisk, aby zobaczyć różnice między pięcioma klasami:

Przykład

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Element elastyczny 1</div>
  <div class="p-2 border align-self-start">Element elastyczny 2</div>
  <div class="p-2 border">Element elastyczny 3</div>
</div>

Spróbuj sam

Elastyczne klasy odpowiedzi

Wszystkie klasy elastyczne mają dodatkowe klasy odpowiedzi, co ułatwia ustawianie konkretnych klas flex na określonych rozmiarach ekranu.

* symbol można zastąpić sm, md, lg, xl lub xxl, co oznacza mały, średni, duży, bardzo duży i extra duży ekran.

Szukaj konkretnych klas elastycznych ..

Narzędziówka

Test JavaScript

Linki sponsorowane