ในเฟรมเวิร์ก Bootstrap การนำทางเป็นอิสระเป็นองค์ประกอบการนำทาง ตามเวอร์ชันที่แตกต่างกันซอร์สโค้ดที่สอดคล้องกันสามารถพบได้:
น้อยกว่า: navs.less
sass: _navs.scss
การนำทางรูปแท็กหรือที่เรียกว่าการนำทางแท็บ
การนำทางรูปแท็กจะถูกนำไปใช้ผ่านสไตล์. nav-tabs เมื่อสร้างการนำทางรูปแท็กคุณจะต้องต่อท้ายชื่อคลาส. nav-tabs ไปยังคอนเทนเนอร์ด้วยชื่อคลาสการนำทางดั้งเดิม. NAV
<ul> <li> <a href = "#"> ชื่อการนำทาง 1 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 2 </a> </li> <li> <a href = "#"> ชื่อการนำทาง </a> </li> <li> ชื่อ 5 </a> </li> </ul>
หลักการ:
แสดงรายการเมนู li ในบล็อกและจัดเรียงในระดับเดียวกันจากนั้นกำหนดรูปแบบและเอฟเฟกต์การระงับของเมาส์ของเมนูที่ไม่สูง
.NAV-TABS {ขอบด้านล่าง: 1PX SOLID #DDD;}. NAV-TABS> LI {Float: ซ้าย; margin-bottom: -1px;}. nav-tabs> li> a {margin-right: 2px; line-height: 1.42857143; Li> A: Hover {Border-Color: #EEE #EEE #DDD;}โดยทั่วไปแท็บจะมีรายการที่เลือกในปัจจุบันคุณจะต้องเพิ่มชื่อคลาสเท่านั้นที่ใช้งานไปยังแท็ก (LI)
<ul> <li> <a href = "#"> ชื่อการนำทาง 1 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 2 </a> </li> <li> <a href = "#"> ชื่อการนำทาง </a> </li> <li> ชื่อ 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: โฟกัส {color: #555; เคอร์เซอร์: ค่าเริ่มต้น; พื้นหลังสี: #FFF; ชายแดน: 1px Solid #DDD; เส้นขอบล่างสี: โปร่งใส;}นอกเหนือจากตัวเลือกปัจจุบันแท็บบางตัวยังมีสถานะปิดใช้งาน เพื่อให้ได้เอฟเฟกต์นี้เพียงเพิ่มชื่อคลาสที่ปิดใช้งานในรายการแท็ก
.nav> li.disabled> a {color: #999;}. nav> li.disabled> a: hover, .nav> li.disabled> a: โฟกัส {color: #999; การตกแต่งข้อความ: ไม่มี; เคอร์เซอร์: ไม่ได้รับอนุญาต; พื้นหลังสี: โปร่งใส;}หากคุณต้องการให้ได้ผลของการคลิกที่รายการเมนูเพื่อสลับเนื้อหาคุณต้องร่วมมือกับปลั๊กอิน JS
การนำทางแคปซูล (ยา)
ขณะนี้เน้นด้วยเอฟเฟกต์มุมโค้งมนวิธีการใช้งานคล้ายกับการนำทาง TAB และด้วยโครงสร้างเดียวกันคุณเพียงแค่ต้องแทนที่ชื่อคลาส. NAV-TABS ด้วยชื่อคลาส. NAV-Pills
.nav-pills> li {float: left;}. nav-pills> li> a {border-radius: 4px;}. nav-pills> li + li {margin-left: 2px;}. nav-pills> li.active> a: hover, .nav-pills> li. พื้นหลังสี: #428BCA;}การนำทางแบบเรียงซ้อนแนวตั้ง
นอกเหนือจากการนำทางแนวนอนแล้วยังมีการนำทางในแนวตั้ง ในการสร้างการนำทางแบบเรียงซ้อนในแนวตั้งคุณจะต้องเพิ่มชื่อคลาส. NAV จัดเรียงบนพื้นฐานของ. nav-pills
เมื่อเปรียบเทียบกับการนำทางแคปซูลสิ่งสำคัญคือการป้องกันไม่ให้รายการนำทางจากการลอยเพื่อจัดเรียงในแนวตั้งแล้วปล่อยให้ระยะห่างที่แน่นอนสำหรับรายการนำทางที่อยู่ติดกัน
.nav-stacked> li {float: none;}. nav-stacked> li + li {margin-top: 2px; Margin-Left: 0;} <ul> <li> <a href = "#"> ชื่อการนำทาง 0 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 1 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 2 </a> href = "#"> ชื่อการนำทาง 4 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 5 </a> </li></ul>การนำทางการจัดเรียงแนวตั้งเป็นเหมือนเส้นแบ่งระหว่างกลุ่มเมนูแบบเลื่อนลงและกลุ่มและยังมีเส้นแบ่งระหว่างรายการการนำทาง เพียงเพิ่ม <li class = "Divider"> </li> ระหว่างรายการการนำทาง
<ul> <li> <a href = "#"> ชื่อการนำทาง 0 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 1 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 2 </a> </li> href = "#"> ชื่อการนำทาง 4 </a> </li> <li> <a href = "#"> ชื่อการนำทาง 5 </a> </li></ul>
.nav .nav-divider {ความสูง: 1px; มาร์จิ้น: 9px 0; โอเวอร์โฟลว์: ซ่อน; พื้นหลังสี: #e5e5e5;}การนำทางแบบปรับตัว
การนำทางแบบปรับได้หมายถึงการนำทางที่ครอบครองความกว้างทั้งหมดของภาชนะและรายการเมนูสามารถปรับให้เข้ากับความกว้างของเซลล์ตาราง การนำทางแบบปรับตัวนั้นเหมือนกับส่วนประกอบปุ่มปรับตัวที่ทำโดย. BTN-Group-justified ที่กล่าวถึงก่อนหน้านี้ แต่เมื่อทำการปรับเปลี่ยนการนำทางต้องใช้ชื่อคลาส.
หลักการ:
ตั้งค่าความกว้างเป็น 100% ในรายการ UL จากนั้นตั้งค่าการแสดงผล: ตารางตารางสำหรับแต่ละรายการเมนู LI เพื่อให้รายการจำลองรูปแบบของเซลล์ตาราง
.nav-justified {width: 100%;}. nav-justified> li {float: none;}. nav-justified> li> a {margin-bottom: 5px; TEXT-ALIGN: CENTER;}. NAV-Justified> .DropDown .DropDown-Menu {Top: Auto; ซ้าย: auto;}@media (min-width: 768px) {.nav-justified> li {display: table-cell; ความกว้าง: 1%; } .nav-Justified> li> a {margin-bottom: 0; -มีเงื่อนไขการสืบค้นสื่อด้านบน: @media (Min-Width: 768px) {... } หมายความว่าการนำทางแบบปรับตัวสามารถแสดงได้ในรูปแบบด้านบนหากความกว้างของหน้าต่างเบราว์เซอร์มากกว่า 768px แต่เมื่อความกว้างของหน้าต่างเบราว์เซอร์น้อยกว่า 768px
.NAV-TABS และ .NAV-justified ใช้ร่วมกันซึ่งหมายถึงการนำทางแท็บแบบปรับตัว เมื่อความกว้างของหน้าต่างเบราว์เซอร์น้อยกว่า 768px การประมวลผลเพิ่มเติมจะทำในสไตล์
.nav-tabs.nav-justified {width: 100%; ชายแดนด้านล่าง: 0;}. nav-tabs.nav-justified> li {float: none;}. nav-tabs.nav-justified> li> a {margin-bottom: 5px; TEXT-ALIGN: CENTER;}. NAV-tabs.nav-justified> .dropdown .Dropdown-Menu {Top: Auto; ซ้าย: auto;}@media (min-width: 768px) {.nav-tabs.nav-justified> li {display: table-cell; ความกว้าง: .active> a: hover, .nav-tabs.nav-justified> .active> a: hover, .nav-tabs.nav-justified> .active> a: โฟกัส {border: 1px solid #ddd;}@media (min-width: 768px) แนวชายแดน: 4px 4px 0 0; } .nav-tabs.nav-justified> .active> a, .nav-tabs.nav-justified> .active> a: hover, .nav-tabs.nav-justified> .active> a: โฟกัส -เมนูการนำทางรวมทั้งเมนูแบบเลื่อนลง (การนำทางรอง)
ในการสร้างการนำทางรองคุณจะต้องใช้ LI เป็นคอนเทนเนอร์หลักให้ใช้ชื่อคลาส Dropdown และทำรายการ UL อื่นใน LI
<ul> <li> <a href = "#"> เมนูการนำทาง 1 </a> </li> <li> <a href = "#"> เมนูการนำทาง 2 </a> </li> <li> <a href = "#"> การนำทาง </a> </li> <li> เมนู 4 </a> </li> <li> <adata-toggle = "Dropdown"> การนำทางเมนู 5 </span> </a> <ul> <li> <a href = "#"> เมนูแบบเลื่อนลง 1 </a> </li> <li> เมนู 3 </a> </li> <li> <a href = "#"> เมนูแบบเลื่อนลง 4 </a> </li> </li> </li> <li> <a href = "#"> เมนูการนำทาง 6 </a> </li></ul>
การนำทาง breadcrumb
โดยทั่วไปแล้ว Breadcrumbs ใช้สำหรับการนำทางและฟังก์ชั่นหลักของพวกเขาคือการบอกผู้ใช้ถึงตำแหน่งปัจจุบันของหน้า Breadcrumbs ยังเป็นองค์ประกอบโมดูลอิสระในเฟรมเวิร์กบูต
น้อยกว่า: breadcrumbs.less
sass: _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> หนังสือของฉัน </a> </li> <li> ภาพประกอบ CSS </li> </ol>
.BreadCrumb {Padding: 8px 15px; มาร์จิ้น-กอตทอม: 20px; รายการสไตล์: ไม่มี; พื้นหลัง-สี: #f5f5f5; ชายแดน-radius: 4px;}. breadcrumb> li {แสดง: inline-block;}. breadcrumb> li + li: ก่อน "// 00a0";}. breadcrumb> .active {color: #999;}ข้างต้นใช้ Li+Li: ก่อนที่จะใช้ตัวคั่นระหว่าง Li และ Li โซลูชันนี้ไม่ได้รับการสนับสนุนใน IE รุ่นล่าง
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน