Wygląd i szablony

Składniki Bootstrap w szablonach PrestaShop: pasek nawigacyjny, panele i tabele

Mamy ogólne pojęcie o Bootstrapie i jego klasach z poprzednich postów, w tym artykule przyjrzymy się bliżej pracy z elementami bootstrap i html w szablonach PrestaShop.

Nawigacja – praca z nawigatorem komponentu

Wyświetlanie paska nawigacyjnego na komputerze

Wyświetlanie paska nawigacyjnego na komputerze

Wyświetlanie paska nawigacyjnego na urządzeniach mobilnych (wszystkie elementy są ukryte i pojawiają się po kliknięciu przycisku)

navbar2

Element można naprawić podczas przewijania z góry lub z dołu.

Lista niektórych klas do pracy z navbar komponentu

  • navbar i navbar-inner: klasa do tworzenia elementu navbar.
  • navbar-fixed-top: podczas przewijania navbar zawsze będzie na wierzchu.
  • navbar-fixed-bottom: podczas przewijania navbar zawsze będzie znajdował się na dole.
  • marka – aby ustawić nazwę strony.
  • nav, nav-tabs i nav-pills są klasami bloków nawigacyjnych.
  • btn i btn-navba są klasami dla przycisku.
  • nav-collapse, collapse, data-toggle, data-target – dla automatycznie ukrytej zawartości.
  • icon-th-list – klasa do ustawiania ikon

Przykład użycia klas navbar z przyciskiem menu z prawej strony w szablonie PrestaShop

  < div class = "navbar navbar-fixed-top" >
   < div class = "navbar-inner" >
     < div class = "container" >
       <a class = "btn btn-navbar" data-toggle = "collapse" data-cel = ".nav-collapse">
         < span class = "icon-th-list" > < / span > < / a >
       <a href = "#" class = "brand"> SiteTitle < / a >
       < div class = "zwiń zwiń-zwiń" >
         < ul class = "nav pull-right" >
           < li class = "active" > <a href = "#"> Strona główna < / a > < / li >
           < li > <a href = "#"> O nas < / a > < / li >
           < li > <a href = "#"> Skontaktuj się z nami < / a > < / li >
         < / ul >
       < / div >
     < / div >
   < / div >
 < / div >

Tabele tabel

Bootstrap ułatwia tworzenie tabel bardziej atrakcyjnych, dodając klasy do swoich elementów.
Aby tabela utworzona przez ciebie była w stylu Bootstrap, musi przypisać klasę tabeli

  < table class = "table" >
 < / table >

Domyślnie Bootstrap dodaje do tabel następujący styl:

  • małe wewnętrzne wgłębienia w komórkach
  • poziome szare linie podziału między liniami

Główne klasy do pracy z tabelami:

  • table-responsive: aktywuje przewijanie w małych rozdzielczościach.
  • table-striped: dodaje szare tło do linii nieparzystych.
  • obramowane tabelą: dodaje poziome i pionowe granice do wszystkich komórek.
  • table-hover: dodaje szare tło do wierszy tabeli po najechaniu myszą.
  • skondensowane w tabeli: zmniejsza wewnętrzne wcięcia w komórkach.

Klasy do projektowania tła komórek

  • sukces – kolor tła: # dff0d8;
  • ostrzeżenie – kolor tła: # fcf8e3;
  • niebezpieczeństwo – kolor tła: # f2dede;
  • Informacje – kolor tła: # d9edf7;

Przykładowa tabela

  < table class = "table table-condensed table-hover" >
 < thead >
   < tr >
     < th > Imię < / th >
     < th > Nazwisko < / th >
     < th > E-mail < / th >
   < / tr >
 < / thead >
 < tbody >
   < tr class = "warning" >
     < td > John < / td >
     < td > Carter < / td >
     < td > johncarter@mail.com < / td >
   < / tr >
   < tr >
     < td > Peter < / td >
     < td > Parker < / td >
     < td > peterparker@mail.com < / td >
   < / tr >
   < tr >
     < td > John < / td >
     < td > Rambo < / td >
     < td > johnrambo@mail.com < / td >
     < / tr >
   < / tbody >
 < / table >

Panele

Czasami musisz umieścić informacje w wybranym bloku. W tym przypadku w Bootstrap jest specjalny komponent panelu.
Domyślnie Bootstrap dodaje obramowanie i wcięcia wokół panelu.

Główne klasy do pracy z panelem to :

  • panel, panel-ciało: definiuje blok jako panel.
  • domyślny panel, panel-główny, panel-sukces, panel-informacja, panel-ostrzeżenie i panel-niebezpieczeństwo: dodaj style wizualne.
  • nagłówek panelu i tytuł panelu: dodaj tytuł do panelu.
  • panel-footer: dodaje piwnicę do panelu.

Przykład użycia:

  < div class = "panel-domyślny" >
   < div class = "nagłówek panelu" >
     < h1 class = "panel-title" > Tytuł panelu < / h1 >
   < / div >
   < div class = "panel-body" >
       To jest zawartość panelu.
   < / div >
   < div class = "clearfix panel-stopka" >
     < div class = "pull-right" >
       <a href = "#" class = "btn btn-default"> Przejdź wstecz < / a >
     < / div >
   < / div >
 < / div >
0 Komentarze
Udostępnij

Prestashop Developer