ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Form Inputs


ตัวควบคุมฟอร์มการสนับสนุน

Bootstrap สนับสนุนการควบคุมรูปแบบต่อไปนี้:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap การป้อนข้อมูล

Bootstrap สนับสนุนทุกรูปแบบการใส่ HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel และ color

หมายเหตุ: ปัจจัยการผลิตจะไม่ถูกเรียกขานอย่างเต็มที่ถ้าชนิดของพวกเขาจะไม่ได้ประกาศอย่างถูกต้อง!

ตัวอย่างต่อไปนี้มีองค์ประกอบใส่สอง; หนึ่งพิมพ์ข้อความและเป็นหนึ่งในชนิดรหัสผ่าน:

ตัวอย่าง

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>
ลองตัวเอง»

Bootstrap Textarea

ตัวอย่างต่อไปนี้มี textarea :

ตัวอย่าง

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>
ลองตัวเอง»

Bootstrap ช่องทำเครื่องหมาย

ช่องทำเครื่องหมายถูกนำมาใช้ถ้าคุณต้องการให้ผู้ใช้เลือกจำนวนของตัวเลือกใด ๆ จากรายการของตัวเลือกที่ตั้งไว้

ตัวอย่างต่อไปนี้มีสามช่องทำเครื่องหมาย ตัวเลือกสุดท้ายที่ถูกปิดใช้งาน:

ตัวอย่าง

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>
ลองตัวเอง»

ใช้ .checkbox-inline ระดับถ้าคุณต้องการช่องทำเครื่องหมายเพื่อปรากฏบนบรรทัดเดียวกัน:

ตัวอย่าง

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
ลองตัวเอง»

Bootstrap Radio ปุ่ม

Radio ปุ่มจะใช้ถ้าคุณต้องการที่จะ จำกัด การใช้เพียงหนึ่งตัวเลือกจากรายการตัวเลือกที่ตั้งไว้

ตัวอย่างต่อไปนี้มีสามปุ่ม ตัวเลือกสุดท้ายที่ถูกปิดใช้งาน:

ตัวอย่าง

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
ลองตัวเอง»

ใช้ .radio-inline ระดับถ้าคุณต้องการปุ่มที่จะปรากฏบนบรรทัดเดียวกัน:

ตัวอย่าง

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
ลองตัวเอง»

Bootstrap เลือกรายการ


เลือกรายการที่จะใช้ถ้าคุณต้องการที่จะให้ผู้ใช้สามารถเลือกจากตัวเลือกหลาย

ตัวอย่างต่อไปนี้มีรายการแบบเลื่อนลง (เลือกรายการ):

ตัวอย่าง

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>
ลองตัวเอง»