Col-sm-4 col-md-3 col-lg-3 ไม ให ม ช องว าง

Bootstrap เป็น Front-end Framework ที่ช่วยให้เราสามารถสร้างเว็บแอพลิเคชันได้อย่างรวดเร็ว และ สวยงาม ตัว Bootstrap เองมีทั้ง CSS Component และ JavaScript Plugin ให้เราได้เรียกใช้งานได้อย่างหลากหลาย ตัว Bootstrap ถูกออกแบบมาให้รองรับการทำงานแบบ Responsive Web ซึ่งทำให้เราเขียนเว็บแค่ครั้งเดียวสามารถนำไปรันผ่านเบราเซอร์ได้ทั้งบน มือถือ แท็บเล็ต และพีซีทั่วไป โดยที่ไม่ต้องเขียนใหม่

สารบัญ Show

เกี่ยวกับ Bootstrap
ดาวน์โหลดและติดตั้ง
โครงสร้างไฟล์
เทมเพลตพื้นฐาน
เว็บเบราเซอร์ที่สามารถใช้งานได้
การคอมไพล์คู่มือ
บทที่ 2 CSS
การใช้งาน Grid
ตาราง
ฟอร์ม (Form)
Stacked buttons

Bootstrap ถูกพัฒนาขึ้นด้วยกลุ่มนักพัฒนาจากทั่วทุกหนแห่งในโลก มีการอัปเดทอยู่ตลอดเวลา เพื่อรองรับการทำงานได้อย่างทันสมัย และ การแก้ไขปัญหาต่างๆ หรือ Bug ก็ทำได้เร็ว ดังนั้น ผู้เขียนเอง จึงได้เลือกที่จะใช้ Bootstrap ในการนำมาช่วยพัฒนาโปรเจค ทั้งเว็บแอพลิเคชัน App บนมือถือ

หนังสือเล่มนี้ผู้เขียนได้เขียนจากประสบการณ์การใช้งานมาอย่างยาวนานตั้งแต่เวอร์ชันแรกๆ จนถึงเวอร์ชันปัจจุบัน (เวอร์ชัน 3) หวังเป็นอย่างยิ่งว่าหนังสือเล่มนี้จะช่วยให้ผู้อ่านที่สนใจสามารถนำคุณสมบัติต่างๆ ของ Bootstrap ไปใช้งานในการพัฒนาเว็บไซต์ของตัวเอง หรือ เพื่อเชิงธุรกิจได้อย่างมืออาชีพ ต่อไป

เกี่ยวกับ Bootstrap

Bootstrap เป็นเครื่องมือที่ช่วยให้เราสามารถพัฒนาเว็บแอพลิเคชันได้อย่างรวดเร็วและดูสวยงาม UI (User Interface) นั้นถูกออกแบบมาเพื่อให้ทันสมัยตลอดเวลา สามารถนำไปใช้ได้กับเว็บที่ทั่วไป และ เว็บสำหรับมือถือ (โดยใช้ Responsive utilities) ในการเรียนรู้ Bootstrap นั้นง่ายมาก เราไม่จำเป็นต้องเก่ง CSS ก็สามารถสร้างเว็บที่สวยงามได้ ไม่ว่าจะเป็นปุ่ม (Buttons) สีต่างๆ ฟอร์มคอนโทรลต่างๆ, ตาราง, ไอคอน, เมนูบาร์, Dropdown, เมนู, หน้าต่าง Popup (Modal) และ อีกหลายๆ รายการที่พร้อมให้เราเลือกใช้งาน ซึ่งจะได้อธิบายในหัวข้อต่อๆ ไป

ดาวน์โหลดและติดตั้ง

