Bootstrap: Panel
Giải phóng thời gian, khai phóng năng lực
Hãy sử dụng thành phần panel khi bạn muốn đặt nội dung của bạn vào bên trong một chiếc hộp.
Ví dụ cơ bản
Theo mặc định, toàn bộ những gì .panel
làm là thiết lập một số đường viền cơ bản và padding để chứa nội dung của bạn.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Panel có tiêu đề
Bạn có thể thêm tiêu đề cho panel bằng cách sử dụng .panel-heading
. Bạn cũng có thể sử dụng các thẻ từ <h1>
tới <h6>
cùng với class .panel-title
để style thêm cho tiêu đề.
Panel title
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Panel có footer
Hãy bọc các nút và text bổ sung vào bên trong .panel-footer
. Lưu ý rằng, footer của panel không kế thừa màu sắc và đường viền khi sử dụng các biến thể theo ngữ cảnh.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Biến thể theo ngữ cảnh
Tương tự như các thành phần khác, bạn có thể dễ dàng tạo ra các panel theo ngữ cảnh cụ thể bằng cách sử dụng các class trạng thái theo ngữ cảnh.
Panel title
Panel title
Panel title
Panel title
Panel title
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Panel và bảng
Bạn có thể thêm bất kỳ phần tử .table
không có đường viền nào vào bên trong một panel để đảm bảo tính thống nhất về giao diện. Nếu như có một .panel-body
cùng với bảng, chúng tôi sẽ thêm một đường viền trên cho bảng để phân tách nội dung.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Nếu như không có .panel-body
, panel sẽ được hiển thị một cách bình thường.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Panel và nhóm danh sách
Bạn có thể dễ dàng thêm danh sách nhóm được thiết lập full-width vào bên trong bất kỳ một panel nào.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Giải phóng thời gian, khai phóng năng lực