响应式前端框架Bootstrap系列（7）按钮

最新推荐文章于 2024-08-07 00:19:38 发布

黄泽平

最新推荐文章于 2024-08-07 00:19:38 发布

阅读量3.2k

点赞数 4

分类专栏： bootstrap3 前端集合 Bootstrap入门系列及组件归纳应用文章标签： Bootstrap

本文链接：https://blog.csdn.net/zeping891103/article/details/79042986

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

bootstrap3

20 篇文章 2 订阅

订阅专栏

Bootstrap入门系列及组件归纳应用

20 篇文章 2 订阅

订阅专栏

按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。

独立按钮，可用于<a>, <button>, 或 <input> 元素上。

（1）颜色样式：

.btn-default：默认/标准按钮
.btn-primary：主要
.btn-success：成功
.btn-info：信息
.btn-warning：警告
.btn-danger：危险

演示代码：

<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>

效果图：

（2）大小样式：

.btn-lg：制作一个大按钮
.btn-sm：制作一个小按钮
.btn-xs：制作一个超小按钮

（3）显示样式：

.btn-block：块级按钮(拉伸至父元素100%的宽度)
.btn-link：让按钮看起来像个链接 (仍然保留按钮行为)，可用于<a>标签
.active：按钮被点击
.disabled：禁用按钮

演示代码：

<button type="button" class="btn btn-primary btn-lg">原始按钮（大）</button>
<button type="button" class="btn btn-default btn-lg">默认按钮（大）</button>
<button type="button" class="btn btn-primary">原始按钮</button>
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">原始按钮（小）</button>
<button type="button" class="btn btn-default btn-sm">默认按钮（小）</button>
<button type="button" class="btn btn-primary btn-xs">原始按钮（特别小）</button>
<button type="button" class="btn btn-default btn-xs">默认按钮（特别小）</button>
<br /><br />
<button type="button" class="btn btn-link">链接按钮</button>
<button type="button" class="btn btn-primary btn-lg btn-block">块级元素</button>

效果图：

按钮组，指将多个按钮放在一起形成一个独立组件。

（1）按钮组样式：

.btn-group：该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar：该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。

（2）大小样式：

.btn-group-lg：大按钮组

btn-group-sm：小按钮组

btn-group-xs：特小按钮组

（3）布局样式（默认水平布局）：

.btn-group-vertical，垂直按钮组

演示代码：

<p>水平按钮组</p>
<div class="btn-group">
	<button class="btn btn-default">按钮1</button>
	<button class="btn btn-default">按钮2</button>
	<button class="btn btn-default">按钮3</button>
</div>
<br />
<br />

<p>垂直按钮组</p>
<div class="btn-group-vertical">
	<button class="btn btn-default">按钮1</button>
	<button class="btn btn-default">按钮2</button>
	<button class="btn btn-default">按钮3</button>
</div>
<br />
<br />
<p>大小不同按钮组</p>
<div class="btn-group btn-group-lg">
	<button class="btn btn-default">按钮1</button>
	<button class="btn btn-default">按钮2</button>
	<button class="btn btn-default">按钮3</button>
</div>
<div class="btn-group btn-group-sm">
	<button class="btn btn-default">按钮1</button>
	<button class="btn btn-default">按钮2</button>
	<button class="btn btn-default">按钮3</button>
</div>
<div class="btn-group btn-group-xs">
	<button class="btn btn-default">按钮1</button>
	<button class="btn btn-default">按钮2</button>
	<button class="btn btn-default">按钮3</button>
</div>

效果图：

按钮插件，是指由bs提供的具有特殊效果的按钮组件，实际上用处不多，本篇介绍按钮加载和按钮开关两种。按钮加载是指当点击按钮后触发.button('loading')方法，按钮处于某种状态中，如加载。当触发.button('complete')后表示状态完成。

.button('toggle')，切换快关状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。$().button('toggle')
.button('loading')，当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
.button('reset')，重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 按钮（Button）插件</title>
		<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
		<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script>
		<style>
			.mybtn-active {
				color: #333;
				background-color: #e6e6e6;
				border-color: #adadad;
				box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
			}
			
			.mybtn {
				width: 85px;
				height: 32px;
				border: 1px solid #ccc;
				text-align: center;
				vertical-align: middle;
				line-height: 2;
				border-radius: 4px;
				cursor: pointer;
				user-select: none;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<p>加载状态</p>
			<button id="fat-btn" class="btn btn-default" data-loading-text="加载中..." data-complete-text="加载完成" type="button">点击加载</button>
			<br />
			<br />
			<p>单个开关</p>
			<button type="button" class="btn btn-default" data-toggle="button">开关按钮</button>
			<br />
			<br />
			<p>自定义</p>
			<div id="myBtn" class="mybtn" οnclick="diyClickFun();">开关按钮</div>
			<br />
			<br />
			<p>多选开关</p>
			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-default">
        			<input type="checkbox"> 选项 1
    			</label>
				<label class="btn btn-default">
        			<input type="checkbox"> 选项 2
    			</label>
				<label class="btn btn-default">
        			<input type="checkbox"> 选项 3
    			</label>
			</div>
			<br />
			<br />
			<p>单选开关</p>
			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-default">
        			<input type="radio" name="options" id="option1"> 选项 1
    			</label>
				<label class="btn btn-default">
        			<input type="radio" name="options" id="option2"> 选项 2
    			</label>
				<label class="btn btn-default">
        			<input type="radio" name="options" id="option3"> 选项 3
    			</label>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			$("#fat-btn").click(function() {
				$(this).button('loading');
				var _this = this;
				setTimeout(function() {
					$(_this).button('reset');
					$(_this).button('complete');
				}, 1000);
			});
		});
		var bo = true;
		function diyClickFun() {
			if(bo) {
				bo = false;
				$("#myBtn").addClass("mybtn-active");
			} else {
				bo = true;
				$("#myBtn").removeClass("mybtn-active");
			}
		}
	</script>
</html>

效果图：