首頁 > web前端 > js教程 > 全面解析Bootstrap表單使用方法(表單按鈕)_javascript技巧

全面解析Bootstrap表單使用方法(表單按鈕)_javascript技巧

WBOY
發布: 2016-05-16 15:30:18
原創
1382 人瀏覽過

一、多標籤支援

一般製作按鈕除了使用

同樣,在Bootstrap框架中製作按鈕時,除了剛才所說的這些標籤元素之外,還可以使用在其他的標籤元素上,唯一需要注意的是,要在製作按鈕的標籤元素上添加類名“.btn”。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
登入後複製

二、客製風格

  在Bootstrap框架中不同的按鈕風格都是透過不同的類別名稱來實現。

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>


登入後複製

三、按鈕大小

  在Bootstrap框架中,對於按鈕的大小,也是可以自訂的。  

  在Bootstrap框架中提供了三個類別名稱來控制按鈕大小:

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
登入後複製


四、塊狀按鈕

  Bootstrap框架中提供了一個類別名稱「.btn-block」。按鈕使用這個類別名稱就可以讓按鈕充滿整個容器,而這個按鈕不會有任何的padding和margin值。在實際當中,常把這種按鈕稱為塊狀按鈕。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

登入後複製

 

五、按鈕停用狀態

  在Bootstrap框架中,要停用按鈕有兩種實作方式:

  方法1:在標籤中加入disabled屬性

  方法2:在元素標籤中加入類別名稱「disabled」

  兩者的主要差異是:

  「.disabled」樣式不會禁止按鈕的預設行為,比如說提交和重置行為等.

  在元素標籤中加入「disabled」屬性的方法是可以禁止元素的預設行為的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

登入後複製

今天再為大家補充一點新知識:Bootstrap表單提示資訊

平常在製作表單驗證時,要提供不同的提示資訊。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式,將提示訊息以區塊狀顯示,並顯示在控制項底部。

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

登入後複製

以上就是針對Bootstrap表單按鈕的詳細介紹,之後還有更多內容會不斷更新,希望大家繼續關注。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板