一直非常喜欢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. 使用NewLife网络库构建可靠的自动售货机Socket服务端（一）

    最近有个基于tcp socket 协议和设备交互需求,想到了新生命团队的各种组件,所以决定用NewLife网络库作为服务端来完成一系列的信息交互. 第一,首先说一下我们需要实现的功能需求吧 1,首先客 ...

  2. RubyMine8 安装

    在win7下面安装RubyMine8 中文 汉化 1.需要下载 RubyMine8的程序包 2.先安装好 RubyMine8  很简单  点击下一步就可以  选择安装目录这应该就不需要说了 3.汉化 ...

  3. Unity中Web.Config文件的配置与调用

    在上一篇文章“Unit简单依赖注入”我们可以实现构造对象和被依赖对象之间的 松耦合,使我们的抽象层(Player)能够保持稳定,但是在并没有把客户类和Player类之间彻底解耦,即当我们不想使用MP3 ...

  4. USB组合设备 Interface Association Descriptor (IAD)

    Communication Device Class,简称CDCUSB Compound Device,USB复合设备USB Composite Device,USB组合设备 摘要USB复合设备 Co ...

  5. systemtap 脚本示例

    .[root@localhost ~]# stap -v -e 'probe vfs.read {printf("read performed\n"); exit()}' Pass ...

  6. ios开发怎样才能做到代码和界面彻底分离，方便换肤？

    设想一下,你现在手底下有N个开发人员,你如何让这些人参与到一个ios开发项目中来?而不是独自一个人完成.

  7. .NET：Attribute 入门（内训教程）

    背景 接触过的语言中,C#(.NET 平台的多数语言都支持).Java 和 Python 都支持这个特性,本文重点介绍 C# 中的应用,这里简单的对 C#.java 和 Python 中的 Attri ...

  8. python测试开发django-23.admin列表页优化和排序

    前言 列表页优化和排序 ModelAdmin django的options.py里面 ModelAdmin类定义的参数可以设置admin后台列表页面,相关的参数如下 class ModelAdmin( ...

  9. Java锁的设计

    1.自旋锁 自旋锁是采用让当前线程不停地的在循环体内执行实现的,当循环的条件被其他线程改变时 才能进入临界区.如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ...

  10. docker查看容器的网络ip

    docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_name_or_id 可直 ...