Panele w Bootstrap

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 3, Kurs Bootstrap, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Bootstrap jest bardzo rozbudowaną biblioteką CSS dla niektórych nawet za bardzo 🙂 jednak dla osób posiadających mniejszą wiedzę z dziedziny CSS jest bardzo pomocny. Kolejnym gotowym rozwiązaniem dla stron internetowych jakie nam oferuje są panele (panels). Panele to pola posiadające oddzielny nagłówek oraz „ciało” otoczone ramką coś podobnego do obramowania tabeli.

Jak wygląda panel w Bootstrap

Przykładowy panel wygląda następująco:

Panel z panel-default class
Zawartość

Jak pokazuje powyższy przykład ciało panelu składa się z klasy nadrzędnej .panel jest to klasa, którą bedą posiadać wszystkie panele.
Następnie z np:

  • .panel-default
  • .panel-success
  • .panel-info
  • .panel-warning
  • .pan
  • .el-danger

W zależności od koloru jaki chcemy uzyskać.

Ciało panelu tworzone jest dzięki 2 klasą:

.panel-heading – nagłówek panelu

.panel-body – ciało panelu, miejsce na zawartość

Przykładowe panele

Panel z panel-default class
Zawartość

Panel z panel-primary class
Zawartość

Panel z panel-success class
Zawartość

Panel z panel-info class
Zawartość

Panel z panel-warning class
Zawartość

Panel z panel-danger class
Zawartość

źródło:
https://www.w3schools.com/bootstrap/bootstrap_panels.asp

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *