Bootstrap面板 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　面板（Panels）是Bootstrap框架新增的一個組件，某些時候可能需要將某些 DOM 內容放到一個盒子里。對于這種情況，可以使用面板組件。本文將詳細介紹Bootstrap面板

基礎面板

　　基礎面板非常簡單，就是一個div容器運用了“panel”樣式，產生一個具有邊框的文本顯示塊，另外在里面添加了一個“div.panel-body”來放置面板主體內容

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}

<div class="panel">
    <div class="panel-body">我是一個基礎面板</div>
</div>

【部件】

　　基礎面板看上去太簡單了，Bootstrap為了豐富面板的功能，特意為面板增加“面板頭部”和“頁面尾部”的效果：

　　☑ panel-heading：用來設置面板頭部樣式

　　☑ panel-footer：用來設置面板尾部樣式

　　panel-heading和panel-footer也僅僅間距和圓角等樣式進行了設置

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

<div class="panel">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>

彩色面板

　　panel樣式并沒有對主題進行樣式設置，而主題樣式是通過panel-default來設置。在Bootstrap框架中面板組件除了默認的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面板：

　　☑ panel-primary：重點藍

　　☑ panel-success：成功綠

　　☑ panel-info:信息藍

　　☑ panel-warning：警告黃

　　☑ panel-danger：危險紅

　　使用方法很簡單，只需要在panel的類名基礎上增加自己需要的類名

<div class="panel">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">前端學習博客</div>
    <div class="panel-footer">作者：小火柴</div>
</div>

表格嵌套

　　一般情況下可以把面板理解為一個區域，在使用面板的時候，都會在panel-body放置需要的內容，可能是圖片、表格或者列表等

　　為面板中不需要邊框的表格添加 .table 類，使整個面板看上去更像是一個整體設計。如果是帶有 .panel-body 的面板，我們為表格的上方添加一個邊框，看上去有分隔效果

<div class="panel panel-default">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">
        <p>前端學習博客</p>
    </div>
    <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>名稱</th>
        <th>博客數量</th>
        <th>難度</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>HTML</td>
        <td>30</td>
        <td>較難</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>CSS</td>
        <td>60</td>
        <td>較難</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>javascript</td>
        <td>200</td>
        <td>很難</td>
      </tr>
    </tbody>
    </table>
</div>

　　如果沒有 .panel-body ，面版標題會和表格連接起來，沒有空隙

列表組嵌套

　　可以簡單地在任何面板中加入具有最大寬度的列表組

<div class="panel panel-default">
    <div class="panel-heading">小火柴的藍色理想</div>
    <div class="panel-body">
        <p>前端學習博客</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">HTML</li>
        <li class="list-group-item">CSS</li>
        <li class="list-group-item" >javascript</li>
        <li class="list-group-item">bootstrap</li>
        <li class="list-group-item">jquery</li>
    </ul>
</div>