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

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 CSS Forms Reference


Bootstrap's การตั้งค่าเริ่มต้น

รูปแบบการควบคุมของแต่ละบุคคลโดยอัตโนมัติได้รับจัดแต่งทรงผมระดับโลกบางคนที่มี Bootstrap

ต้นฉบับเดิมทั้งหมด <input>, <textarea> และ <select> องค์ประกอบที่มี class="form-control" มีการตั้งค่าความกว้าง: 100%; โดยค่าเริ่มต้น.

กฎระเบียบมาตรฐานของ Bootstrap รูปแบบ:

  • เพิ่ม role="form" ไป <form> องค์ประกอบ (ช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ)
  • ห่อป้ายชื่อและรูปแบบการควบคุมใน <div> องค์ประกอบที่มี class="form-group" (ที่จำเป็นสำหรับระยะห่างที่เหมาะสม)
  • เพิ่ม class="form-control" เพื่อต้นฉบับเดิมทั้งหมด <input>, <textarea> และ <select> องค์ประกอบ

ตัวอย่างต่อไปนี้จะสร้างรูปแบบที่เรียบง่ายเงินทุนที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและปุ่มส่ง:

บูตตัวอย่างแบบฟอร์ม

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

<form> เรียน

ชั้น ลักษณะ ตัวอย่าง
.form-inline ทำให้ <form> จัดชิดซ้ายที่มีการควบคุมแบบอินไลน์บล็อก (นี้จะใช้กับรูปแบบภายใน viewports ที่มีอย่างน้อย 768px กว้าง) ลองมัน
.form-horizontal สอดคล้องฉลากและกลุ่มควบคุมฟอร์มในรูปแบบแนวนอน ลองมัน