บทนำ

เริ่มต้นใช้งาน 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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

แยก

หากคุณตัดสินใจที่จะใช้โซลูชันสคริปต์แยกกัน Popper จะต้องมาก่อน (หากคุณใช้คำแนะนำเครื่องมือหรือป๊อปโอเวอร์) ตามด้วยปลั๊กอิน JavaScript ของเรา

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

โมดูล

หากคุณใช้<script type="module">โปรดดูส่วน การ ใช้ Bootstrap เป็นโมดูล

ส่วนประกอบ

สงสัยหรือไม่ว่าส่วนประกอบใดต้องการ JavaScript และ Popper ของเราอย่างชัดเจน คลิกลิงก์แสดงส่วนประกอบด้านล่าง หากคุณไม่แน่ใจเกี่ยวกับโครงสร้างหน้าทั่วไป โปรดอ่านตัวอย่างเทมเพลตหน้าต่อไป

แสดงส่วนประกอบที่ต้องใช้ JavaScript

การแจ้งเตือนสำหรับการเลิกจ้าง
ปุ่มสำหรับสลับสถานะและฟังก์ชันช่องทำเครื่องหมาย/วิทยุ
ภาพหมุนสำหรับลักษณะการทำงาน ตัวควบคุม และตัวบ่งชี้สไลด์ทั้งหมด
ยุบเพื่อสลับการมองเห็นเนื้อหา
ดรอปดาวน์สำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper ด้วย )
Modals สำหรับการแสดง การวางตำแหน่ง และพฤติกรรมการเลื่อน
Navbar สำหรับขยายปลั๊กอินยุบของเราเพื่อใช้พฤติกรรมตอบสนอง
Offcanvases สำหรับการแสดง การวางตำแหน่ง และพฤติกรรมการเลื่อน
ขนมปังปิ้งสำหรับแสดงและปิด
คำแนะนำเครื่องมือและป๊อปอัปสำหรับการแสดงและการวางตำแหน่ง (ต้องใช้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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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สำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม