在本章中,我們將學習如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡單的 HTML 標簽和擴展的類即可創(chuàng)建出不同樣式的表單。
完整請點這里 --->
Bootstrap 提供了下列類型的表單布局:
基本的表單結構是 Bootstrap 自帶的,個別的表單控件自動接收一些全局樣式。下面列出了創(chuàng)建基本表單的步驟:
如果需要創(chuàng)建一個表單,它的所有元素是內聯的,向左對齊的,標簽是并排的,請向標簽添加 class .form-inline。
水平表單與其他表單不僅標記的數量上不同,而且表單的呈現形式也不同。如需創(chuàng)建一個水平布局的表單,請按下面的幾個步驟進行:
Bootstrap 支持最常見的表單控件,主要是 input、textarea、checkbox、radio 和 select。
最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的,這樣才能讓 input 獲得完整的樣式。
當您需要進行多行輸入的時,則可以使用文本框 textarea。必要時可以改變 rows 屬性(較少的行 = 較小的盒子,較多的行 = 較大的盒子)。
復選框和單選按鈕用于讓用戶從一系列預設置的選項中進行選擇。
當您想讓用戶從多個選項中進行選擇,但是默認情況下只能選擇一個選項時,則使用選擇框。
除了 :focus 狀態(tài)(即,用戶點擊 input 或使用 tab 鍵聚焦到 input 上),Bootstrap 還為禁用的輸入框定義了樣式,并提供了表單驗證的 class。
當輸入框 input 接收到 :focus 時,輸入框的輪廓會被移除,同時應用 box-shadow。
如果您想要禁用一個輸入框 input,只需要簡單地添加 disabled 屬性,這不僅會禁用輸入框,還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
對添加 disabled 屬性來禁用內的所有控件。
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class(.has-warning、 .has-error 或 .has-success)即可使用驗證狀態(tài)。