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>
  • 相关阅读:
    react的路由权限控制
    react的路由中的switch和exact的使用
    react中antd的表格自定义展开
    webstorm的git操作使用
    ES6的相关语法
    vue导出文件下载
    vue如何解析xml文件 x2js
    ES6模板字符串
    彻底卸载微软拼音输入法
    systemverilog新增的always_comb,always_ff,和always_latch语句
  • 原文地址:https://www.cnblogs.com/liujiangping/p/5317784.html
Copyright © 2011-2022 走看看