bootstrap tutorials kurs

Panele w Bootstrap

Czas czytania: < 1 minut

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

    <div class="panel panel-default">
      <div class="panel-heading">Panel z panel-default class</div>
      <div class="panel-body">Zawartość</div>
    </div>

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

<div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel z panel-default class</div>
      <div class="panel-body">Zawartość</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel z panel-primary class</div>
      <div class="panel-body">Zawartość</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel z panel-success class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel with panel-info class</div>
      <div class="panel-body">Zawartość</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel z panel-warning class</div>
      <div class="panel-body">Zawartość</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel z panel-danger class</div>
      <div class="panel-body">Zawartość</div>
    </div>
  </div>

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