zoukankan      html  css  js  c++  java
  • Bootstrap面板

    前面的话

      面板(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>

  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/7123548.html
Copyright © 2011-2022 走看看