Trong bài hộc tiếp theo này, chúng ta sẽ học cách tạo các panel thông qua các lớp được định nghĩa trong Bootstrap 3 các bạn nhé!
Panel là gì?
Panel ở đây được hiểu là một vùng khối hộp có viền bao quanh với nội dung bên trong. Một Panel được tạo ra bằng cách dùng lớp (class) .panel, và nội dung bên trong thì dùng lớp .panel-body.
Ví dụ :
<div class="panel panel-default"> <div class="panel-body">Panel cơ bản</div> </div>
Kết quả :
Lớp .panel-default được sử dụng để tạo kiểu màu cho Panel
Phần đầu Panel
Chúng ta có thể dùng lớp .panel-heading để tạo phần đầu cho 1 panel.
Ví dụ:
<div class="container"> <div class="panel panel-default"> <div class="panel-heading">Phần đầu Panel - hoc.tv</div> <div class="panel-body">Phần nội dung Panel</div> </div> </div>
Phần cuối Panel
Tương tự phần đầu Panel, chúng ta cũng có thể dùng lớp .panel-footer để tạo phần cuối Panel.
<div class="container"> <div class="panel panel-default"> <div class="panel-body">Phần nội dung Panel</div> <div class="panel-footer">Panel cuối Panel HocTV</div> </div> </div>
Nhóm Panel
Để gom nhóm nhiều panel với nhau trong bootstrap chúng ta dùng phần tử div với lớp .panel-group để bao các panel con lại với nhau.
Lớp .panel-group xóa lề dưới cùng của mỗi bảng điều khiển:
<div class="container"> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-body">Panel 1</div> </div> <div class="panel panel-default"> <div class="panel-body">Panel 2</div> </div> </div> </div>
Kết quả:
Panel với các lớp theo ngữ cảnh
Để tô màu cho Panel, hãy sử dụng các lớp theo ngữ cảnh (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-risk)
Ví dụ:
<div class="container"> <h2>Panels with Contextual Classes</h2> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading">Panel with panel-default class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-primary"> <div class="panel-heading">Panel with panel-primary class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-success"> <div class="panel-heading">Panel with 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">Panel Content</div> </div> <div class="panel panel-warning"> <div class="panel-heading">Panel with panel-warning class</div> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-danger"> <div class="panel-heading">Panel with panel-danger class</div> <div class="panel-body">Panel Content</div> </div> </div> </div>
Kết quả như sau:
