bootstrap-按钮样式

<div class="container">
	<!-- 按钮的背景色 -->
	<div class="row">
		<button class="btn btn-default">确定</button>
		<button class="btn btn-primary">确定</button>
		<button class="btn btn-success">确定</button>
		<button class="btn btn-info">确定</button>
		<button class="btn btn-warning">确定</button>
		<button class="btn btn-danger">确定</button>
		<button class="btn btn-link">确定</button>
	</div>

	<!-- btn-block 让按钮的宽度变为100%,成为块级元素-->
	<div class="row" style="margin-top: 20px">
		<button class="btn btn-primary btn-block">确定</button>
	</div>

	<!-- 激活状态-->
	<div class="row" style="margin-top: 20px">
		<button class="btn btn-primary active">确定</button>
		<a href="#" class="btn btn-warning active">确定</a>
	</div>

	<!-- 禁用-->
	<div class="row" style="margin-top: 20px">
		<button class="btn btn-primary active" disabled>确定</button>
		<button class="btn btn-info active disabled">确定</button>
		<a href="#" class="btn btn-warning">确定</a>
	</div>
</div>

可以btn-lg, btn-md, btn-sm,btn-xs来设置按钮大小的;

效果图:

时间: 2024-07-31 14:33:09

bootstrap-按钮样式的相关文章

Bootstrap -- 按钮样式与使用

1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> &l

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:原始按钮样式(未被操作)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

Bootstrap 按钮,图片,辅助类

Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 类 描述 实例 .btn 为按钮添加基本样式 尝试一下 .btn-default 默认/标准按钮 尝试一下 .btn-primary 原始按钮样式(未被操作) 尝试一下 .btn-success 表示成功的动作 尝试一下 .bt

Bootstrap按钮插件

前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载的状态 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了 [注意]如果不

按钮样式加载等待

使用插件Ladda,基于bootstrap的样式实现加载等待的效果: 首先引用.css以及.js文件: <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js&

Bootstrap 按钮

摘要:这篇笔记主要是关于bootstrap提供的定义按钮的不同样式 . 1.按钮样式总结 以下样式可以用在<a>.<button>.<input>元素上. 因为:<a role="button"  href="#">.<input type="button">.<input type="submit">等表现出来的是按钮的形状 不过还是建议在<but

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:默认/标准按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:表示成功的动作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

BootStrap 按钮组简单介绍

学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdown-menu 和属性 data-toggle="dropdown"; 1:基本按钮组,仅仅一个 btn-group 就 OK 了. 1 <span class="btn-group " > 2 <button class="btn btn-p

safari下按钮样式失效

这两天遇到一个问题,页面在安卓手机里面正常显示,但是在IOS里面按钮的样式完全失效了,一番了解之后才知道是 appearance属性 的原因. 在原来的样式里面加上一行"-webkit-appearance : none ;",IOS下的按钮样式立马显示出来了 #btn{width:80%; padding:2% 0; color:#fff; font-family: 'kaiti'; background:#F3AA3B; border:none;     -webkit-borde