เริ่มต้นกับ Bootstrap

Bootstrap คืออะไร ?

Bootstrap เป็นโครงสร้าง front-end ฟรีสำหรับการพัฒนาเว็บได้เร็วและง่ายขึ้น

Bootstrap ประกอบด้วยเทมเพลตการออกแบบ HTML และ CSS สำหรับการพิมพ์รูปแบบปุ่มต่างๆตารางการนำทางแบบรูปภาพภาพหมุนและอื่น ๆ อีกมากมายรวมทั้งปลั๊กอิน JavaScript ที่เป็นตัวเลือก

Bootstrap ยังช่วยให้คุณสามารถสร้างการออกแบบที่ตอบสนองได้อย่างง่ายดาย

ประวัติ Bootstrap

Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ที่ Twitter และเผยแพร่เป็นผลิตภัณฑ์โอเพ่นซอร์สในเดือนสิงหาคม 2554 ที่ GitHub ในเดือนมิถุนายน 2554 Bootstrap เป็นโครงการอันดับที่ 1 ของ GitHub!

ทำไมจึงใช้ Bootstrap ?

ข้อดีของ Bootstrap
ใช้งานง่าย : ทุกคนที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS สามารถเริ่มใช้ Bootstrap ได้
คุณลักษณะที่ตอบสนองได้: CSS ที่ตอบสนองต่อ Bootstrap จะปรับไปใช้กับโทรศัพท์แท็บเล็ตและเดสก์ท็อป
วิธีแรกในโทรศัพท์มือถือ : ใน Bootstrap 3 รูปแบบมือถือแรกเป็นส่วนหนึ่งของกรอบหลัก
เข้ากันได้กับเบราว์เซอร์ : Bootstrap เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด (Chrome, Firefox, Internet Explorer, Safari และ Opera)

หา Bootstrap ได้ที่ไหน ?

มีสองวิธีในการเริ่มใช้ Bootstrap บนเว็บไซต์

1. ดาวน์โหลด

Bootstrap หากคุณต้องการดาวน์โหลดและโฮสต์ Bootstrap ด้วยตัวคุณเองไปที่ getbootstrap.com และทำตามคำแนะนำที่นั่น

2. Bootstrap CDN

หากคุณไม่ต้องการดาวน์โหลดและโฮสต์ Bootstrap สามารถเรียกใช้ได้จาก CDN (Content Delivery Network) MaxCDN ให้การสนับสนุน CDN สำหรับ Bootstrap ของ CSS และ JavaScript แต่ต้องรวม jQuery:

MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

สร้างเว็บเพจแรกด้วย Bootstrap

1. เพิ่ม doctype HTML5
Bootstrap ใช้องค์ประกอบ HTML และคุณสมบัติ CSS ที่ต้องใช้ doctype HTML5 ควรใส่หลักเกณฑ์ HTML5 ในตอนต้นของหน้ารวมทั้งแอตทริบิวต์ lang และชุดอักขระที่ถูกต้อง:

<!DOCTYPE html>
<html lang="en">
     <head>
           <meta charset="utf-8">
     </head>
</html>

2. โปรดเข้าใจว่า Bootstrap 3 เป็น mobile-first
Bootstrap 3 ได้รับการออกแบบเพื่อตอบสนองต่ออุปกรณ์เคลื่อนที่อันดับแรกแรก ซึ่งเป็นส่วนหนึ่งของกรอบงานหลัก เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและสัมผัสการซูม ให้เพิ่มแท็ก <meta> ต่อไปนี้ภายในองค์ประกอบ <head>:

* width=device-width ส่วนกำหนดความกว้างของหน้าให้เป็นไปตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
** initial-scale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บครั้งแรกโดยเบราว์เซอร์

3. คอนเทนเนอร์
Bootstrap ต้องใช้องค์ประกอบที่มีอยู่เพื่อห่อเนื้อหาในไซต์
มีคอนเทนเนอร์ให้เลือก 2 คลาส:
1. คลาสคอนเทนเนอร์จะจัดเตรียมคอนเทนเนอร์ความกว้างคงที่ที่ตอบสนองต่อ
2. คลาสคอนเทนเนอร์แบบเหลวให้ภาชนะที่มีความกว้างเต็มซึ่งครอบคลุมความกว้างทั้งหมดของวิวพอร์ต
หมายเหตุ : คอนเทนเนอร์บรรจุคอนเทนเนอร์อื่นได้

พื้นฐาน Bootstrap สองแบบ

ตัวอย่างที่ 1 แสดงรหัสสำหรับหน้า Bootstrap พื้นฐาน (ที่มีคอนเทนเนอร์ตอบสนองความกว้างคงที่)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

ทดลองใช้เอง

ตัวอย่างที่ 2 แสดงรหัสสำหรับหน้า Bootstrap พื้นฐาน (มีคอนเทนเนอร์แบบเต็มความกว้าง)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

ค้นหาบล็อกนี้

html Bootstrap