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

墨蓝 2021-09-14 14:10 390阅读 0赞

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

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

（1）颜色样式：

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

演示代码：

效果图：

![SouthEast][]

（2）大小样式：

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

（3）显示样式：

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

演示代码：

效果图：

![SouthEast 1][]

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

（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>

效果图：

![SouthEast 2][]

**按钮插件**，是指由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>

效果图：

![SouthEast 3][]

[SouthEast]: /images/20210813/42bc1f559fc74c288f0e53d7e9c0e984.png
[SouthEast 1]: /images/20210813/12522d7b5d64425cb0c7b4b83314ad86.png
[SouthEast 2]: /images/20210813/c3e1658ee66c4a5fbf165b75f510ebfb.png
[SouthEast 3]: /images/20210813/e273ab4046084a458167b650993cbeda.png