1. 程式人生 > >Bootstrap 禁用的按鈕

Bootstrap 禁用的按鈕

對於連結,只要新增 .disabled 類,就可以實現顏色變淺、褪掉漸變的效果,並讓按鈕看起來無法點選。當滑鼠移動按鈕上時,按鈕的樣式不再發生變化。如:

  1. <ahref="#"class="btn btn-large btn-primary disabled">Primary link</a>
  2. <ahref="#"class="btn btn-large disabled">Disabled Link</a>

效果如圖 3‑59所示:

Bootstrap禁用按鈕式連結圖3-59 Bootstrap禁用按鈕式連結

需要注意的是,.disabled 類只能禁用CSS互動行為,而無法禁用按鈕的預設行為。要禁用按鈕的預設行為,還需要藉助JavaScript指令碼。

HTML表單控制元件包含一個 disabled 屬性,也可以為按鈕新增 disabled 屬性來禁用按鈕,就用不著 JavaScript 指令碼了。Bootstrap中,包含 disabled 屬性,跟包含 .disabled 類,具有相同的樣式效果。如:

  1. <buttontype="button"class="btn btn-large disabled">Disabled Button</button>
  2. <buttontype="button"class="btn btn-large"disabled>Disabled Button</button>

效果如圖 3‑60所示:

Bootstrap禁用按鈕圖3-60 Bootstrap禁用按鈕