zoukankan      html  css  js  c++  java
  • Bootstrap 面板(Panels)

    一、面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示:

    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>

    二、面板标题

    我们可以通过以下两种方式来添加面板标题:

    • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.
    • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

    下面的实例演示了这两种方式:

    <div class="panel panel-default">
       <div class="panel-heading">
          不带 title 的面板标题
       </div>
       <div class="panel-body">
          面板内容
       </div>
    </div>
    
    <div class="panel panel-default">
       <div class="panel-heading">
          <h3 class="panel-title">
             带有 title 的面板标题
          </h3>
       </div>
       <div class="panel-body">
          面板内容
       </div>
    </div>

    三、面板脚注

    我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的实例演示了这点:

    <div class="panel panel-default">
       <div class="panel-body">
          这是一个基本的面板
       </div>
       <div class="panel-footer">面板脚注</div>
    </div>

    四、带语境色彩的面板

    使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板,实例如下:

    <div class="panel panel-primary">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-success">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-info">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-warning">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
    <div class="panel panel-danger">
       <div class="panel-heading">
          <h3 class="panel-title">面板标题</h3>
       </div>
       <div class="panel-body">
          这是一个基本的面板
       </div>
    </div>
  • 相关阅读:
    bzoj4152 [AMPPZ2014]The Captain
    bzoj2429 [HAOI2006]聪明的猴子
    bzoj1196 [HNOI2006]公路修建问题
    bzoj1083 [SCOI2005]繁忙的都市
    bzoj1050 [HAOI2006]旅行comf
    bzoj1088 [SCOI2005]扫雷Mine
    bzoj1085 [SCOI2005]骑士精神
    bzoj3437 小P的牧场
    bzoj1296 [SCOI2009]粉刷匠
    A1046 Shortest Distance (20)(20 分)
  • 原文地址:https://www.cnblogs.com/hjbky/p/7018290.html
Copyright © 2011-2022 走看看