一直非常喜欢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. pop3_用Java发送图文并茂的HTML邮件

    package com.syj; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.i ...

  2. asp.net core中的razor页面

    Razor 页面(Razor Pages)是 ASP.NET Core 2.0 中新增的一种Web页面模型,相对MVC形式更加简单易用,可以说是一个服务端的MVVM模型,本文简单的介绍一下它的用法. ...

  3. STM32F4XX devices vector table for EWARM toolchain.

    ;/******************** (C) COPYRIGHT 2015 STMicroelectronics ******************** ;* File Name : sta ...

  4. XPath and TXmlDocument

    XML example, from the OmniXML XPath demo: <?xml version="1.0" encoding="UTF-8" ...

  5. javascript:常用数组操作

    concat()方法 数组和数组的 粘结: var a=[1,2,3,4]; var b=[5,6,7,8]; var c=a.concat(b); console.log(c); // [1,2,3 ...

  6. Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)

    先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...

  7. PlaceholderTextView

    PlaceholderTextView 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 的 PlaceholderTextVi ...

  8. HttpMessageNotWritableException: Could not write JSON: No serializer found for class ****

    今天碰到一个异常,下面是错误信息 org.springframework.http.converter.HttpMessageNotWritableException: Could not write ...

  9. Chrome快捷键大全

    Chrome上我基本不怎么用快捷键,但是发现了切换标签页的快捷键后觉得十分好用,所以就分享如下. 切换上一个标签:Ctrl+PgUp 切换下一个标签:Ctrl+PgDn 打开新标签页:Ctrl+T 通 ...

  10. [Web 前端] Jquery 复制元素，并修改属性, 追加到另一个元素后面

    cp from  : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...