Prestashop, Wygląd i szablony

Klasy Bootstrap w szablonach PrestaShop

Kontynuujemy zapoznawanie się z implementacją Bootstrap w szablonach PrestaShop. Do nawigacji zalecam użycie pierwszego postu w serii artykułów. W Bootstrap istnieje wiele domyślnych klas z predefiniowanymi zachowaniami – PrestaShop obsługuje większość z nich.

Klasy pomocnicze

  • pull-left-float: left.
  • pull-right – float: right
  • clearfix – aby dopasować wysokość dziecka bloków pływających i rodzica.
  • close – tworzy przycisk do zamknięcia (x).
  • caret – tworzy ikonę menu rozwijanego.
  • center-block – wyśrodkuj element.
  • pokaż i ukryj – wyświetl i ukryj element.

Są to najczęściej używane klasy do szybkiego układania, na przykład dla wszystkich elementów pływających, można teraz określić klasę przeciągania po lewej, a rodzicowi poprawkę dla poprawnego wyrównania według zawartości.

Zajęcia dla układu respose

Klasy te umożliwiają ukrycie / wyświetlenie elementu w zależności od urządzenia, na którym wyświetlana jest strona

  • visible-xs / hidden-xs – bardzo mały, dla telefonów (<768px)
  • visible-sm / hidden-sm – mały, dla tabletów (≥ 768 px)
  • visible-md / hidden-md – medium, dla monitorów stacjonarnych (≥992 px)
  • visible-lg / hidden-lg – duże, na duże monitory i telewizor (≥ 1200 pikseli)
  • widoczny-print / hidden-print – print

Bootstrap znacznie upraszcza obsługę układu reaktywnego, na przykład, aby poprawnie zmienić rozmiar obrazów, wystarczy przypisać im klasę “img-responsive”. Dzięki przypisanym stylom “max-width: 100%; height: auto; “obraz zaczyna zmieniać swój rozmiar wraz ze zmianą rozmiaru elementu pielęgnacyjnego.

Praca z tekstem
Wyrównaj tekst

  • text-left – wyrównanie do lewej
  • text-center-Center wyrównanie
  • text-right – Right Alignment
  • text-justify – Wyrównanie tekstu na szerokość

Kolor tekstu:

  • wyciszony tekstem – kolor: # 999999;
  • text-primary – kolor: # 428bca
  • text-success-color: # 3c763d
  • informacje tekstowe – kolor: # 31708f
  • ostrzeżenie tekstowe – kolor: # 8a6d3b
  • zagrożenie tekstowe – kolor: # a94442

Jak widać na przykładach w Bootstrap, istnieje wiele klas do określania efektów wizualnych, a także przyspieszenia układu – dlatego polecam zapoznanie się z nimi i rozpoczęcie korzystania z nich. Aby poruszać się w cyklu artykułów o obsłudze Bootstrap w PrestaShop, wygodnie jest skorzystać z postu wprowadzającego .

0 Komentarze
Udostępnij

Prestashop Developer