#47. Panele

Tworzenie paneli

Przeglądając strony internetowe zauważyłeś, że kontent można zamieścić w estetycznym “pudełku”? Pokaże Ci jak stworzyć tzw. panele.

Aby wykorzystać możliwości paneli, należy utworzyć elementy div z klasami panel panel dafault oraz drugi, wewnątrz niego, z klasą panel-body.

Panel na naszej stronie może nam się przydać do umieszczania, np. ważnych informacji o naszych produktach, itp… 

Poniżej dodaję przykład w którym zastosowałem najprostszą wersję panelu, jednak dalej poznasz jak je stylować za pomocą dodatkowych klas Bootstrapa:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

blazing-pine-eijiu

blazing-pine-eijiu danielminschinski

Heading i footer panelu

Powyżej zobaczyłeś jak stworzyć prosty przykład panelu.

Zwykły tekst w “pudełku” nie jest idealnym rozwiązaniem. Framework Bootstrap daje możliwość dodania także tytułu, który będzie wyróżniał dany panel.

Tak zwany header i footer utworzysz dzięki dodaniu kolejnego elementu div z pomocniczą klasą.

Zadajesz sobie pytanie – jaka jest różnica miedzy heading a footer? Sama nazwa wskazuje – heading stylowany jest pod wyświetlanie nad “pudełkiem”, a tzw. footer powinien znajdować się pod boxem. 

Zmodyfikowałem poprzedni przykład. Przeanalizuj go:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

sweet-shape-kubwc

sweet-shape-kubwc danielminschinski

Kolorowanie paneli

Teraz czas na kolorowanie paneli. Wyróżnienie boxów kolorem może Ci się przydać przy wyróżnianiu informacji. Podobnie jak we wcześniejszych materiałach (np. przy formularzu) wykorzystamy do tego pomocnicze klasy. Tym razem jak się domyślasz “przedrostkiem” będzie panel-*. Następnie w zależności od tego jaki kolor będzie potrzebny użyjemy odpowiedniej klasy, np. panel-success dla koloru jasnozielonego. Ciekawostka: Element z klasą panel-footer nie jest kolorowany, a jedynie element z klasą panel-heading. Uwaga: Jeżeli dodajesz pomocniczą klasę z kolorem panelu to niepotrzebna jest wtedy klasa panel-default odpowiada ona za podstawową paletę kolorów (analogicznie jak w przypadku przycisków w Bootstrapie)! Spójrz na poniższy przykład i przeanalizuj go:
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

jolly-feather-57n7x

jolly-feather-57n7x danielminschinski

Tabela w panelach

W panelach możemy trzymać wszelkiego rodzaju elementy – użycie ich nie ogranicza nas jedynie do tekstu.

W materiale o tabelach nauczyliśmy się jak się je tworzy, więc tutaj wykorzystasz nabytą wiedzę i dodasz je do paneli.

Element table tworzysz w głównym elemencie z klasą panel. W “pudełku” może być także element z klasą panel-body, a w nim paragraf, jednak nie jest to konieczne. W przykładach zobaczysz dwa przykłady implementacji tabeli (z paragrafem oraz bez). Spójrz na niego i przeanalizuj:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

billowing-pine-wc7pn

billowing-pine-wc7pn danielminschinski

Panele za nami. Podstawowe możliwości pracy na panelach postarałem się Wam przedstawić. W kolejną środę przedstawię Wam możliwości Bootstrapa odnośnie obrazków i etykiet. 

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!