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