เริ่มต้นใช้งาน Bootstrap

Bootstrap เป็นชุดเครื่องมือส่วนหน้าที่ทรงพลังและเต็มไปด้วยคุณสมบัติ สร้างทุกอย่างตั้งแต่ต้นแบบไปจนถึงการผลิตในไม่กี่นาที

ในหน้านี้

เริ่มต้นอย่างรวดเร็ว

เริ่มต้นด้วยการรวม CSS และ JavaScript ที่พร้อมใช้งานจริงของ Bootstrap ผ่าน CDN โดยไม่ต้องมีขั้นตอนการสร้างใดๆ ดูในทางปฏิบัติด้วยการสาธิตBootstrap CodePen

สร้างindex.htmlไฟล์ใหม่ในรูทโปรเจ็กต์ของคุณ รวม<meta name="viewport">แท็กด้วยสำหรับพฤติกรรมตอบสนองที่เหมาะสมในอุปกรณ์มือถือ
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

รวม CSS และ JS ของ Bootstrap วาง<link>แท็กใน<head>CSS ของเรา และ<script>แท็กสำหรับบันเดิล JavaScript ของเรา (รวมถึง Popper สำหรับการวางตำแหน่งดรอปดาวน์ ป๊อปเปอร์ และคำแนะนำเครื่องมือ) ก่อน</body>ปิด เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์ CDNของ เรา

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

สวัสดีชาวโลก! เปิดหน้าในเบราว์เซอร์ที่คุณเลือกเพื่อดูหน้า Bootstrapped ของคุณ ตอนนี้คุณสามารถเริ่มสร้างด้วย Bootstrap โดยการสร้างเลย์เอาต์ของคุณเอง เพิ่มองค์ประกอบมากมาย และใช้ตัวอย่างอย่างเป็นทางการของเรา

ลิงค์ CDN

สำหรับการอ้างอิง นี่คือลิงก์ CDN หลักของเรา

คำอธิบาย	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

คุณยังสามารถใช้ CDN เพื่อดึงบิล ด์ เพิ่มเติมของเราที่แสดงอยู่ในหน้าเนื้อหา

ขั้นตอนถัดไป

อ่านเพิ่มเติมเกี่ยวกับ การตั้งค่าสภาพแวดล้อมส่วนกลางที่สำคัญบางอย่างที่ Bootstrap ใช้
อ่านเกี่ยวกับสิ่งที่รวมอยู่ใน Bootstrap ในส่วนเนื้อหา ของเรา และรายการส่วนประกอบที่ต้องใช้ JavaScriptด้านล่าง
ต้องการพลังเพิ่มอีกนิด? พิจารณาสร้างด้วย Bootstrap โดยการรวมไฟล์ต้นทางผ่านตัวจัดการแพ็คเกจ
ต้องการใช้ Bootstrap เป็นโมดูลด้วย<script type="module">? โปรดดูส่วน การ ใช้ Bootstrap ของเราเป็นโมดูล

ส่วนประกอบ JS

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

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

การแจ้งเตือนสำหรับการเลิกจ้าง
ปุ่มสำหรับสลับสถานะและช่องทำเครื่องหมาย/ฟังก์ชันวิทยุ
ภาพหมุนสำหรับลักษณะการทำงาน ตัวควบคุม และตัวบ่งชี้สไลด์ทั้งหมด
ยุบเพื่อสลับการมองเห็นเนื้อหา
ดรอปดาวน์สำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper ด้วย )
Modals สำหรับการแสดง การวางตำแหน่ง และพฤติกรรมการเลื่อน
Navbar สำหรับขยายปลั๊กอินยุบและ Offcanvas ของเราเพื่อใช้พฤติกรรมตอบสนอง
การนำทางด้วยปลั๊กอินแท็บสำหรับการสลับบานหน้าต่างเนื้อหา
Offcanvases สำหรับการแสดง การวางตำแหน่ง และลักษณะการเลื่อน
Scrollspy สำหรับพฤติกรรมการเลื่อนและการอัปเดตการนำทาง
ขนมปังปิ้งสำหรับแสดงและปิด
คำแนะนำเครื่องมือและป๊อปอัปสำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper ด้วย )

โลกที่สำคัญ

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 อย่างเป็นทางการ
ถามและสำรวจการสนทนา GitHub ของเรา
แชทกับเพื่อน Bootstrappers ใน IRC บนirc.libera.chatเซิร์ฟเวอร์ใน#bootstrapช่อง
ความช่วยเหลือในการใช้งานอาจพบได้ที่ Stack Overflow (tagged bootstrap-5)
นักพัฒนาควรใช้คำสำคัญbootstrapบนแพ็คเกจที่แก้ไขหรือเพิ่มฟังก์ชันการทำงานของ Bootstrap เมื่อแจกจ่ายผ่านnpmหรือกลไกการส่งที่คล้ายคลึงกันเพื่อการค้นพบสูงสุด

คุณยังสามารถติดตาม@getbootstrap บน Twitterสำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม