แถบการนำทางเป็นส่วนประกอบเมตาที่ตอบสนองซึ่งทำหน้าที่เป็นส่วนหัวของการนำทางในแอพหรือเว็บไซต์ของคุณ
1. แถบการนำทางเริ่มต้น
แถบการนำทางสามารถพับได้ (และสามารถเปิดและปิดได้) บนอุปกรณ์มือถือและกลายเป็นโหมดขยายแนวนอนเมื่อความกว้างของวิวพอร์ตเพิ่มขึ้น
ปรับแต่งเกณฑ์สำหรับโหมดการพับและโหมดแนวนอน
ขึ้นอยู่กับความยาวของสิ่งที่คุณวางไว้ในแถบการนำทางบางทีคุณอาจต้องปรับเกณฑ์สำหรับแถบการนำทางเพื่อเข้าสู่โหมดพับและโหมดแนวนอน คุณสามารถบรรลุความต้องการของคุณได้โดยการเปลี่ยนค่าของตัวแปร @grid-float-breakpoint หรือเพิ่มรหัส CSS แบบสอบถามสื่อของคุณเอง
ขั้นตอนแรก:
แท็ก Nav ของคอนเทนเนอร์ด้านนอกสุดและเพิ่มคลาสสไตล์ Nav-Bar เพื่อระบุว่ามันเป็นของแถบการนำทาง
<nav role = "การนำทาง"> </av>
ผล:
ขั้นตอนที่ 2 : เพิ่มส่วนหัว
<nav role = "การนำทาง"> <div> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#bs-example-navbar-collape-1"> <pan> การนำทางสลับ </span> <span> </span> <span> </span>
ฉลากปุ่มซ้อนกันด้วยไอคอนสามช่วง จากนั้นให้คลาส Style Navbar-Toggle และการยุบตัวของแอตทริบิวต์ (ล่มสลาย) และเป้าหมายคือเป้าหมายข้อมูลเมื่อคลิก
เมื่อหน้าต่างแคบลงในระดับหนึ่งผลกระทบทางด้านขวาจะปรากฏขึ้น
ขั้นตอนที่ 3: เมนูดรอปดาวน์แบบซ้อนกัน, แบบฟอร์ม, เมนูแบบดรอปดาวน์
รหัส:
<H1> แถบการนำทาง </h1> <nav role = "การนำทาง"> <div> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#bs-example-navbar-collapse-1"> <span> การนำทาง href = "#"> ยี่ห้อ </a> </div> <div id = "bs-example-navbar-collapse-1"> <!-เมนูดรอปดาวน์แบบซ้อนกัน-> <ul> <li> <a href = "#"> ลิงก์ </a> </li> <li> <li> <a href = "#" data-toggle = "dropdown"> pulldown <b> </b> </a> <ul> <li> <a href = "#"> แอ็คชั่น </a> </li> <li> <a href = "#"> การกระทำ </a> </li> href = "#"> แอ็คชั่น </a> </li> <li> <a href = "#"> การกระทำ </a> </li> <li> <a href = "#"> แอ็คชั่น </a> </li> </li> </li></ul> <! type = "ปุ่ม"> ส่ง </button> </form> <! -----> </div> </av>
ดูตัวอย่าง:
เพิ่มความสามารถในการเข้าถึงแถบการนำทาง
เพื่อปรับปรุงการเข้าถึงให้แน่ใจว่าได้เพิ่ม role = "การนำทาง" ในแต่ละแถบการนำทาง
2. แบบฟอร์ม
การวางแบบฟอร์มภายใน. navbar-form ให้การจัดแนวแนวตั้งที่ดีและสถานะที่ยุบในวิวพอร์ตที่แคบลง ใช้ตัวเลือกการจัดตำแหน่งเพื่อพิจารณาว่าจะปรากฏที่ใดในแถบการนำทาง
มีการแชร์รหัสจำนวนมากโดยใช้ Mixin, .navbar-form และ. form-inline
รหัส
<form action = "" role = "search"> <div> <input type = "text"/> </div> <button type = "ปุ่ม"> ส่ง </button> </form>
เพิ่มฉลากฉลากลงในกล่องอินพุต
หากคุณไม่เพิ่มแท็กป้ายกำกับลงในกล่องอินพุตเครื่องอ่านหน้าจอจะมีปัญหา สำหรับแบบฟอร์มในแถบการนำทางคุณสามารถซ่อนแท็กป้ายกำกับผ่านคลาส. SR เท่านั้น
3. ปุ่ม
รหัส:
<button type = "button"> เข้าสู่ระบบ </pution>
ดูตัวอย่าง:
4. ข้อความ
เมื่อห่อข้อความใน. navbar-text แท็ก <p> มักจะใช้สำหรับระยะห่างและสีที่ถูกต้อง
รหัสตัวอย่าง:
<p> ข้อความ </p>
5. ลิงค์ที่ไม่ใช่การตรวจหา
บางทีคุณอาจต้องการเพิ่มลิงก์มาตรฐานนอกส่วนประกอบการนำทางมาตรฐานจากนั้นใช้คลาส. NAVBAR-LINK สามารถให้ลิงก์เริ่มต้นที่ถูกต้องและสีผกผันที่ถูกต้อง
รหัสตัวอย่าง:
คัดลอกรหัสดังนี้: <p> นี่คือ <a href = "#"> ลิงค์ </a> </p>
6. การจัดตำแหน่งส่วนประกอบ
ใช้คลาสเครื่องมือ. navbar-left หรือ. navbar-right เพื่อจัดตำแหน่งลิงก์การนำทางแบบฟอร์มปุ่มหรือข้อความ ทั้งสองคลาสใช้รูปแบบการลอยตัว CSS ในทิศทางเฉพาะ ตัวอย่างเช่นในการจัดตำแหน่งลิงก์นำทางคุณต้องวางไว้ในคลาสเครื่องมือแยกต่างหาก <ul>
คลาสเหล่านี้เป็นรุ่นผสมของ. pull-left และ. pull-right แต่พวกเขาถูก จำกัด เฉพาะการสืบค้นสื่อซึ่งทำให้ง่ายต่อการจัดการส่วนประกอบแถบการนำทางบนหน้าจอที่มีขนาดต่าง ๆ
7. แก้ไขที่ด้านบน
การเพิ่ม. navbar-fixed-top ช่วยให้แถบการนำทางได้รับการแก้ไขที่ด้านบน เอฟเฟกต์ไม่เพียงพอ
จำเป็นต้องตั้งค่าช่องว่างภายในสำหรับแท็กตัวถัง
แถบการนำทางที่คงที่นี้จะปิดบังเนื้อหาอื่น ๆ ในหน้าเว้นแต่คุณจะตั้งช่องว่างด้านบน <body> ใช้ค่าของคุณเองหรือใช้รหัสที่ให้ไว้ด้านล่าง เคล็ดลับ: ความสูงเริ่มต้นของแถบนำทางคือ 50px
ร่างกาย {padding-top: 70px; -
จะต้องวางไว้หลังจากไฟล์หลักของ Bootstrap CSS (ปัญหาความครอบคลุม)
8. แก้ไขที่ด้านล่าง
ใช้. navbar-fixed-bottom แทน
จำเป็นต้องตั้งค่าภายใน (ช่องว่างภายใน) สำหรับแท็กร่างกาย
แถบการนำทางที่คงที่นี้จะปิดบังเนื้อหาอื่น ๆ บนหน้าเว้นแต่คุณจะตั้งช่องว่างที่ด้านล่างของ <body> ใช้ค่าของคุณเองหรือใช้รหัสที่ให้ไว้ด้านล่าง เคล็ดลับ: ความสูงเริ่มต้นของแถบนำทางคือ 50px
Body {padding-bottom: 70px; -
ตรวจสอบให้แน่ใจว่าได้ใช้หลังจากโหลดแกนของ bootstrap CSS
9. อยู่ที่ด้านบน
สร้างแถบการนำทางด้วยหน้าโดยการเพิ่ม. navbar-static-top มันหายไปเมื่อหน้าเลื่อนลง ซึ่งแตกต่างจากคลาส. navbar-fixed-* คุณไม่จำเป็นต้องเพิ่มช่องว่างภายในร่างกาย
10. แถบนำทางสีผกผัน
การปรากฏตัวของแถบการนำทางสามารถเปลี่ยนแปลงได้โดยการเพิ่มคลาส. navbar-inverse
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นการแนะนำรายละเอียดเกี่ยวกับวิธีการใช้แถบการนำทาง bootstrap ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน