Bootstrap ในภาษาอังกฤษแปลว่าการทำให้ลงตัว สิ่งที่ทำให้ง่ายขึ้น หรือ สิ่งที่ทำด้วยตัวมันเอง bootstrap คือ framework ที่ช่วยในการพัฒนาเว็บไซต์
ประกอบด้วยกัน 3 โฟลเดอร์
1. CSS
2. lmg
3. js เป็นโฟเดอร์เก็บไฟล์ จาวาสคริป (Java Script)
ในตัวอย่างนี้จะเป็นการ สร้างปุ่มด้วย Bootstrap และ การสร้าง layouts ด้วย Bootstrap สามารถดูได้ตามด้านล่างนี้
การสร้างปุ่มด้วย Bootstrap พูดง่ายๆคือปุ่มเมนูนั้นเอง
โค้ด: เลือกทั้งหมด
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<button class="btn">ยินดีต้อนรับ</button>
</div>
<scripe src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ผลลัพธ์โปรแกรม การสร้าง layouts ด้วย Bootstrap ในตัวอย่างนี้เป็นการสร้างแถวทั้งหมด 5 แถว โดยมีคอลัมล์ 1 คอลัมล์
โค้ด: เลือกทั้งหมด
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="column"><!-- เป็นการสร้างคลาส ในนี่สร้าง class ชื่อ column -->
<div class="spanl">row 1</div><!--ส่วนใน class="span1 เป็นการใส่แถวให้กับคอลัมล์ ในนี่จะมีตั้งแต่ 1-5 -->
<div class="span1">row 2</div>
<div class="spanl">row 3</div>
<div class="span1">row 4</div>
<div class="spanl">row 5</div>
</div>
</div>
<scripe src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
ผลลัพธ์โปรแกรม ต่อไปจะเป็นการสร้างเมนูจาก Bootstrap และสร้างคลาสชื่อ nav มีให้เลือก 3 แบบ คือ
1. nav-tabs แบบ tab
2. nav-pills แบบ button
3. nav-lists แบบ list
ในตัวอย่างต่อไปนี้จะยกตัวอย่างแบบ ที่ 2. คือ nav-pills แบบ button
ผลลัพธ์
สามารถดูข้อมูลเพิ่มเติมได้จาก บทที่ 31 สอน PHP7 พื้นฐาน Bootstrap ทำหน้าเว็บ รองรับมือถือ