Bootstrap การปรับขนาดอินพุต
ขนาดอินพุตในแบบฟอร์ม
กำหนดความสูงขององค์ประกอบอินพุตโดยใช้คลาสเช่น.input-lgและ.input-sm.
กำหนดความกว้างขององค์ประกอบโดยใช้คลาสคอลัมน์กริดเช่น.col-lg-*และ.col-sm-*.
ขนาดความสูง
ตัวอย่างต่อไปนี้แสดงองค์ประกอบอินพุตที่มีความสูงต่างกัน:
ตัวอย่าง
<form>
<div class="form-group">
<label for="inputsm">Small
input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large
input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
คุณสามารถปรับขนาดป้ายชื่อและตัวควบคุมแบบฟอร์มภายในแบบฟอร์มแนวนอน.form-group-* ได้อย่างรวดเร็วโดย การเพิ่ม<div class="form-group">องค์ประกอบ:
ตัวอย่าง
<div class="form-group form-group-lg">
คุณยังสามารถปรับขนาดอินพุตทั้งหมดและองค์ประกอบอื่น ๆ ภายใน a .input-groupด้วย.input-group-smหรือ.input-group-lgคลาสได้อย่างรวดเร็ว:
ตัวอย่าง
<div class="input-group input-group-lg">
ขนาดคอลัมน์
ตัวอย่างต่อไปนี้แสดงองค์ประกอบอินพุตที่มีความกว้างต่างกันโดยใช้
.col-xs-*คลาสที่ต่างกัน:
ตัวอย่าง
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
ข้อความช่วยเหลือ
ใช้.help-blockชั้นเรียนเพื่อเพิ่มข้อความช่วยเหลือระดับบล็อกในแบบฟอร์ม:
ตัวอย่าง
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
<span class="help-block">This is some help text...</span>
</div>