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:
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:
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ędziepanel-*. 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: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:
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