Bootstrap - Bảng điều khiển

Chương này sẽ thảo luận về bảng Bootstrap. Thành phần bảng điều khiển được sử dụng khi bạn muốn đặt thành phần DOM của mình vào một hộp. Để có một bảng điều khiển cơ bản, chỉ cần thêm lớp.panelvào phần tử <div>. Cũng thêm lớp.panel-default cho phần tử này như được hiển thị trong ví dụ sau:

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Bảng điều khiển có tiêu đề

Có hai cách để thêm tiêu đề bảng điều khiển -

Sử dụng .panel-heading để dễ dàng thêm một vùng chứa tiêu đề vào bảng điều khiển của bạn.
Sử dụng bất kỳ <h1> - <h6> nào với .panel-title lớp để thêm một tiêu đề được tạo kiểu trước.

Ví dụ sau minh họa cả hai cách:

<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 With title
      </h3>
   </div>
   
   <div class = "panel-body">
      Panel content
   </div>
</div>

Bảng điều khiển có chân trang

Bạn có thể thêm chân trang vào bảng điều khiển, bằng cách gói các nút hoặc văn bản phụ trong một lớp chứa <div> .panel-footer. Ví dụ sau đây chứng minh điều này.

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <div class = "panel-footer">Panel footer</div>
</div>

Chân trang bảng điều khiển 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 vì chúng không có nghĩa là ở nền trước.

Bảng điều khiển thay thế theo ngữ cảnh

Sử dụng các lớp trạng thái theo ngữ cảnh như, panel-primary, panel-success, panel-info, panel-warning, panel-danger, để làm cho một bảng có ý nghĩa hơn đối với một ngữ cảnh cụ thể.

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

Bảng điều khiển có bảng

Để có một bảng không có đường viền trong một bảng điều khiển, hãy sử dụng lớp .tabletrong bảng điều khiển. Giả sử có một <div> chứa.panel-body, chúng tôi thêm một đường viền phụ vào đầu bảng để phân tách. Nếu không có <div> chứa.panel-body, sau đó thành phần di chuyển từ tiêu đề bảng sang bảng mà không bị gián đoạn.

Ví dụ sau đây chứng minh điều này -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

Bảng điều khiển với nhóm Danh sách

Bạn có thể bao gồm các nhóm danh sách trong bất kỳ bảng nào. Tạo bảng điều khiển bằng cách thêm lớp.panelvào phần tử <div>. Cũng thêm lớp.panel-defaultcho phần tử này. Bây giờ trong bảng điều khiển này bao gồm các nhóm danh sách của bạn. Bạn có thể học cách tạo một nhóm danh sách từ chương Danh sách nhóm .

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>