Bootstrap來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。本文介紹一下Bootstrap的表單類型以及實現(xiàn)方法。Bootstrap 提供了下列類型的表單布局：- 垂直表單（默認）
- 內聯(lián)表單
- 水平表單
- 垂直或基本表單
基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創(chuàng)建基本表單的步驟：向父 <form> 元素添加 role="form"。把標簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。<!DOCTYPE html><html><head> <title>Bootstrap 實例 - 基本表單</title> <link rel="stylesheet" > <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級幫助文本的實例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button></form></body></html>結果如下所示：
內聯(lián)表單如果需要創(chuàng)建一個表單，它的所有元素是內聯(lián)的，向左對齊的，標簽是并排的，請向 <form> 標簽添加 class .form-inline。<!DOCTYPE html><html><head> <title>Bootstrap 實例 - 內聯(lián)表單</title> <link rel="stylesheet" > <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件輸入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox"> 請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button></form></body></html>結果如下所示：
默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯(lián)表單時，您需要在表單控件上設置一個寬度。使用 class .sr-only，您可以隱藏內聯(lián)表單的標簽。水平表單水平表單與其他表單不僅標記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個水平布局的表單，請按下面的幾個步驟進行：向父 <form> 元素添加 class .form-horizontal。把標簽和控件放在一個帶有 class .form-group 的 <div> 中。向標簽添加 class .control-label。<!DOCTYPE html><html><head> <title>Bootstrap 實例 - 水平表單</title> <link rel="stylesheet" > <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 請記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div></form></body></html>結果如下所示：
本文介紹了Bootstrap的表單類型和實現(xiàn)方法，下篇介紹表單支持的控件。