คืออะไร Bootstrap ?
- Bootstrap เป็นกรอบ front-end ฟรีสำหรับการพัฒนาเว็บได้เร็วขึ้นและง่ายขึ้น
- Bootstrap รวมถึง HTML และ CSS ตามแม่แบบการออกแบบสำหรับการพิมพ์รูปแบบ, ปุ่ม, โต๊ะ, นำทาง, Modals, คิวภาพและอื่น ๆ เช่นเดียวกับปลั๊กอิน JavaScript ทางเลือกจำนวนมาก
- Bootstrap ยังช่วยให้คุณสามารถได้อย่างง่ายดายสร้างการออกแบบที่ตอบสนองต่อ
การออกแบบเว็บที่ตอบสนองคืออะไร?
การออกแบบเว็บตอบสนองเป็นเกี่ยวกับการสร้างเว็บไซต์โดยอัตโนมัติซึ่งจะปรับตัวเองให้ดูดีบนอุปกรณ์ทั้งหมดจากโทรศัพท์ขนาดเล็กไปจนถึงขนาดใหญ่เดสก์ท็
Bootstrap ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark อ็อตโตและจาค็อบทอร์นตันที่ Twitter และปล่อยออกมาเป็นผลิตภัณฑ์ที่มาเปิดในเดือนสิงหาคม 2011 บน GitHub
ในมิถุนายน 2014 Bootstrap เป็นโครงการที่ 1 บน GitHub!
ทำไมต้องใช้ Bootstrap ?
ข้อดีของ Bootstrap :
- ใช้งานง่าย: ใครมีความรู้เพียงแค่พื้นฐานของ HTML และ CSS สามารถเริ่มใช้ Bootstrap
- คุณสมบัติที่ตอบสนองต่อ: Bootstrap 's CSS ตอบสนองปรับให้เข้ากับโทรศัพท์มือถือแท็บเล็ตและเดสก์ท็
- วิธีการมือถือครั้งแรก: ใน Bootstrap 3 รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลัก
- ความเข้ากันได้เบราเซอร์: Bootstrap เข้ากันได้กับเบราว์เซอร์ที่ทันสมัย (Chrome, Firefox, Internet Explorer, Safari และ Opera)
ที่จะได้รับ Bootstrap ?
มีสองวิธีที่จะเริ่มใช้เป็น Bootstrap ในเว็บไซต์ของคุณเอง
คุณสามารถ:
- ดาวน์โหลด Bootstrap จาก getbootstrap.com
- รวมถึง Bootstrap จาก CDN
ดาวน์โหลด Bootstrap
หากคุณต้องการที่จะดาวน์โหลดและโฮสต์ Bootstrap ตัวคุณเองไป getbootstrap.com และปฏิบัติตามคำแนะนำที่มี
Bootstrap CDN
หากคุณไม่ต้องการที่จะดาวน์โหลดและเป็นเจ้าภาพ Bootstrap ตัวคุณเองคุณสามารถรวมจาก CDN (เครือข่ายการจัดส่งเนื้อหา)
MaxCDN ให้การสนับสนุน CDN สำหรับ Bootstrap CSS 's และ JavaScript นอกจากนี้ยังรวมถึง jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>ข้อดีอย่างหนึ่งของการใช้ Bootstrap CDN :
ผู้ใช้หลายคนได้ดาวน์โหลดแล้วเงินทุนจาก MaxCDN เมื่อเข้าสู่เว็บไซต์อื่น เป็นผลให้มันจะถูกโหลดจากแคชเมื่อพวกเขาเข้าเยี่ยมชมเว็บไซต์ของคุณซึ่งจะนำไปสู่เวลาในการโหลดได้เร็วขึ้น นอกจากนี้ส่วนใหญ่ CDN's จะให้แน่ใจว่าเมื่อผู้ใช้ขอไฟล์จากนั้นก็จะมีการแสดงจากเซิร์ฟเวอร์ที่ใกล้เคียงกับพวกเขาซึ่งยังนำไปสู่เวลาในการโหลดได้เร็วขึ้น
สร้างหน้าเว็บแรกด้วย 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 เป็นโทรศัพท์มือถือครั้งแรก
Bootstrap 3 ถูกออกแบบมาเพื่อตอบสนองกับอุปกรณ์มือถือ รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลัก
เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและซูมสัมผัสเพิ่มต่อไปนี้ <meta> แท็กภายใน <head> องค์ประกอบ:
<meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width ส่วนกำหนดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
initial-scale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์
3. ตู้คอนเทนเนอร์
Bootstrap ยังต้องมีองค์ประกอบที่มีการตัดเนื้อหาเว็บไซต์
มีสองชั้นภาชนะให้เลือกเป็น:
-
.containerระดับให้ตอบสนองภาชนะกว้างคง -
.container-fluidระดับให้ภาชนะที่เต็มความกว้างทอดกว้างทั้งหมดของวิวพอร์ต
หมายเหตุ: ตู้คอนเทนเนอร์ไม่ได้ Nestable (คุณไม่สามารถใส่ภาชนะในภาชนะอื่น)
สองขั้นพื้นฐาน Bootstrap หน้า
ตัวอย่างต่อไปนี้แสดงให้เห็นโค้ดสำหรับพื้นฐาน 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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> ลองตัวเอง» ตัวอย่างต่อไปนี้แสดงให้เห็นโค้ดสำหรับพื้นฐาน 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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> ลองตัวเอง»