1、一个示例
<!-- 确定按钮 -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- 次等按钮，比如取消-->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- 指示成功或积极行为 -->
<button type="button" class="btn btn-success">Success</button>
<!-- 信息提醒按钮-->
<button type="button" class="btn btn-info">Info</button>
<!-- 提示需要谨慎的行为 -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- 表示危险或潜在的负作用行为 -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- 强调一个按钮，使它看起来像一个链接的同时保持按钮的行为 -->
<button type="button" class="btn btn-link">Link</button><button type="button" class="btn btn-success" value="Success">
默认样式的<button>就不写了，哈哈 样子比较起来真的好难看。
PS：通过BS的学习，发现在web开发时，代码也存在语义。真是大大的丰富了文本的内涵。感觉很赞。
2、按钮标签
<a class="btn btn-primary" href="#">Link</a>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">PS： 1、.btn 类可以是在用<a>、<button>、<input type=button>和<input type=sumbit>中。
2、<a>标签中的role属性，其意义有两种。一：纯语义。二：协助其他控件（屏幕阅读器）传达某个指定意义
3、描边按钮
需要一个按钮，但是不要他们自带的背景颜色？请用 .btn-*-outline 代替默认的修饰类，移除这些按钮上面的所有的背景底图和底色。
<button type="button" class="btn btn-primary-outline">btn-primary-outline</button>
<button type="button" class="btn btn-secondary-outline">btn-secondary-outline</button>
<button type="button" class="btn btn-success-outline">btn-success-outline</button>
<button type="button" class="btn btn-warning-outline">btn-warning-outline</button>
<button type="button" class="btn btn-danger-outline">btn-danger-outline</button>PS：如上所述，也可以使用在<a>、<button>和<input>中。
4、按钮尺寸
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-lg">class="btn btn-primary btn-lg"</button>
<button type="button" class="btn btn-secondary btn-lg">class="btn btn-secondary btn-lg"</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary">class="btn btn-primary"</button>
<button type="button" class="btn btn-secondary">class="btn btn-secondary"</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm">class="btn btn-primary btn-sm"</button>
<button type="button" class="btn btn-secondary btn-sm">class="btn btn-secondary btn-sm"</button>
</div>
</div>PS：从高度看出每个尺寸的差别。
下图是使用 .btn-block类。将按钮元素充满整个父类宽度。
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-lg btn-block">class="btn-lg btn-block"</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">class="btn-lg btn-block"</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-block">class="btn-block"</button>
<button type="button" class="btn btn-secondary btn-block">class="btn-block"</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-sm btn-block">class="btn-sm btn-block"</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">class="btn-sm btn-block"</button>
</div>5、激活状态
激活状态是指，按钮呈现被按下时的样子。只需要在按钮上 .active 类
<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg" role="button">Link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>PS：效果确实是hover的状态。但鼠标浮动在 .active类的按钮上时，颜色会更加深一些
6、禁用状态
<div class="col-sm-12">
<div>《button》标签可以使用HTML5的属性 disabled在禁止使用，光标会变禁用样式</div>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</div>
<div class="col-sm-12">
<div>由于《a》标签不支持disabled属性，则使用bs提供的.disabled类伪装。光标无变化</div>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
</div>7、按钮插件
还可以对按钮做更多。可以控制按钮的状态或者为更多组件创建按钮组，像工具栏之类的。
切换状态
<div class="col-sm-12">
<button type="button" class="btn btn-primary" data-toggle="button">
class="btn btn-primary" 增加属性 data-toggle="button"
</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary active" data-toggle="button">
class="btn btn-primary active" 增加属性 data-toggle="button"
</button>
</div>PS：增加 data-toggle="button" 属性的效果是，点击后按钮保持被active状态。
如果需要初始时就显示active的状态，需要手动加入 .active类和属性aria-pressed="true"。
复选框和单选按钮
复选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
</div>使用按钮组，给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。
如果需要在初始时就是选装状态，则需要在 <label>标签手动加入 .active类。复选框手动checked。
单选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>使用按钮组，给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。
如果需要在初始时就是选装状态，则需要在 <label>标签手动加入 .active类。复选框手动checked。
方法(function)
$().button('toggle') 切换到按下状态。给按钮一个它已经被激活的外观。
<button id="abc" class="btn btn-success">test</button>
<button onclick="active_btn()" class="btn btn-warning">active_btn()</button>
<script type="text/javascript">
function active_btn(){
$("#abc").button("toggle");
}
</script>PS： 点击按钮 active_a() ，test目标显示被选中。再次点击，test取消选中。
来源：oschina
链接：https://my.oschina.net/u/199513/blog/646070