bootstrap学习笔记-按钮

对应的元种类：

• 导航和导航条组件只支持<button>元素如果
• 如果 <a> 元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=”button” 属性。

一些预定义样式

<button type="button" class="btn btn-defalut"></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-link"></button>
<button type="button" class="btn btn-warning"></button>
<button type="button" class="btn btn-danger"></button>

• 如果要调整按钮的大小：有类：.btn-lg .btn-sm .btn-xs, 默认的可以看做是md的大小；
• 还可以将按钮变成块级元素，它的宽度会拉伸至父元素的100%，类：.btn-block

按钮组

• .btn-group
• .btn-group-justified (会与父容器端点对齐，就是宽度自适应；要注意的是：这里如果是<a>标签那么效果是ok的，但如果是另外2个标签，则需要对每一个元素外面都加一个<div class="btn-group">)
• .btn-group-vertical(垂直按钮，==注意==这里不要加.btn-group,不然效果上不太好)
  -同理可以修改大小，.btn-group-lg……

下拉菜单的箭头

<a href="#" class="btn btn-primary">按钮<span class="caret"></span></a>

或者使用组

<div class="btn-group">
    <a href="#" class="btn btn-primary">按钮</a>
    <a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>

• ==注意==这里只适合<a>和<button>标签，如果是input则效果上不太好。也就是说如果是按钮要和一些图标组合使用时最好用a或者button
• 向上的箭头：在父容器中加上类.dropup

<div class="btn-group dropup">
    <a href="#" class="btn btn-primary">按钮</a>
    <a href="#" class="btn btn-primary"><span class="caret"></span></a>
</div>