Source

บทนำ

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

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

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

CSS

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

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

JS

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

เราใช้slim build ของ jQueryแต่รองรับเวอร์ชันเต็มด้วย

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

แสดงส่วนประกอบที่ต้องใช้ 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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สำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม