Tự học Bootstrap - Cơ bản - bài 17 - Thanh panel

Panels là gì

Trong bootstrap, panel là 01 hộp có đường viền với các lùi dòng bao quanh nội dung.

Panels được tạo ra bởi lớp .panel, và nội dung bên trong panel dùng lớp .panel-body

Ví dụ:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Lớp .panel-default được dùng để định dạng màu sắc của. Sẽ được đề cập ở cuối bài.

---

Panel Heading

Lớp .panel-heading thêm phần tiêu đề vào panel.

Ví dụ:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>

---

Phần chân Panel

Lớp .panel-footer thêm phần footer vào panel:

Ví dụ:

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

---

Nhóm Panel Group

Để nhóm nhiều panels lại với nhau , bọc 01 thẻ <div> bằng lớp .panel-group quanh chúng.

Lớp .panel-group xóa bỏ phần canh lề dưới của mỗi panel.

Ví dụ:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>

---

Panels với các lớp ngữ cảnh

Để thêm màu sắc cho panel, dùng các lớp ngữ cảnh (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, hoặc .panel-danger):

Ví dụ:

<div class="panel-group">

<div class="panel panel-success">

<div class="panel-heading">Phần heading success</div>

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

  </div>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48