แถบการนำทาง เป็นคุณสมบัติที่ดีและเป็นคุณสมบัติที่โดดเด่นของเว็บไซต์ Bootstrap แถบการนำทางเป็นองค์ประกอบเมตาตอบสนองที่ทำหน้าที่เป็นชื่อการนำทางสำหรับแอปพลิเคชันหรือเว็บไซต์ แถบการนำทางถูกยุบในมุมมองของอุปกรณ์มือถือและแถบการนำทางจะขยายในแนวนอนเมื่อความกว้างของวิวพอร์ตเพิ่มขึ้น ในแกนกลางของแถบการนำทาง bootstrap แถบการนำทางรวมถึงคำจำกัดความของสไตล์สำหรับชื่อไซต์และการนำทางพื้นฐาน
ขั้นตอนในการสร้างแถบการนำทางเริ่มต้นมีดังนี้:
ในการเพิ่มลิงก์ไปยังแถบการนำทางเพียงเพิ่มรายการที่ไม่ได้เรียงลำดับด้วยคลาส .NAV, .NAVBAR-NAV
ตัวอย่างต่อไปนี้จะแบ่งปันแถบการนำทางที่ทำโดยใช้ bootstrap3 กับคุณ เนื้อหาเฉพาะมีดังนี้
ตัวอย่างเช่น
ดังนั้นวิธีการเขียนองค์ประกอบที่สะดวกเช่นนี้
ใช้ bootstrap3!
บอกเราโดยตรง
โดยทั่วไปแล้วการนำทางจะถูกวางไว้ในโครงสร้างต่อไปนี้
<nav role = "การนำทาง"> <div> <div> <a href = "#"> <img src = "... "> </a> </div> </div> </av>
1. แท็กนาวี
ในชั้นแรกจำเป็นต้องใช้ Navbar คุณสมบัติอื่น ๆ เป็นทางเลือก
การเพิ่ม Navbar-Default สร้างการนำทางพื้นฐานที่สุดและจะไม่ได้รับการแก้ไขเมื่อสีมีความโปร่งใส
เพิ่มสีของคลาส navbar-inverse เพื่อเปลี่ยนเป็นสีดำ
เพิ่ม Navbar-fixed-top เพื่อแก้ไขที่ด้านบนเพิ่ม navbar-fixed-bottom เพื่อแก้ไขที่ด้านล่าง
ผลของการเพิ่ม Navbar-static-top มีดังนี้
<div>
ตัวอย่างเช่นส่วนหัวการนำทางบันทึกของเว็บไซต์คลิกที่หน้าแรกหรือชื่อของเว็บไซต์
เอฟเฟกต์ดังกล่าวข้างต้น
ฉันคิดว่าเอฟเฟกต์จะดีขึ้นถ้าฉันสามารถเปลี่ยนเป็นข้อความได้ที่นี่
2. แบบฟอร์ม
การเพิ่มแบบฟอร์มในการนำทางเช่นการค้นหาการเข้าสู่ระบบ ฯลฯ ก็เป็นเรื่องธรรมดา
ตัวอย่างเช่นการค้นหาของฉันด้านบน
<form role = "search"> <div> <input type = "text" placeholder = "search"> </div> <button type = "ส่ง"> ค้นหา </button> </form>
อธิบายว่าคลาส Navbar-Left จะวางตำแหน่งแบบฟอร์มนี้ทางด้านซ้าย
แน่นอนว่ายังมีคลาส Navbar-Right
ในทำนองเดียวกันปุ่มสามารถเพิ่มได้เช่นนี้
<button type = "ปุ่ม"> ลงชื่อเข้าใช้ </button>
สามารถเพิ่มข้อความเช่นนี้ได้
<p> ลงชื่อเข้าใช้เป็น Mark Otto </p>
สามารถเพิ่มลิงค์ได้เช่นนี้
<p> ลงชื่อเข้าใช้เป็น <a href = "#"> Mark Otto </a> </p>
และด้วยวิธีนี้คุณสามารถเพิ่มคลาส Navbar-Right หรือ Navbar-Welft
การนำทางของฉัน
<!-การนำทาง-> <div> <div id = "navcontainer"> <nav role = "การนำทาง"> <div> <div> <a href = "#"> ห้องสมุด Xiansheng </a> </div> <form role = "search"> <div> <li> <a data-toggle = "modal" data-target = "#register"> register </a> </li> <li> <a data-toggle = "modal" data-target = "#signin"> ล็อกอิน </a> </li> </ul>
เอฟเฟกต์มีดังนี้
สำหรับเนื้อหาเพิ่มเติมคุณสามารถอ้างถึงบทความเพื่อการเรียนรู้:
Bootstrap ใช้เอฟเฟกต์แถบการนำทางเริ่มต้น
Bootstrap ต้องเรียนรู้ทุกวัน (II)
Bootstrap ต้องเรียนรู้ทุกวันนำทาง (Affix) ปลั๊กอิน
เนื้อหาเพิ่มเติมเกี่ยวกับ bootstrap สามารถพบได้ในหัวข้อพิเศษ: "การสอนการเรียนรู้ bootstrap"
ด้านบนเป็นแถบการนำทางที่ทำโดยใช้ bootstrap3 ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและสร้างแถบการนำทางของคุณเอง