Podstawy Bootstrap

2022-07-05 10:09
1 minuta czytania

Treść

Liczba kolumn w jednym rzędzie dodaje się do 12. Nie trzeba jednak używać wszystkich 12 kolumn. Dlatego, jeśli chcemy podzielić jeden rząd na pół zakodujemy:

Jeśli chcemy jeden rząd podzielić na trzy równe części zakodujemy:

Bootstrapowy grid ma 4 typy class: xs dla telefonów (<768px), sm dla tabletów (≥768px), md dla desktop (≥992px) I lg dla większych wyświetlaczy (≥1200px).

W bootstrapie mamy wiele przedrostków dla klas.

Atrybutami są:

  • m – ustawia nam margin
  • p – ustawia nam padding

Bokami są:

  • t - dla klas, aby ustawić margin-top albo padding-top
  • b - dla klas, aby ustawić margin-bottom albo padding-bottom
  • l - dla klas, aby ustawić margin-left albo padding-left
  • r - dla klas, aby ustawić margin-right albo padding-right
  • x - dla klas, aby ustawić *-left oraz *-right
  • y - dla klas, aby ustawić *-top oraz *-bottom
  • blank – dla klas aby ustawić margin albo padding na wszystkich 4 stronach

Wielkościami są:

  • 0 – dla klas, aby wyelminowac margin albo padding poprzez ustawienie ich do 0
  • 1 - (domyślnie) dla klas, aby ustawić margin albo padding do $spacer * .25
  • 2 - (domyślnie) dla klas, aby ustawić margin albo padding do $spacer * .5
  • 3 - (domyślnie) dla klas, aby ustawić margin albo padding do $spacer
  • 4 - (domyślnie) dla klas, aby ustawić margin albo padding do $spacer * 1.5
  • 5 - (domyślnie) dla klas, aby ustawić margin albo padding do $spacer * 3
  • auto – dla klas, aby ustawić margin do automatycznej wartości

W razie wątpliwości polecam zaglądać do https://getbootstrap.com/docs/4.0/getting-started/introduction/

Wszystko jest tam jasno opisane i możemy zobaczyć przykład użycia każdej klasy np.

Napisz do nas

Wybierz plik

Poprzedni artykuł

Podstawy SASS

Podstawy SASS


Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe