บทนำ
เริ่มต้นใช้งาน Bootstrap ซึ่งเป็นเฟรมเวิร์กที่ได้รับความนิยมมากที่สุดในโลกสำหรับการสร้างไซต์ที่ตอบสนองบนมือถือเป็นอันดับแรก ด้วย jsDelivr และหน้าเริ่มต้นเทมเพลต
เริ่มต้นอย่างรวดเร็ว
ต้องการเพิ่ม Bootstrap ในโครงการของคุณอย่างรวดเร็วหรือไม่? ใช้ jsDelivr ซึ่งเป็น CDN โอเพ่นซอร์สฟรี ใช้ package manager หรือต้องการดาวน์โหลดไฟล์ต้นฉบับ? ไป ที่หน้าดาวน์โหลด
CSS
คัดลอกและวางสไตล์ชีต<link>
ลงในหน้าของคุณ<head>
ก่อนสไตล์ชีตอื่นๆ ทั้งหมดเพื่อโหลด CSS ของเรา
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS
ส่วนประกอบหลายอย่างของเราจำเป็นต้องใช้ JavaScript เพื่อให้ทำงานได้ โดยเฉพาะอย่างยิ่ง พวกเขาต้องการปลั๊กอิน JavaScript และPopper ของเรา เอง วางสิ่งใดสิ่งหนึ่งต่อไปนี้<script>
ใกล้ส่วนท้ายของหน้าเว็บของคุณ ก่อน</body>
แท็กปิดเพื่อเปิดใช้งาน
Bundle
รวมทุกปลั๊กอิน Bootstrap JavaScript และการพึ่งพาด้วยหนึ่งในสองบันเดิลของเรา ทั้งbootstrap.bundle.js
และbootstrap.bundle.min.js
รวมถึงPopperสำหรับคำแนะนำเครื่องมือและป๊อปอัปของเรา สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่รวมอยู่ใน Bootstrap โปรดดูส่วนเนื้อหา ของเรา
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
แยก
หากคุณตัดสินใจที่จะใช้โซลูชันสคริปต์แยกกัน Popper จะต้องมาก่อน (หากคุณใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์) ตามด้วยปลั๊กอิน JavaScript ของเรา
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
โมดูล
หากคุณใช้<script type="module">
โปรดดูส่วน การ ใช้ Bootstrap เป็นโมดูล
ส่วนประกอบ
สงสัยหรือไม่ว่าส่วนประกอบใดต้องการ JavaScript และ Popper ของเราอย่างชัดเจน คลิกลิงก์แสดงส่วนประกอบด้านล่าง หากคุณไม่แน่ใจเกี่ยวกับโครงสร้างหน้าทั่วไป โปรดอ่านตัวอย่างเทมเพลตหน้าต่อไป
แสดงส่วนประกอบที่ต้องใช้ JavaScript
- การแจ้งเตือนสำหรับการเลิกจ้าง
- ปุ่มสำหรับสลับสถานะและช่องทำเครื่องหมาย/ฟังก์ชันวิทยุ
- ภาพหมุนสำหรับลักษณะการทำงาน ตัวควบคุม และตัวบ่งชี้สไลด์ทั้งหมด
- ยุบเพื่อสลับการมองเห็นเนื้อหา
- ดรอปดาวน์สำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper ด้วย )
- Modals สำหรับการแสดง การวางตำแหน่ง และพฤติกรรมการเลื่อน
- Navbar สำหรับขยายปลั๊กอินยุบของเราเพื่อใช้พฤติกรรมตอบสนอง
- ขนมปังปิ้งสำหรับแสดงและปิด
- คำแนะนำเครื่องมือและป๊อปอัปสำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper ด้วย )
- Scrollspy สำหรับพฤติกรรมการเลื่อนและการอัปเดตการนำทาง
เทมเพลตเริ่มต้น
อย่าลืมตั้งค่าเพจของคุณด้วยมาตรฐานการออกแบบและการพัฒนาล่าสุด นั่นหมายถึงการใช้ประเภทเอกสาร HTML5 และรวมเมตาแท็กวิวพอร์ตสำหรับพฤติกรรมการตอบสนองที่เหมาะสม นำทุกอย่างมารวมกันและหน้าของคุณควรมีลักษณะดังนี้:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
สำหรับขั้นตอนต่อไป โปรดไปที่เอกสารเค้าโครงหรือตัวอย่างอย่างเป็นทางการของเราเพื่อเริ่มจัดวางเนื้อหาและส่วนประกอบของเว็บไซต์ของคุณ
โลกที่สำคัญ
Bootstrap ใช้รูปแบบและการตั้งค่าส่วนกลางที่สำคัญจำนวนหนึ่งซึ่งคุณจะต้องทราบเมื่อใช้งาน ซึ่งเกือบทั้งหมดมุ่งสู่การ ทำให้ รูปแบบเบราว์เซอร์ข้ามมาตรฐานเป็นมาตรฐาน มาดำดิ่งกัน
ประเภทเอกสาร HTML5
Bootstrap ต้องการการใช้ประเภทเอกสาร HTML5 หากไม่มีมัน คุณจะเห็นการจัดสไตล์ที่ขี้ขลาดและไม่สมบูรณ์ แต่ก็ไม่ควรทำให้เกิดอาการสะอึกมากนัก
<!doctype html>
<html lang="en">
...
</html>
เมตาแท็กที่ตอบสนอง
Bootstrap ได้รับการพัฒนาสำหรับมือถือเป็นอันดับแรกซึ่งเป็นกลยุทธ์ที่เราเพิ่มประสิทธิภาพโค้ดสำหรับอุปกรณ์มือถือก่อน จากนั้นจึงขยายขนาดส่วนประกอบตามความจำเป็นโดยใช้การสืบค้นสื่อ CSS เพื่อให้แน่ใจว่าการเรนเดอร์ที่เหมาะสมและการซูมแบบสัมผัสสำหรับอุปกรณ์ทั้งหมด ให้เพิ่มเมตาแท็กวิวพอร์ตที่ตอบสนองใน<head>
ไฟล์ .
<meta name="viewport" content="width=device-width, initial-scale=1">
คุณสามารถดูตัวอย่างการดำเนินการนี้ได้ในเทมเพลตเริ่มต้น
ขนาดกล่อง
สำหรับการปรับขนาดอย่างตรงไปตรงมาใน CSS เราเปลี่ยนค่าส่วนกลางbox-sizing
จากcontent-box
เป็นborder-box
. วิธีนี้ช่วยให้แน่ใจได้ว่าpadding
จะไม่ส่งผลต่อความกว้างที่คำนวณได้ขั้นสุดท้ายขององค์ประกอบ แต่อาจทำให้เกิดปัญหากับซอฟต์แวร์ของบริษัทอื่น เช่น Google Maps และ Google Custom Search Engine
ในโอกาสที่หายากที่คุณต้องแทนที่ ใช้สิ่งต่อไปนี้:
.selector-for-some-widget {
box-sizing: content-box;
}
ด้วยข้อมูลโค้ดข้างต้น องค์ประกอบที่ซ้อนกัน ซึ่งรวมถึงเนื้อหาที่สร้างขึ้นผ่านทาง::before
และ::after
ทั้งหมดจะสืบทอดตามที่ระบุbox-sizing
สำหรับสิ่ง.selector-for-some-widget
นั้น
เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบกล่องและขนาดที่ CSS Tricks
รีบูต
สำหรับการเรนเดอร์ข้ามเบราว์เซอร์ที่ปรับปรุงแล้ว เราใช้Rebootเพื่อแก้ไขความไม่สอดคล้องกันในเบราว์เซอร์และอุปกรณ์ต่างๆ ในขณะที่ให้การรีเซ็ตองค์ประกอบ HTML ทั่วไปที่มีความคิดเห็นมากขึ้นเล็กน้อย
ชุมชน
ติดตามข่าวสารล่าสุดเกี่ยวกับการพัฒนา Bootstrap และเข้าถึงชุมชนด้วยแหล่งข้อมูลที่เป็นประโยชน์เหล่านี้
- อ่านและสมัครรับข้อมูลบล็อก Bootstrap อย่างเป็นทางการ
- แชทกับเพื่อน Bootstrappers ใน IRC บน
irc.libera.chat
เซิร์ฟเวอร์ใน#bootstrap
ช่อง - อาจพบความช่วยเหลือในการใช้งานที่ Stack Overflow (tagged
bootstrap-5
) - นักพัฒนาควรใช้คำสำคัญ
bootstrap
บนแพ็คเกจที่แก้ไขหรือเพิ่มฟังก์ชันการทำงานของ Bootstrap เมื่อแจกจ่ายผ่านnpmหรือกลไกการส่งที่คล้ายคลึงกันเพื่อการค้นพบสูงสุด
คุณยังสามารถติดตาม@getbootstrap บน Twitterสำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม