Display

1 040 0

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

Przykład

d-block
d-block

Kod

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 ekranuKlasa
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! (3 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

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

*

*