Bootstrap 4 elementy strony - typografia, obrazki

Bootstrap 4 elementy strony - typografia, obrazki

Jedne z najważniejszych elementów zawartości strony www to typografia i obrazki.  W przypadku typografii najczęściej mamy do czynienia z nagłówkami i listami.

Nagłówki

Bootstrap 4 obsługuje zwykłe nagłówki html czyli h1 – h6. Ponadto można nadać innym elementom wygląd nagłówka przez dodanie klas .h1  – .h6.

Podobnie jak w bootstrap 3 możemy zastosować dodatkowy, mniejszy  nagłówek  używając znacznika <smal>.

Mamy jeszcze do dyspozycji dodatkowe uwydatnienie nagłówka przy użyciu klas .display-1 – .display-4, które znacznie zwiększają czcionkę.

Cały paragraf można uwydatnić przy użyciu klasy .lead.

Listy

  • klasa .list-unstyled pozwala na pokazanie listy bez marginesu od lewej i bez kropek
  • aby lista ułożyła się w poziomie dodajemy klasę .list-inline do elementu ul oraz .list-inline-item do elementu li

Obrazki

Obrazki responsywne skalują się razem z elementem rodzica. Aby tak się stało do obrazka należy dodać klasę .img-fluid. Klasa jest inna niż w Bootstrap 3 i w przypadku upgrade strony trzeba wszystkie klasy obrazków zmieniać.

Klasa .img-thumbnails dodaje ładną, jasną ramkę do obrazka.  W Bootstrap 3 klasa thumbnail służyła do czegoś innego i rozwiązanie to zostało usuniete z B4.

Obrazkom lub innym elementom można nadać zaokrąglone rogi w różny spsób używając klas:

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

Oblewanie obrazka można uzyskać przez dodanie klas .float-left lub .float-right.  Aby uzyskać pozycję centralną obrazka należy dodać do obrazką klasę .mx-auto lub otoczyć go elementem rodzica z klasą .text-center.

Slider czyli przesuwające się obrazki

W bootstrap 4 slider został rozwiązany podobnie jak w wersji wcześniejszej. Różnica polega tylko na używaniu klasy .carousel-item zamiast klasy .item.

template monster


Profesjonalny Hosting


3 Comments
  1. Dzięki wielkie za ten wpis, nie długo sam zakładam stronę dla swojej firmy to muszę się trochę zorientować 😛

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *