Panele w Bootstrap

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:

    <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

<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