หลังจากได้เรียนนรู้วิธีสร้าง Grid System โดยใช้ Bootstrap เรียบร้อยแล้ว วันนี้เราจะมาลองสร้างบล๊อกแบบง่ายๆ ที่รองรับการแสดงผลบนคอมพิวเตอร์ แท๊บแล๊ตและมือถือ โดยรูปแบบของบล๊อกที่เราจะพัฒนาเพื่อรองรับการแสดงผลบนอุปกรณ์ดังกล่าวแสดงในรูปที่ 1, 2และ 3 ตามลำดับ
รูปที่ 1 การแสดงบล๊อกบนหน้าจอคอมพิวเตอร์
รูปที่ 2 การแสดงบล๊อกบนหน้าจอแท็บแล็ต
รูปที่ 3 การแสดงบล๊อกบนหน้าจอมือถือ
โดยเริ่มจากให้เรา copy โฟลเดอร์ทั้งหมดและไฟล์ index.html ที่ได้สร้างไว้ใน Chapter 1 มาใส่ในโฟลเดอร์ที่จัดเตรียมไว้สำหรับโปรเจคนี้ ซึ่งในที่นี้ผมได้สร้างโฟลเดอร์ที่ชื่อว่า "Chapter_2_Part2" ดังแสดงในรูปที่ 4
รูปที่ 4
โดยขั้นแรก เราจะพัฒนาบล๊อกของเราสำหรับการแสดงผลบนคอมพิวเตอร์ ให้เราเปิดไฟล์ "index.html" ขึ้นมาพร้อมแก้ไขข้อความในแท๊ก <tittle> เป็น "My First Bootstrap Website" ถัดมาให้เราลบแท็ก <h1> ที่อยู่ในแทํก <body> ออก ต่อจากนั้นให้เราใส่แท๊ก <div> พร้อมกำหนดคลาสเป็น "container" ดังแสดงในโค้ดด้านล่าง
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>My First Boostrap Application</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!--[if lt IE 9] > <script scr="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script scr="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif] --> </head> <body> <div class="container"> </div> <script src="js/jquery-1.11.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
จากรูปที่ 1 เราจะเห็นว่าจะมีการกำหนดชื่อหัวข้อที่อยู่ตรงกลางของบล๊อกที่ตำแหน่งบนสุด ดังนั้นเราจะต้องสร้างคอลัมน์ที่มีความกว้าง 12 คอลัมน์ ดังนี้
<div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1> My First Bootstrap Blog</h1> </div> </div> </div>
ถัดมาให้สร้างคอลัมน์ของเนื้อหา โดยความละเอียดหน้าจอของเครื่องคอมพิวเตอร์ส่วนใหญ่นั้นจะ >= 992 px ดังนั้นคลาสของคอลัมน์ที่เราจะใช้คือ "col-md" โดยจากรูปที่ 1 จะสังเกตเห็นว่าใน 1 แถวจะประกอบด้วย 3 คอลัมน์ ดังนั้นความยาวในแต่ละคอลัมน์ของเนื่อหาจึงมีความยาวเท่ากับ 4 คอลัมน์
นอกจากนี้จะมีเส้นคั่นระหว่างชื่อหัวข้อกับคอลัมน์ของเนื้อหา ในส่วนนี้เราจะใช้แท็ก <hr> เพื่อกำหนดเป็นเส้นคั่นระหว่างเนื้อหาและคอลัมน์ ดังนั้นโค้ดของเราในส่วนนี้จะมีรูปแบบดังนี้
<div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1> My First Bootstrap Blog</h1> </div> </div> <hr> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div>
ต่อมาถึงเวลาที่เราต้องกำหนดชื่อหัวข้อและเนื้อหาให้กับแต่ละคอลัมน์ โดยในส่วนของชื่อหัวข้อเราจะใช้แท็ก <h3> และเราจะใช้แท็ก <p> เพื่อกำหนดข้อความในส่วนของเนื้อหา ดังตัวอย่างโค้ดด้านล่าง โดยผลลัพธ์แสดงดังรูปที่ 5
<div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1> My First Bootstrap Blog</h1> </div> </div> <hr> <div class="row"> <div class="col-md-4"> <h3>Post Tittle 1</h3> <p>Lorem ipsum dolor sit amet, euismod dictum quis mauris, ante erat arcu arcu eget. Vitae hendrerit ullamcorper mauris, posuere bibendum ut in et. Eros sem maecenas donec, neque in feugiat sed. Pellentesque justo eget tristique in, nunc lacus proin cursus. Ornare nullam parturient velit eros, posuere amet purus accumsan non. Convallis condimentum tincidunt libero ipsum, condimentum wisi eu convallis, nulla adipiscing tincidunt velit ornare.</p> </div> <div class="col-md-4"> <h3>Post Tittle 2</h3> <p>Lorem ipsum dolor sit amet, euismod dictum quis mauris, ante erat arcu arcu eget. Vitae hendrerit ullamcorper mauris, posuere bibendum ut in et. Eros sem maecenas donec, neque in feugiat sed. Pellentesque justo eget tristique in, nunc lacus proin cursus. Ornare nullam parturient velit eros, posuere amet purus accumsan non. Convallis condimentum tincidunt libero ipsum, condimentum wisi eu convallis, nulla adipiscing tincidunt velit ornare.</p> </div> <div class="col-md-4"> <h3>Post Tittle 3</h3> <p>Lorem ipsum dolor sit amet, euismod dictum quis mauris, ante erat arcu arcu eget. Vitae hendrerit ullamcorper mauris, posuere bibendum ut in et. Eros sem maecenas donec, neque in feugiat sed. Pellentesque justo eget tristique in, nunc lacus proin cursus. Ornare nullam parturient velit eros, posuere amet purus accumsan non. Convallis condimentum tincidunt libero ipsum, condimentum wisi eu convallis, nulla adipiscing tincidunt velit ornare.</p> </div> </div> </div>
รูปที่ 5
จากรูปที่ 5 จะสังเกตว่าบล๊อกของเราใกล้สำเร็จแล้ว งานที่เหลือคือเราต้องสร้างเนื้อหาขึ้นมาอีก 1 แถว พร้อมด้วยคอลัมน์ของเนื้อหาอีก 3 คอลลัมน์ พอถึงตรงนี้หลายๆคนคิดว่า จำเป็นสร้างแท็ก <div> พร้อมกำหนดคลาส "row" แล้วจึงสร้างคอลัมน์ขึ้นมา เหมือนขั้นตอนก่อนหน้านี้ แต่เดี๋ยวๆก่อน !!!!!!!
ใน bootstrap เราไม่จำเป็นต้องสร้างแท็ก <div> พร้อมกำหนดคลาส "row" ใน bootstrap จะให้เราสร้างคอลัมน์ในแต่ละแถวได้ไม่เกิน 12 คอลัมน์ ถ้ามีคอลัมน์ที่ 13 เฟรมเวิรค์ bootstrap จะปัดขึ้นแถวใหม่เองทันที ดังนั้นเราแค่เพิ่มคอลัมน์ใน <div class="row"></div> เดิม ดังตัวอย่างโค้ดด้านล่าง และผลลัพธ์แสดงในรูปที่ 6
<div class="row"> <div class="col-md-4"> <h3>Post Tittle 1</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4"> <h3>Post Tittle 2</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4"> <h3>Post Tittle 3</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4"> <h3>Post Tittle 4</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4"> <h3>Post Tittle 5</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4"> <h3>Post Tittle 6</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> </div>
รูปที่ 6
ในที่สุดเราก็สร้างบล๊อกที่รองรับการแสดงผลบนหน้าจอคอมพิวเตอร์สำเร็จ ขั้นตอนต่อมาเราจะสร้างบล๊อกที่รองรับการแสดงผลบนแท็บแล็ต โดยรายละเอียดหน้าจอของแท็บแล็ตในปัจจุบัน >= 768 px โดยจำนวนคอลัมน์ของเนื้อหาในแต่ละแถวนั้นอยู่ 2 คอลัมน์ ดังนั้นเราจึงต้องกำหนดคลาสเพิ่มเติมของแต่ละคอลัมน์โดยใส่ "col-sm-6" ลงไปดังโค้ดตัวอย่างที่แสดงในด้านล่าง
<div class="row"> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 1</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 2</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 3</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 4</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 5</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6"> <h3>Post Tittle 6</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> </div>
โดยผลลัพธ์ของการแสดงผลบล๊อกบนแท็บแล็ตของ แสดงดังรูปที่ 7
รูปที่ 7
สำหรับการแสดงผลบนมือถือ โดยส่วนใหญ่ความละเอียดหน้าจอบนมือถือนั้น <= 768 px และจากรูปที่ 3 จะเห็นว่าในส่วนของเนื้อหานั้นในแต่ละแถวจะแสดงแค่คอลัมน์เดียว ดังนั้นแต่ละเนื้อหาในแต่ละคอลัมน์มีความกว้าง 12 คอลัมน์ ซึ่งเราจึงต้องเพิ่มคลาส "col-xs-12" เข้าไปในแต่ละคอลัมน์ ดังแสดงในโค้ดด้านล่าง และผลลัพธ์แสดงในรูปที่ 8
<div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Post Tittle 1</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Post Tittle 2</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6 col-xs-12 "> <h3>Post Tittle 3</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Post Tittle 4</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Post Tittle 5</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Post Tittle 6</h3> <p>Lorem ipsum dolor sit amet, .... </p> </div> </div>
รูปที่ 7
Reference
- Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.
Borgata Hotel Casino & Spa, Atlantic City, NJ - MapYRO
ตอบลบGet 하남 출장샵 directions, reviews and 동해 출장마사지 information for 전라북도 출장샵 Borgata Hotel Casino & 삼척 출장안마 Spa 창원 출장샵 in Atlantic City, NJ. Address: 777 Casino Drive, Suite 102.