引入Bootstrap
<!-- 引入bootstrap -->
<link rel="stylesheet" >
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入bootstrap -->
button
- 官方文檔
<!-- Standard button -->
<button type="button" class="btn btn-default">（默認(rèn)樣式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險(xiǎn)）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>
- 應(yīng)用
<!-- btn btn-{default,primary,success,info,warning,danger,link} btn-{lg,sm,xs,null} {active,btn-block} {disabled} -->
<button type="button" class="btn btn-default">（默認(rèn)樣式）Default</button>
span/p
- 官方文檔
通過(guò)顏色來(lái)展示意圖，Bootstrap 提供了一組工具類戏阅。這些類可以應(yīng)用于鏈接，并且在鼠標(biāo)經(jīng)過(guò)時(shí)顏色可以還可以加深啤它，就像默認(rèn)的鏈接一樣奕筐。
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
和情境文本顏色類一樣，使用任意情境背景色類就可以設(shè)置元素的背景蚕键。鏈接組件在鼠標(biāo)經(jīng)過(guò)時(shí)顏色會(huì)加深救欧，就像上面所講的情境文本顏色類一樣。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
- 應(yīng)用
<!-- text-{muted,primary,success,info,warning,danger} bg-{primary,success,info,warning,danger} -->
<p class="text-success">...</p>