การดาวน์โหลด Bootstrap มาใช้งานนั้นเราสามารถดาวน์โหลดได้จากเว็บไซต์ www.getbootstrap.com หรือที่ดาวน์โหลด Source code ได้ที่ https://github.com/twbs/bootstrap ซึ่งในไฟล์ที่ดาวน์โหลดมาจะมีคู่มือ, ไฟล์ Bootstrap และ ไฟล์ตัวอย่าง หรือใช้ Bower ซึ่งเป็นโปรแกรมช่วยติดตั้งแพกเก็จต่างๆ ที่ต้องการ ไม่ว่าจะเป็น CSS หรือ JavaScript ซึ่งสามารถดาวน์โหลดได้จาก http://bower.io จากนั้นใช้คำสั่ง ดังนี้

1 bower install bootstrap

และสามารถเรียกใช้งานผ่าน CDN (Content Delivery Network) ดังนี้

1 <link rel= "stylesheet" 2 href= "//netdna.bootstrapcdn.com/bootstrap/3.0.0/ 3 css/bootstrap.min.css" > 4 <script src= "//netdna.bootstrapcdn.com/ 5 bootstrap/3.0.0/js/bootstrap.min.js" > 6 </script>

โครงสร้างไฟล์

หลังจากที่เราทำการดาวน์โหลดไฟล์มาแล้ว และทำการแตก zip ไฟล์ออกมาจะได้โครงสร้างไฟล์ ดังนี้

รูปที่ 01-01 โครงสร้างไฟล์ของ Bootstrap

ไฟล์

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>`Bootstrap Template</title> 5` <meta name= "viewport" 6 content= "width=device-width, initial-scale=1.0" > 7 <! Bootstrap > 8 <link href= "css/bootstrap.min.css" 9 rel= "stylesheet" media= “screen" > 10 <script 11 src= "//code.jquery.com/jquery.js" > 12 </script> 13 <script src= “bootstrap.min.js" ></script> 14  18 </head> 19 <body> 20 <h1>`Content</h1>`21 </body> 22 </html>

8 นั้นเป็นไฟล์ที่มีการคอมไพล์แล้วทำให้มีขนาดเล็กลงเหมาะสำหรับนำมาใช้งานจริง แต่หากเราต้องการทดสอบโปรแกรมในขณะที่กำลังพัฒนาอยู่นั้นแนะนำให้ใช้ไฟล์ที่ไม่มี

เทมเพลตพื้นฐาน

เนื่องจาก Bootstrap นั้นใช้โครงสร้างของเอกสารเป็น HTML5 ซึ่งมีรูปแบบเอกสาร ดังนี้

โครงสร้างเทมเพลต

เนื่องจาก Bootstrap ใช้ jQuery เป็นไลบาลี่หลักในการทำงาน ดังนั้นเราต้องมีการแทรกไฟล์ของ jQuery เข้าไปด้วย โดยแทรกก่อนไฟล์

1 git clone https : //github.com/twbs/bootstrap.git

0 หรือ

1 git clone https : //github.com/twbs/bootstrap.git

1 ซึ่ง jQuery นั้นควรเป็นเวอร์ชัน 1.7 ขึ้นไป

เว็บเบราเซอร์ที่สามารถใช้งานได้

Bootstrap นั้นถูกออกแบบมาเพื่อให้สามารถรองรับการทำงานได้ทุกเบราเซอร์ และสามารถรันได้ทุกระบบไม่ว่าจะเป็น Windows, Linux, Mac, iOS, Android เบราเซอร์ที่รองรับการทำงานของ Bootstrap ได้แก่

Google Chrome (ทั้งบน Windows, Mac, iOS และ Android)
Safari (บน Mac และ iOS)
Internet Explorer (บน Windows และ Windows Phone)
Opera (บน Windows, Mac)

การคอมไพล์คู่มือ

