home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีสร้างเมนูแบบเลื่อนลงด้วย Bootstrap

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

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

โดยปกติ ดรอปดาวน์ต้องใช้ JavaScript เล็กน้อย

หากคุณยังไม่ได้เริ่มเรียนรู้หรือเพียงแค่ต้องการวิธีแก้ปัญหาอย่างรวดเร็ว Bootstrap ก็เหมาะสมที่สุด

บูตสแตรปคืออะไร

คุณอาจเคยได้ยินคำนี้หลายครั้ง แต่ Bootstrap คืออะไร?

เป็นเฟรมเวิร์ก CSS แบบส่วนหน้า (พร้อม JavaScript เล็กน้อย) ซึ่งหมายความว่าเป็นโครงนั่งร้านที่ทำขึ้นล่วงหน้าเพื่อเร่งการพัฒนาอย่างมาก โปรแกรมเมอร์ทุ่มเทเวลาจำนวนหนึ่งในการพัฒนามาตรฐานที่จะยึดมั่น และรวมการตั้งค่าที่จำเป็นทั้งหมดไว้ในเฟรมเวิร์กด้วยตัวมันเอง ดังนั้นเราจึงไม่ต้องทำในแต่ละครั้ง

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

สิ่งนี้ช่วยได้มากด้วยความสอดคล้องกันเนื่องจากทีมนักพัฒนาหลายคนที่ทำงานบนแอปพลิเคชันขนาดใหญ่ไม่จำเป็นต้องกังวลเกี่ยวกับการใช้สไตล์เดียวกัน สไตล์ทั้งหมดถูกกำหนดไว้ในกรอบงาน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

การตั้งค่า Bootstrap

ในการใช้ Bootstrap เราจำเป็นต้องเพิ่มโค้ดสองสามบรรทัดในโครงสร้าง HTML ของเรา

เราจะใช้ Bootstrap CDN สำหรับการตั้งค่าที่เร็วและง่ายที่สุด

ก่อนอื่น เราต้องการเทมเพลต HTML5 ที่เหมาะสม ซึ่งทำได้ง่ายในโปรแกรมแก้ไขโค้ดสมัยใหม่ ใน VSCode เพียงพิมพ์ ! แล้วกด enter หรือ tab เพื่อรับโครงสร้างเอกสาร HTML5 ซึ่งมีลักษณะดังนี้:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

ตอนนี้ ภายในแท็ก ให้วางบรรทัดต่อไปนี้เหนือสไตล์ชีตอื่นๆ:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

Bootstrap ขึ้นอยู่กับไลบรารี JavaScript บางตัวภายใต้ประทุน ดังนั้นเราจำเป็นต้องรวมแท็ก