บทความนี้มีวิธีการใช้งานพื้นฐานของแถบการนำทาง bootstrap สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. bootstrap สไตล์การนำทางพื้นฐาน
แถบการนำทางส่วนใหญ่ทำในกรอบ bootstrap ผ่านสไตล์ ".nav" สไตล์ ".NAV" เริ่มต้นไม่ได้ให้สไตล์การนำทางเริ่มต้น รูปแบบอื่นจะต้องติดอยู่กับมันให้มีประสิทธิภาพเช่น "Nav-Tabs", "Nav-Pills" ฯลฯ ตัวอย่างเช่นมีตัวอย่างของแถบการนำทางแท็บในตัวแก้ไขรหัสทางด้านขวา วิธีการใช้งานของเขาคือการเพิ่มรูปแบบคลาสสองคลาสลงในแท็ก ul.nav และ nav-tabs
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
2. Bootstrap แถบการนำทางพื้นฐาน
เมื่อสร้างแถบการนำทางพื้นฐานส่วนใหญ่เกี่ยวข้องกับขั้นตอนต่อไปนี้:
ขั้นตอนที่ 1: ก่อนอื่นเพิ่มชื่อคลาส "Navbar-Nav" ตามรายการการนำทาง (<ul class = "NAV">)
ขั้นตอนที่ 2: เพิ่มคอนเทนเนอร์ (div) นอกรายการและใช้ชื่อคลาส "Navbar" และ "Navbar-Default"
ฟังก์ชั่นหลักของสไตล์ ".navbar" คือการตั้งค่าเอฟเฟกต์ของช่องว่างด้านซ้ายและขวาและมุมโค้งมน แต่สไตล์ที่เกี่ยวข้องกับสีไม่ได้ถูกกำหนดไว้ในทางใดทางหนึ่ง
<div role = "การนำทาง"> <ul> <li> <a href = "##"> หน้าแรก </a> </li> <li> <a href = "##"> ชุดของบทช่วยสอน </a> </li> <li> <a href = "##" <li> <a href = "##"> เกี่ยวกับเรา </a> </li></ul> </div>
3. เพิ่มชื่อไปยังแถบการนำทาง bootstrap
ในการผลิตหน้าเว็บมักจะมีชื่ออยู่ด้านหน้าของเมนู (ขนาดข้อความมีขนาดใหญ่กว่าข้อความอื่น ๆ เล็กน้อย) ในความเป็นจริงเฟรมเวิร์ก Bootstrap ได้ทำการพิจารณานี้สำหรับทุกคนซึ่งดำเนินการผ่าน "Navbar-Header" และ "Navbar-Brand"
<div role = "การนำทาง"> <div> <a href = "##"> แถบการนำทาง </a> </div> <ul> <li> <a href = "##"> โฮมเพจ </a> </li> <li> <a href = "##" <li> <a href = "##"> กรณีที่ประสบความสำเร็จ </a> </li> <li> <a href = "##"> เกี่ยวกับเรา </a> </li> </ul> </div>
4. เมนูรองของ Bootstrap
นอกจากนี้ยังง่ายมากที่จะเพิ่มเมนูรองลงในแถบการนำทาง
<div role = "การนำทาง"> <div> <a href = "##"> แถบการนำทาง </a> </div> <ul> <li> <a href = "##"> โฮมเพจ </a> </li> <li> <a href = "##"> data-toggle = href = "##"> css3 </a> </li> <li> <a href = "##"> JavaScript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> href = "##"> กรณีที่ประสบความสำเร็จ </a> </li> <li> <a href = "##"> เกี่ยวกับเรา </a> </li> </ul> </div>
5. แถบการนำทาง bootstrap พร้อมรูปแบบ
แถบการนำทางบางแห่งมีแบบฟอร์มการค้นหาและ "ฟอร์แมตนาวิกะ" มีให้ในกรอบ bootstrap วิธีการใช้งานง่ายมาก วางแบบฟอร์มด้วยชื่อคลาส Navbar-Form ในคอนเทนเนอร์ Navbar Navbar-Left” ช่วยให้แบบฟอร์มลอยไปทางซ้ายเพื่อให้ได้การจัดตำแหน่งที่ดีขึ้นในกรอบ bootstrap สไตล์ "Navbar-Right" ได้รับการจัดเตรียมเพื่อให้องค์ประกอบสามารถจัดตำแหน่งทางด้านขวาในแถบนำทางได้
<div role = "การนำทาง"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> โฮมเพจ </a> </li> <li> <a href = "##"> data-toggle = href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <li> href = "##"> บทนำเกี่ยวกับครูที่มีชื่อเสียง </a> </li> <li> <a href = "##"> กรณีที่ประสบความสำเร็จ </a> </li> <li> <a href = "##"> เกี่ยวกับเรา </a> </li> type = "ส่ง"> ค้นหา </button> </form> </div>
6. ปุ่มข้อความและลิงก์ในแถบการนำทาง bootstrap
นอกเหนือจากการใช้องค์ประกอบ A ใน Navbar-Brand และ UL และ Navbar-Form ของ Navbar-Nav แล้วองค์ประกอบอื่น ๆ สามารถใช้ในแถบการนำทางของเฟรมเวิร์ก bootstrap เฟรมเวิร์กให้สามสไตล์อื่น ๆ :
1). ปุ่มในแถบนำทาง NAVBAR-BTN
2). ข้อความในแถบนำทาง Navbar
3) .navbar-link ในแถบการนำทาง
อย่างไรก็ตามรูปแบบทั้งสามนี้อยู่ภายใต้ข้อ จำกัด บางประการเมื่อใช้ในกรอบและจำเป็นต้องใช้ร่วมกับ Navbar-Brand และ Navbar-Nav นอกจากนี้ยังมีข้อ จำกัด บางประการเกี่ยวกับปริมาณ โดยทั่วไปจะไม่มีปัญหาเมื่อใช้หนึ่งหรือสองและจะมีปัญหาถ้าเกินสอง
<div role = "การนำทาง"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> ข้อความ navbar </a> </li> <li> <a href = "##" <li> <a href = "##"> ข้อความ navbar </a> </li></ul> </div> <div role = "การนำทาง"> <div> <a href = "##"> bootstrap </a> </div> <div> <a href = "##" href = "##"> ข้อความ navbar </a> </div> </div>
7. Bootstrap แถบการนำทางคงที่
ในหลาย ๆ กรณีนักออกแบบต้องการให้แถบการนำทางได้รับการแก้ไขที่ด้านบนหรือด้านล่างของเบราว์เซอร์และการใช้งานแถบการนำทางคงที่นี้เป็นเรื่องธรรมดามากขึ้นในการพัฒนามือถือ เฟรมเวิร์ก Bootstrap มีสองวิธีในการแก้ไขแถบการนำทาง:
.navbar-fixed-top: แถบการนำทางได้รับการแก้ไขที่ด้านบนของหน้าต่างเบราว์เซอร์
.navbar-fixed-bottom: แถบการนำทางได้รับการแก้ไขที่ด้านล่างของหน้าต่างเบราว์เซอร์
<div role = "การนำทาง"> … </div> <div> ฉันเป็นเนื้อหา </div> <div role = "การนำทาง"> … </div>
8. การนำทาง Bootstrap Pagination
การนำไปสู่การแบ่งหน้าหมายเลขหน้าอาจเป็นการนำทางการแบ่งหน้าบ่อยที่สุดโดยเฉพาะอย่างยิ่งเมื่อมีเนื้อหาจำนวนมากในหน้ารายการมันจะช่วยให้ผู้ใช้มีวิธีการนำทางพลเมือง โดยปกติแล้วนักเรียนหลายคนชอบใช้ div> a และ div> span โครงสร้างเพื่อสร้างการนำทางเพจ อย่างไรก็ตามในเฟรมเวิร์ก bootstrap โครงสร้างเช่น ul> li> a ถูกใช้และวิธีการแบ่งหน้าจะถูกเพิ่มลงในแท็ก UL
<ul> <li> <a href = "#"> « </a> </li> <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"> 2 </a> </li> <li> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »» </a> </li></ul>
ในเฟรมเวิร์ก Bootstrap คุณยังสามารถตั้งค่าขนาดปุ่ม PAGINATION ในหลายสถานการณ์
1). ทำให้การนำทางพลเมืองใหญ่ขึ้นผ่าน "pagination-lg";
2). ทำให้การนำทางพลเมืองเล็กลงผ่าน "Pagination-SM"
<ul> … </ul><ul> … </ul> <ul> … </ul> <ul> … </ul>
นอกเหนือจากการให้บริการนำหน้าหน้าหมายเลขแล้วเฟรมเวิร์ก Bootstrap ยังมีการนำทางกลับมา การนำทางปนเปื้อนประเภทนี้มักจะเห็นได้ในเว็บไซต์ง่าย ๆ บางแห่งเช่นบล็อกส่วนตัวเว็บไซต์นิตยสาร ฯลฯ การนำทางของการจัดบรรยากาศแบบนี้ไม่เห็นหมายเลขหน้าเฉพาะและมีปุ่ม "หน้าก่อนหน้า" และ "หน้าถัดไป" เท่านั้น
ในการใช้งานจริงการนำทางการพลิกคว่ำหน้าจะคล้ายกับการนำทางการแบ่งหน้าแบบรหัสหน้าเพิ่มคลาสเพจเจอร์ลงในแท็ก UL
<ul> <li> <a href = "#"> «หน้าก่อนหน้า </a> </li> <li> <a href = "#"> หน้าถัดไป» </a> </li></ul>
โดยค่าเริ่มต้นการนำทางเพจเพจเพจหน้าจะปรากฏขึ้นในศูนย์ แต่บางครั้งเราต้องการหนึ่งที่จะอยู่ทางซ้ายและอื่น ๆ ไปทางขวา Bootstrap Framework มีสองสไตล์
ก่อนหน้า: ปล่อยให้ปุ่ม "ก่อนหน้า" เหลืออยู่
ถัดไป: ให้ปุ่ม "ถัดไป" ทางด้านขวา
<ul> <li> <a href = "#"> «หน้าก่อนหน้า </a> </li> <li> <a href = "#"> หน้าถัดไป» </a> </li></ul>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับแถบการนำทาง bootstrap ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน