อย่างที่เคยกล่าวในบทที่ 1 ว่า Bootstrap นั้นรองรับการแสดงผลทั้งบนคอมพิวเตอร์ มือถือและแท็บแล็ต โดยการแสดงผลดังกล่าว Bootstrap นั้นใช้ Grid System เข้ามาจัดการการแสดงผลเนื้อหาให้มีความเหมาะสมกับขนาดหน้าจอของอุปกรณ์ต่างๆ เหล่านั้น
โดยในแต่ละแถวของ Grid System แบ่งออกเป็นทั้งหมด 12 คอลัมน์ ดังแสดงในรูปที่ 1
รูปที่ 1
สำหรับการการสร้าง Grid บน Bootstrap นั้นมีดังต่อไปนี้
ขั้นตอนที่ 1 copy โฟลเดอร์ทั้งหมด และ ไฟล์ index.html ตอนที่สร้างใน Chapter 1 ทั้งหมดมาใส่โฟลเดอร์ใหม่ของเรา (ในที่นี้ตั้งชื่อโฟลเดอร์ว่า chapter_2) ดังแสดงในรูปที่ 2
รูปที่ 2
ขั้นตอนที่ 2 เปลี่ยน title ในไฟล์ index.html เป็น "Grid System" และลบแท็ก <h1> ที่อยู่ใน body ออก โดยโค้ดผลลัพธ์ของไฟล์ index.html แสดงดังโค้ดด้านล่าง
<!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>Grid System</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> <script src="js/jquery-1.11.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
ขั้นตอนที่ 3 ในการสร้าง Grid system นั้น Bootstrap แนะนำให้เราสร้างแถวและคอลัมน์ไว้ใน container โดยคลาส container ของ Bootstrap แบ่งออกเป็น 2 ประเภท คือ container และ container-fluid สำหรับ container นั้นจะแสดงผลเนื้อหาตามที่เรากำหนดความกว้างของหน้าจอ ส่วน container-fluid นั้นจะแสดงผลเนื้อหาเต็มความกว้างของหน้าจอของเรา โดยในที่นี้คือเราจะใช้คลาส container
<div class="container"> </div>
ถัดมาเราจะต้องสร้างแถวโดยใช้ class="row" ภายใต้ class="container" โดยเราสามารถที่จะสร้างแถวได้ไม่จำกัด แต่แถวเหล่านั้นต้องอยู่ภายใต้ class="container"
<div class="container"> <div class="row"></div> </div>
ขั้นตอนที่ 4 ในแต่ละแถวของ Grid system นั้น Bootstrap ได้กำหนดให้สามารถที่คอลัมน์ในแต่ละแถวได้ 12 คอลัมน์ โดยคอลัมน์ของ Grid system แบ่งออกเป็น 4 ประเภทคือ
- col-xs-int ใช้สำหรับการแสดงผลบนขนาดหน้าจอที่ < 768 px
- col-sm-int ใช้สำหรับการแสดงผลบนขนาดหน้าจอที่ >= 768 px
- col-md-int ใช้สำหรับการแสดงผลบนขนาดหน้าจอที่ >= 992 px
- col-lg-int ใช้สำหรับการแสดงผลบนขนาดหน้าจอที่ >= 1200 px
โดยที่ "int" คือจำนวนคอลัมน์ที่เราต้องการแบ่งให้กับแต่ละเนื้อหา ตัวอย่างเช่น เราต้องการแสดงผล 2 คอลัมน์บนขนาดหน้าจอที่ >= 768 px เราสามารถทำได้โดยการเขียนโค้ดลงไปดังนี้ และผลลัพธ์ดังกล่าวแสดงในรูปที่ 3
<div class="container">
<div class="row">
<div class="col-sm-6">
<h4>Column1</h4>
</div>
<div class="col-sm-6">
<h4>Column2</h4>
</div>
</div>
</div>
รุปที่ 3
ขั้นตอนที่ 5 นอกจากนี้เราสามารถกำหนดสีพิ้นหลังให้กับพื้นหลังในแต่ละคอลัมน์โดยใช้ CSS โดยให้เราสร้างไฟล์ styles.css ไว้ในโฟลเดอร์ "CSS"
.col1{
background: #5C7080;
}
.col2{
background: #6BC0FF;
}
ถัดมาในไฟล์ index.html ให้เราเรียกไฟล์ css ของเราที่เพิ่งสร้างขึ้นมา
<link rel="stylesheet" type="text/css" href="css/styles.css">
ต่อมาให้เรากำหนดคลาสของพื้นหลังให้กับแต่ละคอลัมน์ดังนี้ โดยผลลัพธ์ถูกแสดงในรูปที่ 4
<div class="row">
<div class="col-sm-6 col1">
<h4>Column1</h4>
</div>
<div class="col-sm-6 col2">
<h4>Column2</h4>
</div>
</div>
รูปที่ 4
ขั้นตอนที่ 5 เราลองกำหนดการแสดงผลเนื้อหาบนมือถือและแท็บแล็บของเราบ้างนะครับ โดยส่วนขนาดหน้าจอของมือถือและแท็บแล็บจะมีความกว้าง < 768 px ดังนั้นเราจำเป็นต้องใช้ class="col-xs" ซึ่งในตัวอย่างนี้เราจะให้แสดงผลแค่คอลัมน์เดียวบนอุปกรณ์ดังกล่าว
<div class="row">
<div class="col-sm-6 col-xs-12 col1">
<h4>Column1</h4>
</div>
<div class="col-sm-6 col-xs-12 col2">
<h4>Column2</h4>
</div>
</div>
เพื่อความสมจริงในการแสดงผล ในตัวอย่างนี้ได้ใช้ปลั๊กอินของ Google chrome ทีชื่อว่า "Responsive Site View" โดยผลัพธ์แสดงในรูปที่ 5 และ 6 ตามลำดับ
รูปที่ 5
รูปที่ 6
Reference
- Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.
0 ความคิดเห็น:
แสดงความคิดเห็น