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