เมื่อเราทำการดาวน์โหลดไฟล์ Source code ของ Bootstrap จาก GitHub มาแล้ว เราจะพบว่ามีไฟล์คู่มือมาให้ด้วย แต่จะไม่สามารถใช้งานได้ เราจำเป็นต้องทำการคอมไพล์ก่อนโดยใช้โปรแกรม jekyll ซึ่งเป็นโปรแกรมที่พัฒนาโดยภาษา Ruby เราจึงจำเป็นต้องทำการติดตั้งโปรแกรม Ruby ก่อน โดยทำการดาวน์โหลดไฟล์สำหรับติดตั้งจากเว็บไซต์ http://railsinstaller.org (สำหรับ Windows ถ้าเป็น Mac OS จะมี Ruby ติดตั้งมาให้พร้อมแล้ว) ซึ่งโปรแกรมนี้จะติดตั้งไฟล์ที่จำเป็นสำหรับการใช้งาน Ruby ได้อย่างครบถ้วน ไม่ว่าจะเป็น Ruby, Rails และ Git หลังจากติดตั้งโปรแกรมนี้แล้ว ให้ทำการติดตั้งโปรแกรม

1 git clone https : //github.com/twbs/bootstrap.git

2 โดยใช้คำสั่ง ดังนี้ (ทำผ่าน Command line)

จากนั้นดาวน์โหลดไฟล์ของ Bootstrap โดยการ Clone จาก GitHub โดยใช้คำสั่ง ดังนี้

1 git clone https : //github.com/twbs/bootstrap.git

Git จะดาวน์โหลดไฟล์ของ Bootstrap ล่าสุดมาให้ จากนั้นเข้าไปที่โฟลเดอร์

1 git clone https : //github.com/twbs/bootstrap.git

3 แล้วเรียกใช้งานโปรแกรม

1 git clone https : //github.com/twbs/bootstrap.git

2 ดังนี้

1 cd bootstrap 2 jekyll serve

หลังจากนั้นเปิดโปรแกรมเบราเซอร์แล้วพิมพ์ http://localhost:9001 จะแสดงหน้าเพจคู่มือของ Bootstrap

บทที่ 2 CSS

ในส่วนของ CSS หรือ Style Sheet นั้น Bootstrap ได้เตรียมคลาส (Class) ไว้สำหรับการปรับแต่งคอนโทรลและแท็กต่างๆ ของเอกสาร HTML ช่วยให้เว็บดูสวยงาม และมีลูกเล่นเยอะขึ้น นอกจากนั้นยังมีระบบ Gird ที่ช่วยในการจัดเลย์เอาท์ (Layout) ของเอกสารโดยที่เราไม่จำเป็นต้องใช้ตารางในการจัดวางคอนโทรลต่างๆ สำหรับ Bootstrap นั้นสามารถรองรับการทำงานทั้งในมือถือและบนพีซีทั่วไป ในเวอร์ชันนี้ (3.0) มีการใช้คำว่า “Mobile first” เป็นคำที่ใช้บอกถึงวัตถุประสงค์หลักของ Bootstrap ซึ่งก็คือเน้นการทำงานบนมือถือเป็นหลัก (แต่โดยรวมแล้วเท่าที่ผู้เขียนใช้งานมานั้นสามารถทำงานได้ดีทั้งบนมือถือและบนพีซีทั่วไป) เมื่อเราต้องการพัฒนาเว็บแอพลิเคชันบนมือถือหรือพีซีที่มีหน้าจอขนาดเล็ก ต้องมีการกำหนดค่า

1 git clone https : //github.com/twbs/bootstrap.git

5 แท็กในส่วนของ

1 git clone https : //github.com/twbs/bootstrap.git

6 เพื่อให้สามารถรองรับการทำงานกับหน้าจอขนาดเล็ก โดยกำหนดดังนี้

การกำหนดค่า Responsive

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

สำหรับรูปภาพนั้นให้ใส่คลาส

1 git clone https : //github.com/twbs/bootstrap.git

7 เข้าไปในแท็กของ

1 git clone https : //github.com/twbs/bootstrap.git

8 ดังนี้

การกำหนดค่ารูปภาพรองรับหน้าจอหลายขนาด

1 <img src= "..." class= "img-responsive" >

การใช้งาน Grid

Grid เป็นเครื่องมือที่ช่วยให้เราสามารถออกแบบเลย์เอาท์เอกสาร HTML ได้ดีเหมือนกับการใช้แท็ก table แต่ความเร็วในการโหลดเอกสารนั้นการใช้

1 git clone https : //github.com/twbs/bootstrap.git

