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

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.

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ą:)

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ść.

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ę.

(5 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Listy / List group
Nowszy post →
Studnia / Well

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 :)

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

Robert 2 lipca 2015 o 07:34

.panel {
  border: none !important;
}

Odpowiedz