in English

บทนำ

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

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

ต้องการเพิ่ม Bootstrap ในโครงการของคุณอย่างรวดเร็วหรือไม่? ใช้ jsDelivr ซึ่งเป็น CDN โอเพ่นซอร์สฟรี ใช้ package manager หรือต้องการดาวน์โหลดไฟล์ต้นฉบับ? ไป ที่หน้าดาวน์โหลด

CSS

คัดลอกและวางสไตล์ชีต<link>ลงในหน้าของคุณ<head>ก่อนสไตล์ชีตอื่นๆ ทั้งหมดเพื่อโหลด CSS ของเรา

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

ส่วนประกอบหลายอย่างของเราจำเป็นต้องใช้ JavaScript เพื่อให้ทำงานได้ โดยเฉพาะอย่างยิ่ง พวกเขาต้องการjQuery , Popper.jsและปลั๊กอิน JavaScript ของเราเอง เราใช้slim build ของ jQueryแต่รองรับเวอร์ชันเต็มด้วย

วางสิ่งใดสิ่งหนึ่งต่อไปนี้<script>ใกล้ส่วนท้ายของหน้าเว็บของคุณ ก่อน</body>แท็กปิดเพื่อเปิดใช้งาน jQuery ต้องมาก่อน ตามด้วย Popper.js ตามด้วยปลั๊กอิน JavaScript ของเรา

Bundle

รวมทุกสิ่งที่คุณต้องการไว้ในสคริปต์เดียวด้วยบันเดิลของเรา ของเราbootstrap.bundle.jsและbootstrap.bundle.min.jsรวมถึงPopperแต่ไม่ใช่jQuery สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่รวมอยู่ใน Bootstrap โปรดดูส่วนเนื้อหา ของเรา

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

แยก

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

ส่วนประกอบ

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

แสดงส่วนประกอบที่ต้องใช้ JavaScript
  • การแจ้งเตือนสำหรับการเลิกจ้าง
  • ปุ่มสำหรับสลับสถานะและฟังก์ชันช่องทำเครื่องหมาย/วิทยุ
  • ภาพหมุนสำหรับลักษณะการทำงาน ตัวควบคุม และตัวบ่งชี้สไลด์ทั้งหมด
  • ยุบเพื่อสลับการมองเห็นเนื้อหา
  • ดรอปดาวน์สำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper.js ด้วย )
  • Modals สำหรับการแสดง การวางตำแหน่ง และพฤติกรรมการเลื่อน
  • Navbar สำหรับขยายปลั๊กอินยุบของเราเพื่อใช้พฤติกรรมตอบสนอง
  • ขนมปังปิ้งสำหรับแสดงและปิด
  • คำแนะนำเครื่องมือและป๊อปอัป สำหรับการแสดงและการวางตำแหน่ง (ต้องใช้Popper.js ด้วย )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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, shrink-to-fit=no">

คุณสามารถดูตัวอย่างการดำเนินการนี้ได้ในเทมเพลตเริ่มต้น

ขนาดกล่อง

สำหรับการปรับขนาดอย่างตรงไปตรงมาใน 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 และเข้าถึงชุมชนด้วยแหล่งข้อมูลที่เป็นประโยชน์เหล่านี้

  • ติดตาม@getbootstrap บน Twitter
  • อ่านและสมัครรับข้อมูลบล็อก Bootstrap อย่างเป็นทางการ
  • แชทกับเพื่อน Bootstrappers ใน IRC บนirc.freenode.netเซิร์ฟเวอร์ใน##bootstrapช่อง
  • ความช่วยเหลือในการใช้งานอาจพบได้ที่ Stack Overflow (tagged bootstrap-4)
  • นักพัฒนาควรใช้คำสำคัญbootstrapบนแพ็คเกจที่แก้ไขหรือเพิ่มฟังก์ชันการทำงานของ Bootstrap เมื่อแจกจ่ายผ่านnpmหรือกลไกการส่งที่คล้ายคลึงกันเพื่อให้ค้นพบได้มากที่สุด

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