【Bootstrap】017-组件：面板、嵌入内容、Well

原创

訾博ZiBo 2023-02-23 09:39:44 博主文章分类：Bootstrap ©著作权

文章标签 bootstrap html css 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者訾博ZiBo的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、面板

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件；

1、基本实例

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="panel panel-default">
      <div class="panel-body">
        Basic panel example
      </div>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_html

2、带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖；

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_bootstrap_02

3、带脚注的面版

把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="panel panel-default">
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">Panel footer</div>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_css_03

4、情境效果

其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="bs-example" data-example-id="contextual-panels">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
          Panel content
        </div>
      </div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_html_04

5、带表格的面版

为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>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.</p>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_css_05

6、带列表组的面版

可以简单地在任何面版中加入具有最大宽度的列表组；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_bootstrap_06

二、具有响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放；

这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类；

超级提示： 不需要为 <iframe> 元素设置 frameborder="0" 属性，因为我们已经替你这样做了！

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
    
    <!-- 4:3 aspect ratio -->
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_html_07

三、Well

1、默认效果

把 Well 用在元素上，就能有嵌入（inset）的简单效果；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="well">well？这是什么东西？</div>
  </body>
</html>

运行结果：

【Bootstrap】017-组件：面板、嵌入内容、Well_bootstrap_08

2、可选类/样式

通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 要想实现点击效果，需要引入js -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="well">well？这是什么东西？</div>
    <div class="well well-lg">well？这是什么东西？well-lg大的！</div>
    <div class="well well-sm">well？这是什么东西？well-lg小的！</div>
  </body>
</html>