【Bootstrap】全局CSS样式

按钮

可作为按钮的元素

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">提交</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

设置按钮样式

<!-- 默认按钮 -->
<button type="button" class="btn btn-default">默认</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-warning">黄色</button>

<!-- 红色按钮 -->
<button type="button" class="btn btn-danger">红色</button>

<!-- 透明按钮-->
<button type="button" class="btn btn-link">透明</button>

设置按钮尺寸

<p>
  <button type="button" class="btn btn-primary btn-lg">大按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary">默认尺寸</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
</p>

内联元素转换为块级元素

    &nbsp;<button type="button" class="btn btn-info">内联元素</button>
    <br>
    <br>
    <button type="button" class="btn btn-block btn-info">块级元素</button>

激活状态

    <a class="btn btn-default active" href="#" role="button">链接</a>
    <button class="btn btn-default active" type="submit">提交</button>
    <input class="btn btn-default active" type="button" value="输入">
    <input class="btn btn-default active" type="submit" value="提交">

禁用状态

	<a class="btn btn-default disabled" href="#" role="button">链接</a>
    <button class="btn btn-default disabled" type="submit">提交</button>
    <input class="btn btn-default disabled" type="button" value="输入">
    <input class="btn btn-default disabled" type="submit" value="提交">