การสร้าง Search Form และ Inline Form ด้วย Twitter Bootstrap
โพสต์แล้ว: 22/05/2013 2:53 pm
การสร้าง Search Form
ใส่ code นี้ลงไปใน ส่วนของ <body>
ผลลัพธ์จะออกมาดังรูป
การสร้าง In-line Form
ผลลัพธ์ที่ได้ดังรูป
ขนาดของกล่องเราสามารถกำหนดได้ รูปด้านบนกำหนดเป็น input-small
ผลลัพธ์ที่ได้ดังรูป
เลือกขนาดได้ตามรูป โดยใช้ code ด้านบนคะ
ใส่ code นี้ลงไปใน ส่วนของ <body>
โค้ด: เลือกทั้งหมด
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
โค้ด: เลือกทั้งหมด
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
โค้ด: เลือกทั้งหมด
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
เลือกขนาดได้ตามรูป โดยใช้ code ด้านบนคะ