Bootstrap's การตั้งค่าเริ่มต้น
รูปแบบการควบคุมของแต่ละบุคคลโดยอัตโนมัติได้รับจัดแต่งทรงผมระดับโลกบางคนที่มี Bootstrap
ต้นฉบับเดิมทั้งหมด <input>, <textarea> และ <select> องค์ประกอบที่มี class="form-control" มีการตั้งค่าความกว้าง: 100%; โดยค่าเริ่มต้น.
กฎระเบียบมาตรฐานของ Bootstrap รูปแบบ:
- เพิ่ม role="form" ไป <form> องค์ประกอบ (ช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ)
- ห่อป้ายชื่อและรูปแบบการควบคุมใน <div> องค์ประกอบที่มี class="form-group" (ที่จำเป็นสำหรับระยะห่างที่เหมาะสม)
- เพิ่ม class="form-control" เพื่อต้นฉบับเดิมทั้งหมด <input>, <textarea> และ <select> องค์ประกอบ
ตัวอย่างต่อไปนี้จะสร้างรูปแบบที่เรียบง่ายเงินทุนที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและปุ่มส่ง:
บูตตัวอย่างแบบฟอร์ม
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> ลองตัวเอง» <form> เรียน
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .form-inline | ทำให้ <form> จัดชิดซ้ายที่มีการควบคุมแบบอินไลน์บล็อก (นี้จะใช้กับรูปแบบภายใน viewports ที่มีอย่างน้อย 768px กว้าง) | ลองมัน |
| .form-horizontal | สอดคล้องฉลากและกลุ่มควบคุมฟอร์มในรูปแบบแนวนอน | ลองมัน |