一直非常喜欢Bootstrap的按钮风格，仿照Bootstrap做了一套按钮。在ie6/7/8/9/10/11、chrome、firefox下能正常使用。

ie6/7/8不支持css3的样式。按钮在这些模式下没有圆角效果。在ie6/7下使用button标签能显示正常效果，使用其它标签存在文字偏移和背景显示不完整。

按钮支持div/span/input/button等元素，大小分为rhui-btn-large、rhui-btn、rhui-btn-small和rhui-btn-min四个级别，效果例如以下

所有代码

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>仿Bootstrap按钮</title>

	<style type="text/css">

		.rhui-btn {

			display: inline-block;

			margin: 0;

			padding: 0 20px;

			outline-style: none;

			border: 1px solid #ccc;

			border-radius: 4px;

			background-color: #fff;

			background-image: none;

			color: #333;

			vertical-align: middle;

			text-align: center;

			text-decoration: none;

			white-space: nowrap;

			font-size: 12px;

			line-height: 25px;

			cursor: pointer;

			/* ie6/ie7 inline-block hack */

			*zoom: 1;

			*display: inline;

		}

		.rhui-btn:hover {

			border-color: #adadad;

			background-color: #e6e6e6;

		}

		.rhui-btn-large {

			padding: 0 30px;

			font-weight: 700;

			font-size: 16px;

			line-height: 30px;

		}

		.rhui-btn-small {

			padding: 0 15px;

			line-height: 21px;

		}

		.rhui-btn-min {

			padding: 0 10px;

			line-height: 18px;

		}

		.rhui-btn-primary {

			border-color: #2e6da4;

			background-color: #337ab7;

			color: #fff;

		}

		.rhui-btn-primary:hover {

			border-color: #204d74;

			background-color: #286090;

		}

		.rhui-btn-success {

			border-color: #4cae4c;

			background-color: #5cb85c;

			color: #fff;

		}

		.rhui-btn-success:hover {

			border-color: #398439;

			background-color: #449d44;

			color: #fff;

		}

		.rhui-btn-info {

			border-color: #46b8da;

			background-color: #5bc0de;

			color: #fff;

		}

		.rhui-btn-info:hover {

			border-color: #269abc;

			background-color: #31b0d5;

		}

		.rhui-btn-warning {

			border-color: #eea236;

			background-color: #f0ad4e;

			color: #fff;

		}

		.rhui-btn-warning:hover {

			border-color: #d58512;

			background-color: #ec971f;

		}

		.rhui-btn-danger {

			border-color: #d43f3a;

			background-color: #d9534f;

			color: #fff;

		}

		.rhui-btn-danger:hover {

			border-color: #ac2925;

			background-color: #c9302c;

		}

	</style>

</head>

<body>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-large">默认样式</div>

		<a class="rhui-btn rhui-btn-large rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-large rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-large rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-large rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-large rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn">默认样式</div>

		<a class="rhui-btn rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-small">默认样式</div>

		<a class="rhui-btn rhui-btn-small rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-small rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-small rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-small rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-small rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-min">默认样式</div>

		<a class="rhui-btn rhui-btn-min rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-min rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-small rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-min rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-min rhui-btn-danger">危急</button>

	</div>

</body>

</html>

Bootstrap风格button的更多相关文章

  1. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  2. 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap

    受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...

  3. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  4. 【ztree系列——图标的修改】Bootstrap风格的ztree

    前段时间项目中需要用树形结构,在选取的时候参考了很多插件,经过很多尝试,最后又回归到了ztree上.以前用的界面框架是EasyUI,但是它的树结构在实现起来有点复杂,并且功能不是特别完善.dtree在 ...

  5. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  6. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  7. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  8. jQuery分页插件jBootstrapPage，一个Bootstrap风格的分页插件

    一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...

  9. 将markdown格式转化为bootstrap风格html

    前言:这些年markdown格式的文件很流行,像github里project说明文档都是用markdown格式编写. 一方面,我们能够通过pandoc将markdown文件转换为html,这样将htm ...

随机推荐

  1. css实现背景图片模糊

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Linux学习笔记04—IP配置

    一.自动获取IP只有一种情况可以自动获取IP地址,那就是你的Linux所在的网络环境中有DHCP服务.只要你的真机可以自动获取IP,那么安装在虚拟机的Linux同样也可以自动获取IP. 方法很简单,只 ...

  3. windows下用nginx配置https服务器

    1.安装nginx 先到nginx官网下在nginx http://nginx.org/en/download.html 将下载好的文件解压出来修改文件名为 nginx ,然后拷贝到C盘下,目录如下: ...

  4. C++ Primer笔记3_默认实參_类初探_名字查找与类的作用域

    1.默认函数实參 在C++中,能够为參数指定默认值,C语言是不支持默认參数的,Java也不支持! 默认參数的语法与使用: (1)在函数声明或定义时,直接对參数赋值.这就是默认參数: (2)在函数调用时 ...

  5. 虫趣：BAD POOL CALLER (par1: 0x20)

    [作者:张佩] [原文:http://www.yiiyee.cn/Blog/0x19-1/] 内核在管理内存的时候,为了提高内存使用效率,对于小片内存的申请(小于一个PAGE大小),都是通过内存池来操 ...

  6. systemtap 调试postgrel

    http://blog.163.com/digoal@126/blog/static/16387704020137140265557/   dtrace http://blog.163.com/dig ...

  7. 采用模拟账号读取Exchange server未读邮件的注意事项（链接邮箱问题）【转】

    最近做项目碰到Exchange中,用EWS API方法读取的未读邮箱(ConnectingIdType.PrincipalName设置该属性的方法)附带代码部分: 核心代码 using Microso ...

  8. 我所经历的SAP选型[转]

    这是一个失败的选型项目,而且在可遇见的未来公司也不会再经历SAP选型,甚至不会再启动erp项目,个中原因很难一言道尽,在此简要的说说我们的选型过程以及在选型过程中对各种因素的考虑. 一.重启选型工作七 ...

  9. delphi 取得任意程序的命令行

    program GetCommandLineExDemo; uses Windows; constSystemHandleInformation = 16;ProcessBasicInformatio ...

  10. spring-boot项目在eclipse中指定配置文件启动

    原文:https://blog.csdn.net/ztx114/article/details/80076339 如下图我的项目有三个配置文件,假如我向指定用application-test.yml启 ...