Bảng khởi động
Tấm
Một bảng điều khiển trong bootstrap là một hộp có viền với một số phần đệm xung quanh nội dung của nó:
Bảng điều khiển cơ bản
Các bảng được tạo bằng lớp .panel và nội dung bên trong bảng có lớp .panel-body :
Ví dụ
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
Hãy tự mình thử » Lớp .panel-default được sử dụng để định kiểu màu của bảng điều khiển. Xem ví dụ cuối cùng trên trang này để biết thêm các lớp theo ngữ cảnh.
Tiêu đề bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
Lớp .panel-heading thêm một tiêu đề vào bảng điều khiển:
Ví dụ
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>
Hãy tự mình thử » Chân trang của bảng điều khiển
Nội dung bảng điều khiển
Lớp .panel-footer thêm chân trang vào bảng điều khiển:
Ví dụ
<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Hãy tự mình thử »Nhóm bảng điều khiển
Để nhóm nhiều bảng lại với nhau, hãy bọc <div> với lớp .panel-group xung quanh chúng.
Lớp .panel-group xóa lề dưới của mỗi bảng:
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>
Hãy tự mình thử »Bảng điều khiển với các lớp theo ngữ cảnh
Để tô màu cho bảng điều khiển, hãy sử dụng các lớp theo ngữ cảnh ( .panel-default , .panel-primary , .panel-success , .panel-info , .panel-warning hoặc .panel-danger ):
Ví dụ
Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
