คงควบคุม
หากคุณจำเป็นต้องใส่ข้อความธรรมดาติดกับป้ายรูปแบบภายในรูปแบบแนวนอนใช้ .form-control-static
ชั้นบน <p>
องค์ประกอบ:
ตัวอย่าง
<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">
<p
class="form-control-static">[email protected]</p>
</div>
</div>
</form>
ลองตัวเอง» Bootstrap แบบฟอร์มการควบคุม States
- INPUT FOCUS - ร่างของท่านจะถูกลบออกและกล่องเงาถูกนำไปใช้ในการโฟกัส
- DISABLED INPUTS - เพิ่ม
disabled
แอตทริบิวต์ปิดการใช้งานช่องใส่ - DISABLED FIELDSETS - เพิ่ม
disabled
แอตทริบิวต์ fieldset ปิดการใช้งานการควบคุมทั้งหมดภายใน - READONLY INPUTS - เพิ่ม
readonly
แอตทริบิวต์การป้อนข้อมูลเพื่อป้องกันไม่ให้ผู้ใช้ป้อน - VALIDATION STATES - Bootstrap รวมถึงรูปแบบการตรวจสอบข้อผิดพลาดคำเตือนและข้อความที่ประสบความสำเร็จ หากต้องการใช้เพิ่ม
.has-warning
,.has-error
หรือ.has-success
ในการองค์ประกอบหลัก - ICONS - คุณสามารถเพิ่มไอคอนข้อเสนอแนะกับ
.has-feedback
การเรียนและไอคอน - HIDDEN LABELS - เพิ่ม
.sr-only
ระดับบนฉลากไม่สามารถมองเห็น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงบางส่วนของรัฐควบคุมรูปแบบดังกล่าวข้างต้นในรูปแบบแนวนอน:
ตัวอย่าง
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="col-sm-2
control-label">Focused</label>
<div
class="col-sm-10">
<input
class="form-control" id="focusedInput" type="text" value="Click to
focus">
</div>
</div>
<div
class="form-group">
<label for="inputPassword"
class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input
class="form-control" id="disabledInput" type="text"
disabled>
</div>
</div>
<fieldset disabled>
<div
class="form-group">
<label for="disabledTextInput"
class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group
has-success has-feedback">
<label class="col-sm-2
control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning
has-feedback">
<label class="col-sm-2
control-label" for="inputWarning">
Input with warning and icon</label>
<div class="col-sm-10">
<input
type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error
and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
ลองตัวเอง» และนี่คือตัวอย่างของบางส่วนของรัฐควบคุมรูปแบบในรูปแบบอินไลน์:
ตัวอย่าง
<form class="form-inline" role="form">
<div
class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label
for="inputPassword">Disabled</label>
<input
class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign
form-control-feedback"></span>
</div>
<div
class="form-group has-error has-feedback">
<label
for="inputError2">Input with error</label>
<input
type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
ลองตัวเอง»