แถบการนำทาง (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. แถบการนำทางที่ตอบสนองสามประการ
<div role = "การนำทาง"> <div> <!-.navbar-toggle สไตล์ใช้กับเนื้อหาที่หดตัวสลับนั่นคือองค์ประกอบที่รูปแบบการล่มสลายของนาวิกโยธินการล่มสลาย-> <button type = "button" data-toggle = "span> </span> </</spans <!-ตรวจสอบให้แน่ใจว่าแบรนด์ Navbar จะปรากฏขึ้นในหน้าจอที่กว้างและแคบ-> <a href = "##"> ชื่อเรื่อง </a> </div> <!-เมื่อความกว้างของหน้าจอน้อยกว่า 768px เนื้อหาใน div.navbar-responsive-collapse จะถูกซ่อนไว้ เมื่อคลิกไอคอนไอคอนบาร์ให้ขยายอีกครั้ง เมื่อหน้าจอมีขนาดใหญ่กว่า 768px มันจะปรากฏขึ้นตามค่าเริ่มต้น -> <div> <ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> บล็อก </a> </li> <li> <a href = "##"> ฟอรัม </a> </li>
การเรนเดอร์มีดังนี้:
บางครั้งมีความจำเป็นที่จะต้องกลับสี 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>
การเรนเดอร์มีดังนี้:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น