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

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 Input Sizing


Input Sizing in Forms

ตั้งค่าความสูงขององค์ประกอบการป้อนข้อมูลโดยใช้การเรียนเช่น .input-lg และ .input-sm

ตั้งค่าความกว้างขององค์ประกอบที่ใช้คลาสคอลัมน์ตารางเช่น .col-lg-* และ .col-sm-* *


Height Sizing

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

ตัวอย่าง

<form role="form">
  <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">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>
ลองตัวเอง»

คุณสามารถป้ายขนาดได้อย่างรวดเร็วและรูปแบบการควบคุมภายในเป็นรูปแบบแนวนอนโดยการเพิ่ม .form-group-* ไป <div class="form-group"> องค์ประกอบ:

ตัวอย่าง

<form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="lg">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="sm">
    </div>
  </div>
</form>
ลองตัวเอง»

Column Sizing

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงองค์ประกอบของการป้อนข้อมูลที่มีความกว้างที่แตกต่างกันโดยใช้ที่แตกต่างกัน .col-xs-* เรียน:

ตัวอย่าง

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

ข้อความช่วยเหลือ

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