การสร้าง Search Form และ Inline Form ด้วย Twitter Bootstrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

การสร้าง Search Form และ Inline Form ด้วย Twitter Bootstrap

โพสต์ที่ยังไม่ได้อ่าน โดย M008 »

การสร้าง Search Form
ใส่ code นี้ลงไปใน ส่วนของ <body>

โค้ด: เลือกทั้งหมด

<form class="form-search">
			<input type="text" class="input-medium search-query">
			<button type="submit" class="btn">Search</button>
</form>
ผลลัพธ์จะออกมาดังรูป
1.jpg
1.jpg (7.5 KiB) Viewed 6343 times
การสร้าง In-line 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>
ผลลัพธ์ที่ได้ดังรูป
2.jpg
2.jpg (12.48 KiB) Viewed 6343 times
ขนาดของกล่องเราสามารถกำหนดได้ รูปด้านบนกำหนดเป็น input-small

โค้ด: เลือกทั้งหมด

<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 ด้านบนคะ
3.jpg
3.jpg (24.93 KiB) Viewed 6343 times
ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

Re: การสร้าง Search Form และ Inline Form ด้วย Twitter Bootstrap

โพสต์ที่ยังไม่ได้อ่าน โดย boo_kyoshii »

ลองทำตามค่ะ
e-mail.jpg
e-mail.jpg (18.42 KiB) Viewed 6104 times
testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) ดาวน์โหลดแล้ว 318 ครั้ง
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30