【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="提交">