Bootstrap 面板

2018-03-04 17:47 更新

面板（Panels）用于在带圆角的框中显示文本或图片。

面板组件在内容周围应用一些边框和填充。

以下是如何创建面板的方法：

<!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>

面板的上下文状态

我们可以为面板组件添加上下文状态类，如.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>

面板内的表格

我们可以在面板添加任意无边框表格，以创建更多信息表。

<!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>

以上内容是否对您有帮助：