Bootstrap tutorial logo

Panele / Panels

autor: Robert

23 maja 2014

Panele są elementami wewnątrz których możemy zamieszczać teksty, listy, tabele itp. Ciężko mi opisać ogrom zastosowań tego elementu. Ja używam go na blogu jako listę wpisów. Na innych moich stronach znajduję dla niego zastosowanie jako elementy sidebaru, „pojemnik” na aktualności bądź promocje na stronie głównej. Na pewno jak tylko zobaczycie jak on wygląda, każdy znajdzie na swojej stronie zastosowanie dla niego:)

Podstawowy przykład

Podstawowy przykład panelu

Jak widzicie na powyższym przykładzie panel tworzymy poprzez nadanie divovi klas .panel .panel-default i zawarciu w nim kolejnego diva z klasą .panel-body w którym umieszczamy treść.

Panel z nagłówkiem

Wyróżniamy 2 rodzaje „nagłówków” panelu. Jeden z nich jest napisany fontem wielkości standardowego paragrafu, drugi z nich umożliwia lepsze wyróżnienie.

Nagłówek ze standardowym fontem
Zawartość panelu

Nagłówek wyróżniony

Zawartość panelu

W tym przypadku najpierw tworzymy podstawowy panel (.panel .panel-default) wewnątrz którego najpierw umieszczamy:

  • W przypadku zwykłego nagłówka div w klasą .panel-heading a następnie treść nagłówka
  • W przypadku pogrubionego nagłówka div z klasą .panel-heading a w nim znacznik h3 z klasą .panel-title

Panel ze stopką

Podobnie jak w poprzednim przykładzie utworzyliśmy panel z nagłówkiem, teraz stworzymy taki ze stopką:)

Zawartość panelu

Tworzenie panelu znów przebiega podobnie. Najpierw div z klasą .panel .panel-default i tutaj różnica – najpierw zamieszczamy div z klasą .panel-body a następnie div z klasą .panel-footer. Co jest zrozumiałe, najpierw chcemy wyświetlić zawartość panelu a następnie jego stopkę.

Panel z „bootstrapowym” kolorowaniem nagłówka

Jak już pisałem wielokrotnie Bootstrap posiada kilka klas umożliwiających „kolorowanie” niektórych elementów na kilka wybranych kolorów. Tutaj również mamy taką możliwość.

Nagłówek panelu
Zawartość panelu
Nagłówek panelu
Zawartość panelu
Nagłówek panelu
Zawartość panelu
Nagłówek panelu
Zawartość panelu
Nagłówek panelu
Zawartość panelu

Aby nadac kolor nagłówkowi zmieniamy klasę .panel-default na jedną z kolorów bootstrapa czyli np. .panel-warning

No i standardowo:

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (3 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: 12 komentarzy

Jolanta Makuła 8 stycznia 2015 o 21:00

Jak usunąć zaokrąglenie kątów ramki?
pozdrawiam

Odpowiedz
    Robert 9 stycznia 2015 o 09:25

    Stwórz sobie klasę .no-corners i użyj jej razem z klasą panel elementu Panel
    Kod masz tutaj:
    https://gist.github.com/anonymous/cae37a297d9714657b5b

    Odpowiedz
      Jolanta Makuła 9 stycznia 2015 o 12:01

      Niestety ramka z tytułem wciąż posiada zaokrąglone górne rogi

      Odpowiedz
        Robert 9 stycznia 2015 o 12:10

        Dodaj klasę .no-corners również do .panel-heading :)

        Odpowiedz
          Jolanta Makuła 9 stycznia 2015 o 12:43

          To wciąż nie to:)

          Robert 9 stycznia 2015 o 12:45

          Dopisz w klasie .no-corners, !important pomiędzy 0 a średnikiem. Jak nie pomoże to napisz do mnie poprzez formularz kontaktowy i podaj link do strony jeśli masz ją w sieci, postaram się pomóc.

          Jolanta Makuła 9 stycznia 2015 o 13:17

          !important zadziałało, bardzo dziękuję za pomoc :)

Bartek 30 czerwca 2015 o 20:57

W jaki sposób można obsłużyć taki button? Chodzi mi o przekierowanie na inny adres po jego wywołaniu pomijając JavaScript

Odpowiedz
    Robert 1 lipca 2015 o 07:42

    Chcesz aby nagłówek panela był linkiem, czy link ma się znaleźć wewnątrz panelu?
    Wystarczy użyć a href.

    Odpowiedz
Bartek 1 lipca 2015 o 18:51

Kolejne pytanie:
Czy w przypadku paneli z kolorowaniem nagłówka da się zrobić tak aby dany kolor dotyczył tylko i wyłącznie tego nagłówka, a cała ramka panela była bezbarwna? W tym momencie kolor ramki panela jest identyczny jak nagłówka.

Odpowiedz