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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

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

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

Bundle

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

แยก

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

ส่วนประกอบ

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

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

เทมเพลตเริ่มต้น

อย่าลืมตั้งค่าเพจของคุณด้วยมาตรฐานการออกแบบและการพัฒนาล่าสุด นั่นหมายถึงการใช้ประเภทเอกสาร 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 และเข้าถึงชุมชนด้วยแหล่งข้อมูลที่เป็นประโยชน์เหล่านี้

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

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

CSP และ SVG แบบฝังตัว

ส่วนประกอบ Bootstrap หลายตัวรวมถึง SVG ที่ฝังอยู่ใน CSS ของเราเพื่อจัดรูปแบบองค์ประกอบอย่างสม่ำเสมอและง่ายดายในเบราว์เซอร์และอุปกรณ์ต่างๆ สำหรับองค์กรที่มีการ กำหนดค่าCSPที่เข้มงวดมากขึ้นเราได้จัดทำเอกสารอินสแตนซ์ทั้งหมดของ SVG แบบฝังของเรา (ซึ่งทั้งหมดนำไปใช้ผ่านbackground-image) เพื่อให้คุณสามารถตรวจสอบตัวเลือกของคุณได้อย่างละเอียดยิ่งขึ้น

จากการสนทนาของชุมชนตัวเลือกบางอย่างในการแก้ไขปัญหานี้ใน codebase ของคุณรวมถึงการแทนที่ URL ด้วยเนื้อหาที่โฮสต์ในเครื่อง การลบรูปภาพ และใช้รูปภาพแบบอินไลน์ (ไม่สามารถใช้ได้กับทุกองค์ประกอบ) และการแก้ไข CSP ของคุณ คำแนะนำของเราคือการตรวจสอบนโยบายความปลอดภัยของคุณเองอย่างรอบคอบและตัดสินใจเลือกเส้นทางที่ดีที่สุด หากจำเป็น