Bootstrap按钮和按钮组样式

按钮样式

• 使用.btn和.btn-*实现按钮的预设样式;
• .btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用;
• 使用.btn .btn-outline-*可以实现按钮的轮廓效果;
• 使用.btn-lg或.btn-sm可以实现按钮尺寸的大和小;
• 使用.btn-block将按钮进行block区块设置;
• 使用.active启用按钮(默认)，使用.disabled禁用按钮，注意<a>的禁用（写在class里面，其它写在外面)
• 添加data-toggle=" button”实现按钮切换效果，使用.active可以默认按下; 任何带有class="btn"的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap提供了一些选项来定义按钮的样式，具体如下表所示:

类	功能
class="btn"	默认的按钮
class="btn-primary"	—组按钮中的初始状态
class="btn-success"	一个成功或积极的动作
class="btn-info"	警告信息的上下文按钮
class="btn-warning"	谨慎采取的动作
class="btn-danger"	潜在危险动作
class="btn-link"	看起来像一个连接，但保持按钮的行为

代码练习：

		<button class="btn btn-primary">按钮</button>
		<button class="btn btn-success">按钮</button>
		<a href="#" class="btn btn-info">超链接</a>
		<input type="button" class="btn btn-danger" value="input按钮" />
		<button class="btn btn-outline-info">按钮</button>
		<button class="btn btn-info btn-lg">大按钮</button>
		<button class="btn btn-info btn-sm">小按钮</button>
		<br />
		<button class="btn btn-primary btn-block">block按钮</button>
		<button class="btn btn-primary" disabled="disabled">按钮</button>
		<a href="#" class="btn btn-info disabled">超链接</a>
		<button class="btn btn-success" data-toggle="button">按钮</button>
		<button class="btn btn-success active">按钮</button>

按钮组样式

• 使用.btn-group实现传统方案的复选框和单选框样式;
• 使用.btn-group .btn-group-toggle实现全新方案的复选框和单选框;
• 使用.btn-group构建普通的按钮组;
• 使用.btn-toolbar构建分页工具类;
• 使用.btn-group-lg和.btn-group-sm 实现大尺寸和小尺寸;
• 使用.btn-group-vertical设置垂直按钮组; 代码练习：

		<div class="btn-group btn-group-toggle" data-toggle="button">
			<label class="btn btn-warning active ">
				<input type="checkbox" checked="checked" />java
			</label>
			<label class="btn btn-warning">
				<input type="checkbox" />Python
			</label>
			<label class="btn btn-warning">
				<input type="checkbox" />JavaScript
			</label>
		</div>
		<br /><br />
		<div class="btn-group btn-group-toggle" data-toggle="buttons">
			<label class="btn btn-warning  ">
				<input type="radio"  name="aa" checked="checked" />java
			</label>
			<label class="btn btn-warning">
				<input type="radio" name="aa" />Python
			</label>
			<label class="btn btn-warning">
				<input type="radio" name="aa" />JavaScript
			</label>
		</div>
		<div class="btn-toolbar">
			<div class="btn-group mt-5 mr-2">
				<button class="btn btn-danger">1</button>
				<button class="btn btn-danger">2</button>
				<button class="btn btn-danger">3</button>
			</div>
			<div class="btn-group mt-5 mr-2">
				<button class="btn btn-danger">4</button>
				<button class="btn btn-danger">5</button>
				<button class="btn btn-danger">6</button>
			</div>
		</div>
		<div class="btn-group mt-5 mr-2 btn-group-lg">
			<button class="btn btn-danger">1</button>
			<button class="btn btn-danger">2</button>
			<button class="btn btn-danger">3</button>
		</div>
		<div class="btn-group mt-5 mr-2 btn-group-sm btn-group-vertical">
			<button class="btn btn-danger">4</button>
			<button class="btn btn-danger">5</button>
			<button class="btn btn-danger">6</button>