Bootstrap: Panel

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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.

Basic panel example
<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 heading without title
Panel content

Panel title

Panel content
<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.

Panel content
<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 content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<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.

Panel heading

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 @twitter
<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.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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.

Panel heading

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>
» Tiếp: Thành phần nhúng responsive
« Trước: Nhóm danh sách (List group)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!