9 จะช่วยให้โหลดเอกสารได้เร็วขึ้น นอกจากนั้นยังช่วยให้เราสามารถออกแบบเลย์เอาท์สำหรับมือถือ และบนพีซีได้พร้อมๆ กัน หรือที่เราเรียกว่า Responsive Web Design (RWD) ซึ่งจะช่วยลดระยะเวลาในการพัฒนาได้มากขึ้น ระบบ Grid ของ Bootstrap นั้นจะแบ่งหน้าจอออกเป็น 12 คอลัมน์ โดยสามารถกำหนดค่าให้สามารถใช้ได้ทั้งมือถือ แท็บเล็ต หรือพีซีทั่วไป โดยคลาสกำหนดค่าความกว้างของคอลัมน์ ดังนี้

แสดงความกว้างของหน้าจอในอุปกรณ์แต่ละตัว

มือถือ แท็บเล็ต ทั่วไป ขนาดใหญ่ ขนาด <768px >=768px >=992px >=1200px พื้นที่ใช้งาน อัตโนมัติ 750px 790px 1170px ชื่อคลาส

1 cd bootstrap 2 jekyll serve

ตัวอย่าง Grid

1 <div class= "row" > 2 <div class= "col-md-1" >.col-md-1`</div> 3` <div class= "col-md-1" >.col-md-1`</div> 4` <div class= "col-md-1" >.col-md-1`</div> 5` <div class= "col-md-1" >.col-md-1`</div> 6` <div class= "col-md-1" >.col-md-1`</div> 7` <div class= "col-md-1" >.col-md-1`</div> 8` <div class= "col-md-1" >.col-md-1`</div> 9` <div class= "col-md-1" >.col-md-1`</div>`10 <div class= "col-md-1" >.col-md-1`</div>`11 <div class= "col-md-1" >.col-md-1`</div>`12 <div class= "col-md-1" >.col-md-1`</div>`13 <div class= "col-md-1" >.col-md-1`</div>`14 </div>

ผลลัพธ์ที่ได้เมื่อรันผ่านเบราเซอร์ ดังรูป

รูปที่ 02-01 ตัวอย่างการใช้ Grid

จากตัวอย่างเราแบ่งคอลัมน์ออกเป็น 12 คอลัมน์ โดยการใช้คลาส

1 cd bootstrap 2 jekyll serve

4 คลาส

1 cd bootstrap 2 jekyll serve

6 และ

1 cd bootstrap 2 jekyll serve

7 นั้นเมื่อมีคอลัมน์เดียวจะมีขนาด 12 คอลัมน์ เราสามารถยุบรวมคอลัมน์ต่างๆ เข้าด้วยกันเพื่อให้ได้เลย์เอาท์ตามที่เราต้องการได้ ดังตัวอย่าง

ขนาดความกว้างของคอลัมน์เท่ากับ 12

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

ผลลัพธ์ที่ได้เมื่อรันผ่านเบราเซอร์ ดังรูป

รูปที่ 02-02 แสดงการแบ่งคอลัมน์

