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

    一、基础面板
      基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。

      由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容。

    <div class="panel panel-default">
        <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
    </div>

    二、带有头和尾的面板
      Bootstrap为了丰富面板的功能,特意为面板增加“面板头部”和“页面尾部”的效果:

      ☑ panel-heading:用来设置面板头部样式

      ☑ panel-footer:用来设置面板尾部样式

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">…</div>
        <div class="panel-footer">作者:NA</div>
    </div>

    三、彩色面板

      ☑ panel-primary:重点蓝

      ☑ panel-success:成功绿

      ☑ panel-info:信息蓝

      ☑ panel-warning:警告黄

      ☑ panel-danger:危险红

      使用方法就很简单了,只需要在panel的类名基础上增加自己需要的类名。

    <div class="panel panel-primary">…</div>
    <div class="panel panel-success">…</div>
    <div class="panel panel-info">…</div>
    <div class="panel panel-warning">…</div>
    <div class="panel panel-danger">…</div>
  • 相关阅读:
    Day01-基础加强笔记
    CS Academy Round#2 E.Matrix Coloring
    AtCoder ABC198 F
    NERC2021 B. Button Lock
    AtCoder ARC115 E
    NOI Online 2021 Round 1 提高组 愤怒的小 N
    洛谷 P6918 [ICPC2016 WF]Branch Assignment
    AtCoder ARC076 F
    Atcoder ABC155 F
    POJ 1966 Cable TV Network
  • 原文地址:https://www.cnblogs.com/liujiangping/p/5317784.html
Copyright © 2011-2022 走看看