แถบการนำทาง (NAVBAR) เป็นองค์ประกอบอิสระใน bootstrap และมีความแตกต่างที่ชัดเจนระหว่างแถบการนำทาง (NAVBAR) และการนำทาง (NAV) ใน bootstrap มีสีพื้นหลังในแถบการนำทาง (Navbar) และแถบการนำทางสามารถอยู่ในรูปแบบต่าง ๆ เช่นลิงก์บริสุทธิ์รูปแบบรูปแบบและการนำทาง
1. การต่อสู้เชิงปฏิบัติ แถบการนำทางหนึ่งพร้อมเมนูระดับ 2 และรูปแบบ
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> แถบการนำทาง </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1/csstboots Body {margin: 30px; padding: 30px;} </style> </head> <body> <div role = "การนำทาง"> <!-ชื่อถูกนำมาใช้ผ่าน "Navbar-Header" และ "Navbar-Brand"-> <v> <a href = "##"> title </a> <a href = "##" data-toggle = "dropdown"> บล็อก <span> </span> </a> <!-เมนูที่สอง-> <ul> <li> <a href = "##"> เมนูที่สอง </a> </li> </li> </li> rol = "search"> <div> <อินพุต type = "text" placeholder = "โปรดป้อนคำหลัก"/> </div> <button type = "ส่ง"> ค้นหา </button> </form> </div> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-รวมถึงปลั๊กอิน JS ทั้งหมดสำหรับปลั๊กอิน bootstrap หรือ JS ที่สามารถใช้ได้ตามต้องการ-> <สคริปต์ src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>การเรนเดอร์มีดังนี้:
นอกเหนือจากการใช้องค์ประกอบ A ใน Navbar-Brand และ UL และ Navbar-Form ของ Navbar-Nav แล้วองค์ประกอบอื่น ๆ สามารถใช้ในแถบการนำทางของ bootstrap:
1) ปุ่มในแถบการนำทาง NAVBAR-BTN
2) ข้อความในแถบการนำทาง Navbar
3) ลิงค์ปกติในแถบการนำทาง Navbar-Link
2. การต่อสู้เชิงปฏิบัติ 2- แถบการนำทางคงที่
<!-แถบการนำทางด้านบน-> <div role = "การนำทาง"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> บล็อก </a> </ul> </div> <!-แถบการนำทางด้านล่าง-> <div role = "การนำทาง"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> บ้าน </a> </li> <li> href = "##"> ฟอรัม </a> </li></ul> </div> <!-เนื้อหาข้อความ-> <div> เนื้อหาข้อความเว็บเพจ </div>
การเรนเดอร์มีดังนี้:
3. แถบการนำทางที่ตอบสนองได้ สามประการ
การเรนเดอร์มีดังนี้:
บางครั้งมีความจำเป็นที่จะต้องกลับสี Bootstrap จัดเตรียมแถบนำทางกลับด้านสำหรับสิ่งนี้ แต่เพียงแทนที่ชื่อคลาส Navbar-Deafult ด้วย Navbar-Inverse จากนั้นสีพื้นหลังของแถบนำทางและสีข้อความจะถูกแก้ไข
4. การนำทางสี่ภาคปฏิบัติ
1) การนำทางพลเมืองด้วยหมายเลขหน้า
<!-Pagination: Pagination-lg ขนาดปกติ: ทำให้การนำทาง PAGINATION BIGER PAGINATION PAGINATION-SM: ทำให้การแบ่งหน้ามีขนาดเล็กลง-> <ul> <li> <a href = "#"> « home </a> </li> <li> <a href = "#"> 1 </a> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <!
การเรนเดอร์มีดังนี้:
2) การเลี้ยวหน้าและการนำทาง
<ul> <li> <a href = "#"> «หน้าก่อนหน้า </a> </li> <!-สถานะปิดใช้งาน-> <li> <a href = "#"> หน้าถัดไป» </a> </li></ul> <! หน้า» </a> </li> </ul>
การเรนเดอร์มีดังนี้:
5. การปฏิบัติห้า แท็ก
ในบางหน้าเว็บมักจะเพิ่มแท็กเพื่อบอกข้อมูลเพิ่มเติมบางอย่างของผู้ใช้เช่น:
เอฟเฟกต์นี้ถูกสกัดใน bootstrap ลงในส่วนประกอบฉลากและเน้นในสไตล์ ".label" คล้ายกับปุ่มองค์ประกอบปุ่มสไตล์ฉลากยังมีสีที่หลากหลายส่วนใหญ่ผ่านชื่อคลาสเหล่านี้เพื่อปรับเปลี่ยนสีพื้นหลังและสีข้อความ:
การเรนเดอร์มีดังนี้:
6. การต่อสู้ภาคปฏิบัติหก - ตรา
ป้ายส่วนใหญ่จะใช้เพื่อเตือนคุณว่าจำเป็นต้องใช้ข้อความที่ยังไม่ได้อ่านจำนวนเท่าใด ใน bootstrap สไตล์ "ตรา" ใช้เพื่อให้ได้เอฟเฟกต์ตรา
<!-Medal Navbar-Default Navigation Bar-> <div role = "การนำทาง"> <div> <a href = "##"> ชื่อเรื่อง </a> </v> <ul> <li> <a href = "##"> บ้าน </a> </li> <li> href = "##"> ฟอรัม <span> 10 </span> </a> </li> <li> <a href = "##"> คำติชม </a> </li> </ul> </div>
การเรนเดอร์มีดังนี้:
7. แนวปฏิบัติเจ็ด - กล่องป๊อปอัพที่ขับเคลื่อนการเปลี่ยนภาพเคลื่อนไหว
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> กล่องป๊อปอัพการเปลี่ยนภาพเคลื่อนไหว </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1. สไตล์-> <style> ร่างกาย {มาร์จิ้น: 30px; padding: 30px;} </style> </head> <body> <button type = "ปุ่ม"> คลิกฉัน </button> <div id = "mymodal"> <div> <div> <div> <h4> ชื่อเรื่องป๊อปอัพ </h4> </div> <div> <p> เนื้อหาของร่างกาย popt-up </p> </div> <div> <button type = "ปุ่ม" data-dismiss = "modal"> ปิด </duct> </div> </div> <! ในตอนท้ายของเอกสารเพื่อทำให้หน้าโหลดเร็วขึ้น-> <!-หากคุณต้องการใช้ปลั๊กอิน JS ของ bootstrap คุณต้องโทรหา jQuery ก่อน-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js" src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ ("btn") คลิก (ฟังก์ชั่น () {$ ("#mymodal") }); </script> </body> </html>การเรนเดอร์มีดังนี้:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
หากคุณยังต้องการเรียนรู้อย่างลึก