การรวมคอลัมน์ ของ Grid นั้น เนื่องจากคอลัมน์ทั้งหมดมี 12 คอลัมน์ การรวมก็คือ เราจะแบ่งเป็นกี่คอลัมน์ก็ตามผลรวมทั้งหมดของคอลัมน์ (คลาส

1 cd bootstrap 2 jekyll serve

จะต้องเท่ากับ 12 จากตัวอย่าง

1 cd bootstrap 2 jekyll serve

9 กับ

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

0 ผลรวมของตัวเลขคลาส (ตัวท้าย) จะเท่ากับ 12 จะเห็นได้ว่าระบบ Grid ของ Bootstrap นั้นจะช่วยให้เราสามารถออกแบบเลย์เอาท์ได้อย่างง่ายขึ้น เหมือนกับการใช้

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

1 ที่หลายๆ คนเคยใช้กัน

การทำ offsetting ของ Grid

การทำ Offsetting นั้นเป็นการเว้นคอลัมน์ที่อยู่ด้านขวาของ Grid ไว้ แล้วข้ามไปสร้างคอลัมน์ถัดไป เราจะใช้คลาส

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

2 ในการลบหรือเว้นช่องว่างของคอลัมน์ ตัวอย่างเช่น

การทำ Offset

1 <div class= "row" > 2 <div class= "col-md-4" > 3 .col-md-4 4 </div> 5 <div class= "col-md-4 col-md-offset-4" > 6 .col-md-4 .col-md-offset-4 7 </div> 8 </div>

ผลลัพธ์ที่ได้เมื่อรันผ่านเบราเซอร์ ดังรูป

รูปที่ 02-03 แสดงการทำ Offset

ตาราง

เมื่อต้องการใช้งานรูปแบบตารางของ Bootstrap สามารถทำได้ง่ายโดยการเพิ่มคลาส

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

3 ในแท็ก

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

1 ดังนี้

โครงสร้างตาราง

โดยที่ส่วนหัวของตาราง (header) จะต้องอยู่ภายในแท็ก

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

5 และใช้

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

6 สำหรับการแบ่งคอลัมน์ ส่วนรายการของเนื้อหาให้อยู่ภายใต้แท็ก

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

7 และใช้

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

8 ในการแบ่งคอลัมน์ ดังตัวอย่าง

ตัวอย่างการสร้างตาราง

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-04 แสดงตัวอย่างตาราง

รูปแบบตาราง

รูปแบบตารางมีให้เลือก ได้แก่

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

1 <img src= "..." class= "img-responsive" >

1 และ

1 <img src= "..." class= "img-responsive" >

2 โดยมีรูปแบบการใช้งาน ดังนี้

แสดงการใช้งานคลาส

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-05 แสดงผลลัพธ์จากการใช้คลาส

1 <meta name= "viewport" content= "width=device-width, 2 initial-scale=1.0" >

แสดงการใช้งานคลาส

1 <img src= "..." class= "img-responsive" >

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-06 แสดงผลลัพธ์จากการใช้คลาส

1 <img src= "..." class= "img-responsive" >

แสดงการใช้งานคลาส

1 <img src= "..." class= "img-responsive" >

จะแสดงการ hilight แถวเมื่อเราเอาเมาส์ไปวางบนแถวนั้นๆ

รูปที่ 02-07 แสดงผลลัพธ์จากการใช้คลาส

1 <img src= "..." class= "img-responsive" >

แสดงการใช้งานคลาส

1 <img src= "..." class= "img-responsive" >

ทำให้ระยะห่างของเชลล์ในในตารางแคบลงโดยการปรับค่าของ cell padding ให้เท่ากับศูนย์

รูปที่ 02-08 แสดงผลลัพธ์จากการใช้คลาส

1 <img src= "..." class= "img-responsive" >

การเพิ่มสีสันให้กับตาราง

เราสามารถกำหนดสีของแต่ละแถวในตารางได้ โดย Bootstrap ได้เตรียมคุณสมบัติเหล่านี้ไว้ให้ ซึ่งประกอบด้วยคลาสต่างๆ ดังนี้

การกำหนดสีสันให้กับแถว

นอกจากเราจะกำหนดสีให้แต่ละแถวได้แล้วเรายังสามารถกำหนดให้กับแต่ละคอลัมน์ได้ด้วย โดยการกำหนดคลาสให้กับแท็ก

1 ดังนี้

การกำหนดสีสันให้กับคอลัมน์

ตัวอย่างการแสดงสีให้กับตาราง ดังรูป

รูปที่ 02-09 แสดงการกำหนดสีสันให้กับตาราง

ฟอร์ม (Form)

การใช้ CSS เพื่อกำหนดรูปแบบต่างๆ ให้กับคอนโทรลต่างๆ ของฟอร์มในเอกสารนั้น Bootstrap มีคลาสที่หลากหลายที่จะช่วยให้เราสามารถปรับปต่างคอนโทรลต่างๆ ของฟอร์มให้ดูสวยงาม และน่าใช้งานมากยิ่งขึ้น โดยเราสามารถใช้คลาสต่างๆ ได้กับแท็ก

3 และ

4 โดยเราต้องทำการเพิ่มคลาส

5 ให้กับคอนโทรลเหล่านั้น โดยความกว้างของคอนโทรลนั้นจะกว้าง 100% เป็นค่าเริ่มต้น แต่เราสามารถกำหนดค่าความกว้างให้เป็นตามที่เราต้องการได้ โดยการใช้สไตล์ซีท

6 และใช้งานร่วมกับ Grid ได้โดยความกว้างจะได้ขนาดเท่ากับขนาดของ Grid ตัวอย่างฟอร์ม

ตัวอย่างการสร้างฟอร์ม

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-10 ตัวอย่างการสร้างฟอร์ม

Inline form

การกำหนดรูปแบบ inline form เป็นการทำให้คอนโทรลต่างๆ ของฟอร์มอยู่ในแถวเดียวกัน โดยโดยปกติแล้วหากเราไม่กำหนดค่า

7 ในแท็ก

8 คอนโทรลต่างๆ ของฟอ์มจะอยู่คนละแถว หรือคนละบรรทัด เหมือนกับตัวอย่างแรก แต่หากเรากำหนดค่า

9 เข้าไป คอนโทรลต่างๆ จะอยู่ในแถวเดียวกัน ในการทำ inline form นั้นเราจะต้องทำการกำหนดค่าความกว้างของคอนโทรล โดยการใช้สไตล์ซีทกำหนดค่า ซึ่งตัวอย่างจะใช้

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

0 ในการกำหนดค่าความกว้างของคอนโทรล หากเราไม่กำหนดเบราเซอร์จะแสดงความกว้างเต็ม

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

1 ซึ่งจะไม่เห็นความแตกต่างในการใช้

7 และหากเราไม่ต้องการให้แสดง

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

3 เราสามารถกำหนดคลาส

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

4 ให้กับ

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

3 ได้ ตัวอย่างการใช้งาน

ตัวอย่างการสร้าง Inline form

แสดงผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-11 แสดงการสร้างฟอร์มโดยใช้คลาส

Horizontal form

เราสามารถจัดกลุ่มของคอนโทรลกับลาเบล (Label)ให้อยู่ในลักษณะของคอลัมน์ โดยการใช้

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

7 ร่วมกับกริด (Grid) และ

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

8 ในการแบ่งคอลัมน์ ตัวอย่าง เช่น

ตัวอย่างการสร้าง Horizontal form

แสดงผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-12 แสดงการสร้างฟอร์มโดยใช้คลาส

1 <div class= "row" > 2 <div class= "col-md-8" >.col-md-8`</div>`3 <div class= "col-md-4" >.col-md-4`</div>`4 </div>

Validation State

เป็นการกำหนดรูปแบบสถานะของคอนโทรลภายในฟอร์ม โดยสามารถกำหนดให้มีสถานะเป็น

1, และ

2 โดยการใส่คลาส

4 หรือ

5 ใน element บนสุดของคอนโทรลนั้น รวมไปถึงคลาส

5 และ

8 ก็จะถูกเปลี่ยนรูปแบบไปด้วย ตัวอย่าง เช่น

การสร้าง Validation State

แสดงผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-13 แสดงการสร้าง Validation State

การกำหนดความสูง

เราสามารถกำหนดความสูงของคอนโทรลต่างๆ ในฟอร์มได้โดยการใช้คลาส

9 (Large) และ

00 (Small) โดยสามารถใช้ได้ทั้งกับ

2 และ

4 ดังตัวอย่าง

การกำหนดความสูงของฟอร์มคอนโทรล

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-14 แสดงการกำหนดความสูงของคอนโทรล

การกำหนดความกว้าง

เราสามารถกำหนดความกว้างของคอนโทรลต่างๆ ได้โดยการใช้

1 cd bootstrap 2 jekyll serve

0 การใช้งาน ดังนี้

การกำหนดความกว้างของฟอร์มคอนโทรล

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-15 การกำหนดความกว้างของฟอร์มคอนโทรล

Buttons

เราสามารถจะกำหนดรูปแบบที่สวยงามให้กับปุ่มต่างๆ ภายในเว็บเพจของเราได้เพียงแค่การกำหนดคลาสของสไตล์ซีทให้กับปุ่มนั้นๆ ซึ่งมีให้เลือกหลากหลาย สามารถใช้ได้ทั้งกับแท็ก

05 และ

06 เราสามารถกำหนดรูปแบบการวางตำแหน่ง ขนาด ได้ตามที่ต้องการ ซึ่ง Bootstrap ได้เตรียมไว้ให้เราได้ใช้งานอย่างง่ายดาย ตัวอย่าง

การสร้างปุ่ม

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-16 ตัวอย่างการสร้างปุ่ม

ตัวที่จะกำหนดค่าของสีให้กับปุ่มนั้นคือคลาส

07,

08,

09,

10,

11 และ

เราสามารถกำหนดขนาดของปุ่มต่างๆ ได้โดยการใช้คลาส

13,

14 และ

15 ตัวอย่างการใช้งาน

ลักษณะของปุ่มแบบต่างๆ

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-17 แสดงการกำหนดรูปแบบต่างๆ ของปุ่ม

Stacked buttons

การสร้างปุ่มโดยให้มีการจัดเรียงเป็นชั้นๆ จะช่วยให้ดูสวยงามเหมือนกับการสร้างปุ่มในอุปกรณ์สมาร์ทโฟน หรือ แท็บเล็ต ซึ่ง Bootstrap เองก็ได้เตรียมฟังก์ชันต่างๆ สำหรับมือถือไว้ให้แล้ว ซึ่งจะได้กล่าวในบทต่อๆ ไป ตัวอย่างการใช้งาน

การทำ Stacked

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-18 แสดงการทำ Stacked buttons

Images

คลาสสำหรับรูปภาพนั้นมีให้เราเลือก 3 รูปแบบด้วยกัน คือ

16,

17 และ

18 ตัวอย่างการใช้งาน

โครสร้างของคลาสสำหรับรูปภาพ

ผลลัพธ์ที่ได้ ดังรูป

รูปที่ 02-19 แสดงตัวอย่างการใช้คลาส

Responsive

ในการออกแบบเว็บไซต์ในปัจจุบันนี้ เราต้องคำนึงถึงการใช้งานกับอุปกรณ์ที่หลากหลาย ไม่ว่าจะเป็นการใช้งานทั่วไปบนเครื่องเดสท็อป (Desktop) การใช้งานบนมือถือ หรือ สมาร์ทโฟน (Smartphone) และการใช้งานบนแท็บเล็ต (Tablet) Bootstrap ได้เตรียมเครื่องมือในการทำ Responsive มาให้เราได้เลือกใช้งาน ช่วยให้การออกแบบเว็บไซต์ทำได้ง่ายยิ่งขึ้น ลักษณะการทำงานของคลาส Responsive นั้นจะใช้หลักการ แสดง (Visible) และ ซ่อน (Hidden) โดยเราสามารถเลือกที่จะแสดงหรือซ่อนวัตถุต่างๆ บนหน้าเว็บเพจได้ เมื่อมีการแสดงในหน้าจอที่แตกต่างกัน เช่น คอลัมน์ของตาราง เมื่อแสดงในหน้าเว็บเพจทั่วไป ก็ให้แสดงทุกคอลัมน์ แต่เมื่อแสดงบนหน้าจอมือถือ ก็ให้แสดงเฉพาะคอลัมน์ที่สำคัญ หรือไม่ว่าจะเป็น รูปภาพ ข้อความ เราก็สามารถจะทำให้มันแสดงหรือซ่อนได้ตามที่เราต้องการ เมื่อมีการใช้งานในอุปกรณ์ที่มีความแตกต่างของหน้าจอแสดงผล วิธีการใช้งานจะทำได้โดยการใช้คลาส