最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家

先上预览图:

默认样式:

绿色:

黄色:

蓝:

红:

使用方法:

引用MoUi.css

HTML中使用为:

<div class="mo-group mo-group-default mo-group-radius">
<div class="mo-group-title mo-group-title-left mo-group-title-sm">
<span class="fa fa-map-marker"></span> 标题
</div>
<div class="mo-group-body">
...
</div>
</div>

圆角样式

mo-group-radius

面板颜色样式为:

默认:mo-group-default

绿色:mo-group-success

蓝色:mo-group-primary

黄色:mo-group-warning

红色:mo-group-danger

标题浮动:

左浮动:mo-group-title-left

其他后续补充。。。

标题宽度:

考虑到标题的实际长度问题,设置百分比宽度在不同的分辨率中会导致太宽或者太窄的问题,很不好看,所以我给标题设定了几个固定宽度,基本能适用于所有场景了。

mo-group-title-xs  宽度100px

mo-group-title-sm 宽度200px

mo-group-title-md 宽度300px

mo-group-title-lg 宽度500px

源码下载:点击

欢迎转载,请注明出处!http://blog.pishiduo.com/content/35

纯css面板插件,自适应,多样式的更多相关文章

  1. 纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致

    先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box">            <div class="le ...

  2. 纯css实现宽度自适应,高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  3. 纯css背景图自适应

    只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系

  4. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  5. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  6. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  9. 如何用纯CSS布局两列,一列固定宽度,另一列自适应?

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

随机推荐

  1. php中签名公钥、私钥(SHA1withRSA签名)以及AES(AES/ECB/PKCS5Padding)加密解密详解

    由于http请求是无状态,所以我们不知道请求方到底是谁.于是就诞生了签名,接收方和请求方协商一种签名方式进行验证,来取得互相信任,进行下一步业务逻辑交流. 其中签名用得很多的就是公钥私钥,用私钥签名, ...

  2. 原始MAC地址

    D8CB8AD97D47

  3. hdu1466计算直线的交点数 非原创

    原文链接 平面上有n条直线,且无三线共点,问这些直线能有多少种不同交点数. 比如,如果n=2,则可能的交点数量为0(平行)或者1(不平行). Input输入数据包含多个测试实例,每个测试实例占一行,每 ...

  4. json操作相关记录

    json是javascript衍生的数据表示法,现在许多数据的处理都使用json. 平时用到的与json结构相似的有很多,如mongodb数据库,python的字典等.核心思想就是键值对. json的 ...

  5. OPPO R7在哪里打开USB调试模式的详细流程

    在我们使用PC连接安卓手机的时候,如果手机没有开启USB调试模式,PC则没办法成功检测到我们的手机,这时我们需要想办法将手机的USB调试模式打开,如下资料我们介绍OPPO R7如何开启USB调试模式的 ...

  6. linux忘记root密码怎么办

    如何找回root密码,如果我们不小心,忘记root密码,怎么找回? 思路:进入到单用户模式,然后修改root密码.因为进入单用户模式,root不需要密码就可以登录. 详细过程: 1.打开虚拟机 2.开 ...

  7. cookie session token详解

    cookie session token详解 转自:http://www.cnblogs.com/moyand/ 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, ...

  8. vue,新手上路,基础,常见问题

    1. 报这个错的  都是关键字问题,不要用关键字 做为组件的名字,不然肯定都会报错,如果找不到就一个字母的看,我就是 忘记改组件的名字导致报错,这个问题   改个名字就好,切记改全不然只有页面报错,文 ...

  9. Service启动流程

    Service启动流程从整个宏观上来看,它的模型如下 startService启动流程时序图 Activity中使用的startService方法是定义在Context的抽象类中,它的真正实现者是Co ...

  10. shiyan 3

    //info.h#ifndef INFO_H #define INFO_H #include <string> using std::string; class Info { public ...