Display

7 623 0
Sprawdź najnowszą wersję komponentu display zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

W tym wpisie poznamy klasy, które pozwalają nam zmieniać sposób wyświetlania elementu. Jak wiecie dzięki właściwości display: CSS możemy definiować by element wyświetlał się między innymi blokowo, liniowo, jako element listy czy tabela. Klasy te odpowiadają wartością właściwości display z dopiskiem .d-*. Dodatkowo możemy je stosować do wybranych breakpointów. Wtedy składnia klasy wygląda następująco .d-*-* gdzie pod pierwszą gwiazdkę podstawiamy dostępne w Bootstrapie breakpointy sm, md, lg, xl, dzięki temu możemy sprawić by jakiś element przykładowo na desktopie był elementem liniowym, natomiast na mobile blokowym.

Lista dostępnych klas:

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-table-row
  • .d-flex
  • .d-inline-flex

Podstawowy przykład

Przykład

d-inline
d-inline

Kod


<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

Przykład

d-block
d-block

Kod


<div class="d-block p-2 bg-primary text-white">d-block</div>
<div class="d-block p-2 bg-dark text-white">d-block</div>

Ukrywanie elementów

Co prawda ten temat był już poruszony we wpisie o responsywności ale powtórzę tutaj jakie kombinacje klas zastosować by pokazać lub ukryć wybane elementy w zależności od rozdzielczości.

Rozmiar ekranu Klasa
Ukryte cały czas .d-none
Ukryte tylko na xs .d-none .d-sm-block
Ukryte tylko na sm .d-sm-none .d-md-block
Ukryte tylko na md .d-md-none .d-lg-block
Ukryte tylko na lg .d-lg-none .d-xl-block
Ukryte tylko na xl .d-xl-none
Widoczne on all .d-block
Widoczne tylko na xs .d-block .d-sm-none
Widoczne tylko na sm .d-none .d-sm-block .d-md-none
Widoczne tylko na md .d-none .d-md-block .d-lg-none
Widoczne tylko na lg .d-none .d-lg-block .d-xl-none
Widoczne tylko na xl .d-none .d-xl-block

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (7 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*