一、基础面板
  基础面板非常简单,就是一个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>

Bootstrap_面板的更多相关文章

  1. 自定义Inspector检视面板

    Unity中的Inspector面板可以显示的属性包括以下两类:(1)C#以及Unity提供的基础类型:(2)自定义类型,并使用[System.Serializable]关键字序列化,比如: [Sys ...

  2. 微信硬件H5面板开发(二) ---- 实现一个灯的控制

    在第一节中讲解了openApi的调用,这一篇讲一下如何实现一个灯的控制.就用微信提供的lamp例子来做,将代码扒下来(实在是没办法,没有示例),整合到自己的项目中.lamp源码:http://file ...

  3. 微信硬件H5面板开发(一) ---- 调用openApi

    微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...

  4. 用java单例模式实现面板切换

    1.首先介绍一下什么是单例模式: java单例模式是一种常见的设计模式,那么我们先看看懒汉模式: public class Singleton_ { //设为私有方法,防止被外部类引用或实例 priv ...

  5. Xcode 属性面板添加自定义控件属性

    让自定义控件像原生控件一样可以在属性面板配置参数,Apple文档传送 直接上效果图,根据

  6. amazeui折叠面板智能化展开

    2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...

  7. 出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码)

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  8. Unity3d:UI面板管理整合进ToLua

    本文基于 https://github.com/chiuan/TTUIFramework https://github.com/jarjin/LuaFramework_UGUI 进行的二次开发,Tha ...

  9. 我的面板我做主 -- 淘宝UWP中自定义Panel的实现

    在Windows10 UWP开发平台上内置的XMAL布局面板包括RelativePanel.StackPanel.Grid.VariableSizedWrapGrid 和 Canvas.在开发淘宝UW ...

随机推荐

  1. Mongodb基本操作说明

    Mongodb基本操作说明 1.首先cmd(管理员方式运行)下启动mongo服务(类似初始化工具): Mongod.exe 默认文件夹为 :c:\data\db 如果没有创建该文件夹的话,需要先创建该 ...

  2. Docker version 1.12.5建立registry私库

    sudo docker run -d -p 5000:5000 -v /opt/data/registry:/var/lib/registry registry :前面的是宿主机的地址(/opt/da ...

  3. C#类继承和接口继承时一些模棱两可的问题[转]

    原文地址:http://www.cnblogs.com/harleyhu/archive/2012/11/29/2794809.html 1.在father定义的方法若含有virtual关键字,chi ...

  4. charles Mock测试总结

    转载:http://www.jianshu.com/p/03081c9d1559 1.背景 测试存在问题:1.测试环境接口不稳定2.业务系统不是孤立存在的,关联方太多,而且关联系统常常出现不稳定的情况 ...

  5. Python基础-字符编码与转码

    ***了解计算机的底层原理*** Python全栈开发之Python基础-字符编码与转码 需知: 1.在python2默认编码是ASCII, python3里默认是utf-8 2.unicode 分为 ...

  6. JQuery DOM clone(true),对于克隆对象事件触发后,处理函数中this指代克隆对象

    <!doctype html> <html ng-app> <head> <script src="./jquery.js">< ...

  7. Linux selinux iptables

    关闭SELINUX – 使用getenforce命令检查SELINUX状态,若结果不是”Disabled”,可使用setenforce 0命令临时关闭SELINUX.要永久关闭SELINUX,需修改/ ...

  8. Android 自定义view (一)——attr 理解

    前言: 自定义view是android自定义控件的核心之一,那么在学习自定义view之前,我们先来了解下自定义view的自定义属性的attr的用法吧 Android attr 是什么 (1)attr ...

  9. 基于Yahoo网站性能优化的34条军规及自己的见解

    1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...

  10. Windows Phone 十、数据绑定

    数据绑定:是一种 XAML 和后台数据交互的方式(桥梁) 通过后台进行数据绑定 <Grid> <TextBox x:Name="txtHello" Text=&q ...