Bootstrap 面板

2018-03-04 17:47 更新

面板（Panels）用于在帶圓角的框中顯示文本或圖片。

面板組件在內(nèi)容周圍應用一些邊框和填充。

以下是如何創(chuàng)建面板的方法：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
    <div class="panel panel-default">
        <div class="panel-heading"> ATTENTION
        </div>
        <div class="panel-body">
            Lorem  <br/>ipsum  <br/>dolor  <br/>sit <br/>ametnim ...
        </div>
        <div class="panel-footer">
            <a href="#" class="btn btn-danger btn-sm">Agree</a>
            <a href="#" class="btn btn-default btn-sm">Decline</a>
        </div>
    </div>

  </body>
</html>

注意

面板分為三部分：panel-head，panel-body和panel-footer。
這些面板部件中的每一個都是可選的。
面板有各種顏色選項。在前面的代碼中，我們使用了panel-default類的默認顏色。
你也可以使用其他類用于不同的顏色：
  • panel-primary默認為深藍色
  • panel-success默認為綠色
  • panel-info默認為天藍色
  • panel-warning默認為黃色
  • panel-danger默認為紅色

面板標題

我們還可以使用.panel-heading類為面板添加一個標題。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
        <div class="panel-heading">This Page is Disabled</div>
        <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.<br> <a href="#">Click here</a> to enable the page.</div>
    </div>
</div>
</body>
</html>

面板的h1-h6標題

我們可以使用.panel-title類來包含從<h1>到<h6>的標題元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Panels with Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h1 class="panel-title">Panel Title</h1>
        </div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.</div>
    </div>
</div>
</body>
</html>

面板腳注

我們可以使用 .panel-footer類為面板添加腳注。面板的腳注可以封裝按鈕或輔助文本。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
        <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div> 
        <div class="panel-footer clearfix">
            <div class="pull-right">
                <a href="#" class="btn btn-primary">Learn More</a>
                <a href="#" class="btn btn-default">Go Back</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

面板的上下文狀態(tài)

我們可以為面板組件添加上下文狀態(tài)類，如.panel-primary，.panel-success，.panel-info，.panel-warning或.panel-danger。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">301 Moved Permanently</h3>
        </div>
        <div class="panel-body">The requested page has been permanently moved to a new location.</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">200 OK</h3>
        </div>
        <div class="panel-body">The server successfully processed the request.</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">100 Continue</h3>
        </div>
        <div class="panel-body">The client should continue with its request.</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">400 Bad Request</h3>
        </div>
        <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">503 Service Unavailable</h3>
        </div>
        <div class="panel-body">The server is temporarily unable to handle the request.</div>
    </div>
</div>
</body>
</html>

面板內(nèi)的表格

我們可以在面板添加任意無邊框表格，以創(chuàng)建更多信息表。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">User Information</div>
    <div class="panel-body">
      <p>The following table contains some personal information about users.</p>
    </div>
    <!-- Table -->
    <table class="table">
      <thead>
        <tr>
          <th>Row</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>TOM</td>
          <td>Smith</td>
          <td>a@mail.com</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jack</td>
          <td>Smith</td>
          <td>b@mail.com</td>
        </tr>
        <tr>
          <td>3</td>
          <td>TOM</td>
          <td>Smith</td>
          <td>c@mail.com</td>
        </tr>
      </tbody> 
    </table>
  </div>
</div>
</body>
</html>

面板中的列表組

以下代碼顯示如何在面板中包含全寬度列表組。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Products</div>
    <div class="panel-body">
      <p>The following products are currently available on our store.</p>
    </div>
    <!-- List group -->
    <div class="list-group">
      <a href="#" class="list-group-item">Java<span class="badge">50</span>
      </a>
      <a href="#" class="list-group-item">Javascript <span class="badge">145</span>
      </a>
      <a href="#" class="list-group-item">CSS<span class="badge">30</span>
      </a>  
      <a href="#" class="list-group-item">HTML5<span class="badge">65</span>
      </a>
      <a href="#" class="list-group-item">SQL<span class="badge">8</span>
      </a>
    </div>
  </div>
</div>
</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號