Bootstrap 样式之 按钮

我们可以通过Bootstrap 提供的按钮样式快速的创建我们需要的按钮样式

先来看看按钮的样式

我们先来实现一下按钮，通过给元素添加样式使之成为一个按钮，例如 <a> <button> <input>

等等元素都可以通过添加按钮的样式变成按钮，但是一般的情况的话还是使用<button>来实现；

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</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>

显示效果：

我们看到一共有四种样式，一般是颜色的不同代表不同的含义；

按钮的大小也是可以调整的

通过btn-lg（大按钮）  btn-sm（小按钮）   btn-xs（特别小按钮）  可以设置三种不同的按钮大小样式

<button type="button" class="btn btn-success">默认大小的按钮</button>

<button type="button" class="btn btn-success btn-lg">大按钮</button>

<button type="button" class="btn btn-success btn-sm">小按钮</button>

<button type="button" class="btn btn-success btn-xs">小小按钮</button>

显示效果:

我们可以设置按钮的两种状态，激活 （active）和 禁用状态（disabled）

<button type="button" class="btn btn-success">默认状态的按钮</button>
<button type="button" class="btn btn-success active">激活状态的按钮</button>
<button type="button" class="btn btn-success disabled">禁用状态的按钮</button>

显示效果：