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

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 Forms


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>
ลองตัวเอง»