เมนูแบบดึงลง
คำแถลงพิเศษ: เนื่องจากเอฟเฟกต์การโต้ตอบของส่วนประกอบของ Bootstrap นั้นขึ้นอยู่กับปลั๊กอินที่เขียนโดย JQuery Library คุณต้องโหลด jQuery.min.js ก่อนที่จะใช้ bootstrap.min.js เพื่อสร้างเอฟเฟกต์
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนู href = "#"> รายการเมนูแบบเลื่อนลง </a> </li></ul> </div> <!-jQuery จะต้องนำเข้าก่อน bootstrap หลังจะถูกนำไปใช้บนพื้นฐานของอดีต-> <script src = "http://libs.baidu.com/jquery/1.9.0/js src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
ภาพการทำซ้ำ:
หลักการดำเนินการ:
ในตอนแรกมีการแสดงผล: ไม่มีในชั้นเรียน; ดู CSS ด้านล่าง
.dropdown-Menu {ตำแหน่ง: Absolute;/*ตั้งค่าตำแหน่งสัมบูรณ์เทียบกับองค์ประกอบหลัก div.dropdown*/top: 100%;/*ให้รายการเมนูแบบเลื่อนลงที่ด้านล่างของรายการเมนูหลัก หากองค์ประกอบหลักไม่ได้ตั้งค่าตำแหน่งสัมพัทธ์องค์ประกอบจะสัมพันธ์กับองค์ประกอบของร่างกาย*/ซ้าย: 0; z-index: 1000;/*ตั้งค่าเมนูดรอปดาวน์รายการที่ไม่ได้รับการคุ้มครองโดยองค์ประกอบอื่น ๆ*/จอแสดงผล: ไม่มี; ไม่มี; พื้นหลัง-สี: #FFF; พื้นหลังคลิป: padding-box; ชายแดน: 1px solid #ccc; border: 1px solid rgba (0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px RGBA (0, 0, 0, 0, 175); 0, .175);}จากนั้นใช้เหตุการณ์คลิกเพื่อควบคุมการลบและการเพิ่มคลาสแท็กเพื่อให้ได้จอแสดงผลและซ่อน
ผ่านเทคโนโลยี JS ให้เพิ่มหรือลบชื่อคลาส "เปิด" ไปยังคอนเทนเนอร์หลัก "div.dropdown" เพื่อควบคุมการแสดงผลหรือซ่อนเมนูแบบเลื่อนลง นั่นคือโดยค่าเริ่มต้น
"div.dropdown" ไม่มีชื่อคลาส "เปิด" เมื่อผู้ใช้คลิกเป็นครั้งแรกชื่อคลาส "เปิด" จะถูกเพิ่มลงในชื่อคลาส "เปิด"; เมื่อผู้ใช้คลิกอีกครั้งชื่อคลาส "เปิด" ในคอนเทนเนอร์ "Div.DropDown" จะถูกลบอีกครั้ง เราสามารถดูกระบวนการทั้งหมดผ่าน Firebug ของเบราว์เซอร์:
ค่าเริ่มต้น:
ผู้ใช้คลิกเป็นครั้งแรก:
ผู้ใช้คลิกอีกครั้ง:
เปิด CSS
.Open> .DropDown-Menu {display: block;}ดึงเมนูแยกสายลง
มาดูตัวอย่างข้างต้นแล้ววางรหัส! ดูเอฟเฟกต์คุณยังต้องแนะนำไฟล์ JS! หลังจากนั้นมีไม่มาก!
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li></ul> </div>
ภาพการทำซ้ำ:
จริงๆแล้วมีรหัสอีกหนึ่งบรรทัด
<li role = "การนำเสนอ"> </li>
ชื่อเมนูเมนูแบบเลื่อนลง
อัปโหลดรหัสโดยตรง
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> role = "การนำเสนอ"> </li> <li role = "การนำเสนอ"> ส่วนหัวเมนูส่วนที่ 2 </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูลดลง </a> </li> รายการ </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> </ul> </div>
ภาพการทำซ้ำ:
ในความเป็นจริงมีเพียงหนึ่งรหัสที่เพิ่ม:
<li role = "การนำเสนอ"> ส่วนหัวเมนูส่วนที่ 2 </li>
การจัดตำแหน่งเมนูแบบดึงลง
<H4> ใช้คลาสแบบดึงขวาเพื่อจัดเรียงเมนูแบบเลื่อนลงกับด้านขวาของคอนเทนเนอร์พาเรนต์ </h4> <div style = "float: ซ้าย;"> <button type = "ปุ่ม" id = "detdownmenu1" data-toggle = "dropdown">
เมนูแบบดึงลง
<span> </span> </button> <ul role = "เมนู" aria-labelledby = "dropdownmenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง " รายการ </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบหล่นลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบหล่นลง </a> </li></ul> </div> <br/> <br/> <h4> ใช้คลาส Dropdown-Menu-Right id = "dropdownMenu1" data-toggle = "dropdown">
เมนูแบบดึงลง
<span> </span> </button> <ul role = "เมนู" aria-labelledby = "dropdownmenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง " รายการ </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบหล่นลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบหล่นลง </a> </li></ul> </div> <br/> <br/> <h4> เมนูแบบเลื่อนลง "ลงไป" data-toggle = "dropdown">
เมนูแบบดึงลง
<span> </span> </button> <ul role = "เมนู" aria-labelledby = "dropdownmenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง " รายการ </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบหล่นลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li></ul> </div>
ที่จริงแล้วเพิ่มชื่อคลาสคลาส "แบบเลื่อนลง" หรือ "Dropdown-Menu-Right" ใน "Dropdown-Menu" ซึ่งรหัสสไตล์ของ CSS
.DropDown-Menu.pull-Right {ขวา: 0; ซ้าย: auto;}. dropdown-menu-right {ขวา: 0; ซ้าย: auto;}เมนูแบบเลื่อนลง (สถานะรายการเมนู)
สถานะเริ่มต้นของรายการเมนูแบบเลื่อนลง (ไม่มีการตั้งค่า) มีสถานะระงับ (: โฮเวอร์) และสถานะโฟกัส (: โฟกัส)
นอกเหนือจากสองสถานะข้างต้นรายการเมนูแบบเลื่อนลงยังมีสถานะปัจจุบัน (.active) และสถานะปิดใช้งาน (.disabled)
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </ปุ่ม> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> <a role = "menuitem" role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li></ul> </div>
วางเมาส์ไว้และเครื่องหมายต้องห้ามจะปรากฏบนตัวปิดใช้งาน ไม่สามารถแทรกภาพหน้าจอ!
ปุ่ม (กลุ่มปุ่ม)
การใช้ปุ่มเดี่ยวในหน้าเว็บบางครั้งไม่ตรงกับความต้องการทางธุรกิจของเรา เรามักจะเห็นปุ่มหลายปุ่มรวมกันเช่นชุดของปุ่มไอคอนขนาดเล็กในตัวแก้ไขข้อความที่หลากหลาย
<div> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button type = "ปุ่ม"> <span> </span> </button> <button type = "ปุ่ม"> <span> </span> </button> <button type = "span> <pan> </pan> type = "ปุ่ม"> <span> </span> </button> <button> <button type = "ปุ่ม"> <span> </span> </button> <button> <button type = "ปุ่ม"> <span> </pan> </pution> <button> <button type = "ปุ่ม" type = "button"> <span> </span> </button> <button type = "ปุ่ม"> <span> </span> </pution> </div>
ภาพการทำซ้ำ:
ที่นี่คุณสามารถสร้างปุ่มไอคอนที่แตกต่างกันตามไอคอนที่แตกต่างกัน! คุณสามารถดูได้ที่เว็บไซต์นี้: http://getbootstrap.com/components/#glyphicons
ปุ่ม (แถบเครื่องมือปุ่ม)
ในตัวแก้ไขข้อความที่หลากหลายกลุ่มปุ่มกลุ่มเข้าด้วยกันเช่นคัดลอกตัดและวางกลุ่ม แนวซ้าย-แนวกลาง, แนวขวาและแนวตั้งแนว A ตามที่แสดงในรูปด้านล่าง:
จากนั้นแถบเครื่องมือปุ่มเฟรม bootstrap ยังให้วิธีการทำเช่นนั้น คุณจะต้องใส่กลุ่มปุ่ม "BTN-Group" ในกลุ่มในภาชนะขนาดใหญ่ "BTN-Toolbar" ดังที่แสดงด้านล่าง:
<div> <div> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button type = "ปุ่ม"> <span> </pan> type = "button"> <span> </span> </button> </div> <div> <button type = "ปุ่ม"> <span> </span> </pution> </div> </div> <div> <button type = "ปุ่ม"> <span> </span> type = "button"> <span> </span> </button> <button> </button> <ปุ่ม> <ปุ่มประเภท = "ปุ่ม"> <span> </pan> </button> <button type = "ปุ่ม"> <span> </span>
ภาพการทำซ้ำ:
ไอคอนชุดที่สองในรูปจะถูกเพิ่มด้วยคลาส:
BTN-Group-LG: กลุ่มปุ่มขนาดใหญ่
BTN-Group-SM: กลุ่มปุ่มเล็ก ๆ
BTN-Group-XS: กลุ่มปุ่มพิเศษขนาดเล็ก
เพียงเพิ่มชื่อคลาสที่สอดคล้องกันในชื่อคลาส ".BTN-Group" เพื่อรับกลุ่มปุ่มที่มีขนาดต่างกัน
ปุ่ม (การจัดกลุ่มซ้อน)
หลายครั้งที่เรามักจะจัดเมนูแบบเลื่อนลงและกลุ่มปุ่มธรรมดาเพื่อให้ได้เอฟเฟกต์คล้ายกับเมนูการนำทาง
เมื่อใช้งานคุณจะต้องเปลี่ยนคอนเทนเนอร์ที่ทำ "ดรอปดาวน์" ที่สร้างเมนูแบบเลื่อนลงด้วย "BTN-group" และวางไว้ในระดับเดียวกับปุ่มธรรมดา
<div> <button type = "ปุ่ม"> home </button> <button type = "ปุ่ม"> การแสดงผลผลิตภัณฑ์ </putions> <button type = "ปุ่ม"> การวิเคราะห์ตัวพิมพ์ใหญ่ </button> <button type = "ปุ่ม"> ติดต่อเรา </button> <div> <button data-toggle = "dropdown" type = "ปุ่ม"> โปรไฟล์ </a> </li> <li> <a href = "##"> วัฒนธรรมองค์กร </a> </li> <li> <a href = "##"> โครงสร้างองค์กร </a> </li> <li> <a href = "##"> บริการลูกค้า </a> </li>
ภาพการทำซ้ำ:
ปุ่ม (การจัดกลุ่มแนวตั้ง)
ในตัวอย่างที่เห็นก่อนหน้านี้กลุ่มปุ่มจะแสดงในแนวนอน แต่ในการใช้งานจริงเอฟเฟกต์การแสดงผลในแนวตั้งจะพบได้เสมอ สไตล์นี้ยังมีอยู่ในกรอบ Bootstrap เราเพียงแค่ต้องเปลี่ยนชื่อคลาส "BTN-Group" ของการจัดกลุ่มแนวนอนเป็น "BTN-Group-Vertical"
<div> <button type = "ปุ่ม"> home </button> <button type = "ปุ่ม"> การแสดงผลผลิตภัณฑ์ </putions> <button type = "ปุ่ม"> การวิเคราะห์ตัวพิมพ์ใหญ่ </button> <button type = "ปุ่ม"> ติดต่อเรา </button> <div> <button data-toggle = "dropdown" type = "ปุ่ม"> โปรไฟล์ </a> </li> <li> <a href = "##"> วัฒนธรรมองค์กร </a> </li> <li> <a href = "##"> โครงสร้างองค์กร </a> </li> <li> <a href = "##"> บริการลูกค้า </a> </li>
ภาพการทำซ้ำ:
ปุ่ม (ปุ่มเท่ากัน)
ผลกระทบของปุ่มเซ็กเมนต์ที่เท่ากันนั้นใช้ได้จริงโดยเฉพาะอย่างยิ่งในขั้วมือถือ ความกว้างของกลุ่มปุ่มทั้งหมดคือ 100% ของคอนเทนเนอร์และแต่ละปุ่มในกลุ่มปุ่มแบ่งความกว้างของคอนเทนเนอร์ทั้งหมด ตัวอย่างเช่นหากคุณมีปุ่มห้าปุ่มในกลุ่มปุ่มแต่ละปุ่มจะมีความกว้าง 20% หากมีสี่ปุ่มแต่ละปุ่มจะมีความกว้าง 25% และอื่น ๆ
ปุ่มการทำให้เท่าเทียมกันมักจะเรียกว่าปุ่มการจัดกลุ่มแบบปรับตัว วิธีการใช้งานก็ง่ายมาก คุณจะต้องเพิ่มชื่อคลาส "BTN-group-justified" ในกลุ่มปุ่ม "BTN-Group" ดังที่แสดงด้านล่าง:
<div> <div> <a href = "#"> home </a> <a href = "#"> การแสดงผลผลิตภัณฑ์ </a> <a href = "#"> การวิเคราะห์กรณี </a> <a href = "#"> ติดต่อเรา </a> </div> </div>
เปลี่ยนความกว้างของหน้าจอ
คำแถลงพิเศษ: เมื่อสร้างกลุ่มปุ่ม Aliquot โปรดลองใช้องค์ประกอบแท็ก <a> เพื่อสร้างปุ่มเพราะเมื่อใช้องค์ประกอบแท็ก <ปุ่ม> โดยใช้การแสดงผล: ตารางไม่เป็นมิตรที่จะรองรับในเบราว์เซอร์บางตัว
สามเหลี่ยมขึ้นด้านบนของปุ่ม
สามเหลี่ยมล่างของปุ่มเราเพิ่มองค์ประกอบ "" ฉลากลงในฉลากและตั้งชื่อ "caret":
บางครั้งเมนูแบบเลื่อนลงของเราจะปรากฏขึ้น (ส่วนถัดไปจะแนะนำ) ในเวลานี้ทิศทางสามเหลี่ยมของเราจะต้องแสดงขึ้นด้านบน วิธีการใช้งาน: คุณต้องเพิ่มชื่อคลาส "Dropup" ลงในคลาส ".BTN-Group" (นี่คือชื่อคลาสที่ใช้สำหรับเมนูดรอปดาวน์ป๊อปอัพแบบป๊อปอัพขึ้น)
<div> <button data-toggle = "dropdown" type = "ปุ่ม"> เมนูแบบเลื่อนลงปุ่ม <pan> </span> </ปุ่ม> <ul> <li> <a href = "##"> รายการเมนูดรอปดาวน์ปุ่ม </a> </li> <li> <a href = "##" รายการ </a> </li> </ul> </div>
ภาพการทำซ้ำ:
การนำทาง (สไตล์พื้นฐาน)
การนำทางไม่ใช่คนแปลกหน้าสำหรับคนส่วนหน้า อาจกล่าวได้ว่าการนำทางเป็นหนึ่งในองค์ประกอบที่สำคัญของเว็บไซต์ซึ่งสามารถอำนวยความสะดวกให้ผู้ใช้ค้นหาบริการการทำงานที่หลากหลายที่จัดทำโดยเว็บไซต์ วิธีการนำทางยังมีความหลากหลายและหลากหลาย
แถบการนำทางส่วนใหญ่ทำในกรอบ 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>
การนำทาง (การนำทางแท็บรูปแท็ก)
การนำทางรูปแท็กหรือที่เรียกว่าการนำทาง TAB โดยเฉพาะอย่างยิ่งเมื่อมีการแสดงเนื้อหาจำนวนมากในชิ้นส่วนมันเหมาะมากที่จะใช้แท็บนี้เพื่อจัดกลุ่มพวกเขา
การนำทางรูปแท็กถูกนำไปใช้ผ่านสไตล์ "Nav-Tabs" เมื่อสร้างการนำทางรูปแท็กคุณต้องเพิ่มชื่อประเภทนี้ในการนำทางดั้งเดิม "NAV"
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ในความเป็นจริงผลกระทบของตัวอย่างข้างต้นไม่สอดคล้องกับเอฟเฟกต์แท็บที่เรามักจะเห็น โดยทั่วไปแท็บสอนการเลือกในปัจจุบัน ในความเป็นจริงเฟรมเวิร์ก Bootstrap นั้นมีให้เช่นกัน สมมติว่าเราต้องการให้รายการ "home" เป็นรายการที่เลือกในปัจจุบันเพียงเพิ่มชื่อคลาส "class =" active "" ลงในแท็กของมัน
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
นอกเหนือจากรายการปัจจุบันแท็บบางตัวยังมีสถานะปิดใช้งาน เพื่อให้ได้เอฟเฟกต์นี้คุณจะต้องเพิ่ม "class =" ปิดใช้งาน "" ลงในรายการแท็ก:
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
การนำทาง (ยา) การนำทาง)
การนำทางแคปซูล (ยา) นำทางฟังดูน่าอึดอัดใจเล็กน้อยเพราะมันดูเหมือนรูปร่างแคปซูล แต่มันก็เหมือนกับการนำทางจำนวนมากที่เรามักจะเห็น รายการปัจจุบันถูกเน้นด้วยเอฟเฟกต์มุมโค้งมน วิธีการใช้งานคล้ายกับ "NAV-TABS" ด้วยโครงสร้างเดียวกันคุณจะต้องแทนที่ชื่อคลาส "Nav-Tabs" ด้วย "Nav-Pills":
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
เช่นเดียวกับที่กล่าวไว้ข้างต้น!
การนำทาง (การนำทางแนวตั้งซ้อน)
ในการใช้งานจริงนอกเหนือจากการนำทางแนวนอนแล้วยังมีการนำทางแนวตั้งเช่นเดียวกับปุ่มจัดเรียงแนวตั้งที่แนะนำก่อนหน้านี้ ในการสร้างการนำทางสแต็กแนวตั้งคุณจะต้องเพิ่มชื่อคลาส "Nav-Stacked" ตาม "Nav-Pills"
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
ในส่วนเมนูแบบเลื่อนลงมีตัวแบ่งระหว่างกลุ่มเมนูแบบเลื่อนลงและกลุ่ม ในความเป็นจริงการนำทางสแต็คแนวตั้งยังมีเอฟเฟกต์นี้คุณจะต้องเพิ่มเท่านั้น "
" แค่:
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
การนำทางแบบปรับตัว (ใช้)
การนำทางแบบปรับได้หมายถึงการนำทางที่ครอบครองความกว้างทั้งหมดของภาชนะและรายการเมนูสามารถปรับให้เข้ากับความกว้างเช่นเซลล์ของตาราง การนำทางแบบปรับตัวนั้นเหมือนกับกลุ่มปุ่มปรับตัวที่ทำโดยใช้ "BTN-Group-justified" เป็นเพียงว่าเมื่อทำการปรับเปลี่ยนการนำทางอีกระดับหนึ่ง "Nav-Justified" แน่นอนว่าเขาต้องใช้กับ "Nav-Tabs" หรือ "Nav-Pills" ชอบ:
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> href = "##"> ตอบสนอง </a> </li></ul>
ภาพการทำซ้ำ:
นี่คือหน้าจอที่แตกต่างกัน
เมนูการนำทางรวมทั้งเมนูแบบเลื่อนลง (การนำทางรอง)
ตัวอย่างก่อนหน้านี้เกี่ยวกับการใช้เฟรมเวิร์ก Bootstrap เพื่อสร้างการนำทางระดับแรก แต่ในหลายกรณีผลกระทบของการนำทางระดับที่สองแยกออกจากหน้าเว็บ จากนั้นจะง่ายกว่าที่จะทำการนำทางรองในเฟรมเวิร์ก Bootstrap เพียงแค่ถือว่า LI เป็นคอนเทนเนอร์หลักให้ใช้ชื่อคลาส "Dropdown" และทำรังรายการอื่นใน LI และใช้วิธีการที่แนะนำในเมนูดรอปดาวน์ก่อนหน้านี้:
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##" data-toggle = "dropdown"> การสอน <pan> </span> </a> <ul> <li> <a href = "##"> css3 </li> href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> ตอบสนอง </a> </li> </li>
ภาพการทำซ้ำ:
ผ่านเครื่องมือการดีบักเบราว์เซอร์มันไม่ยากที่จะพบว่าโดยการคลิกที่รายการเมนูด้วยการนำทางรองชื่อคลาส "เปิด" จะถูกเพิ่มโดยอัตโนมัติ การคลิกอีกครั้งจะลบชื่อคลาส "เปิด" ที่เพิ่มเข้ามาและหลักการการใช้งานของเมนูแบบเลื่อนลงเหมือนกัน!
จากนั้นเมื่อใช้บรรทัดการหารในการนำทางรองคุณจะต้องเพิ่มแท็กที่ว่างเปล่าเช่น "<li class =" NAVIDER "> </li>"
การนำทาง breadcrumb
โดยทั่วไปแล้ว Breadcrumbs ใช้สำหรับการนำทางและฟังก์ชั่นหลักของพวกเขาคือการบอกผู้ใช้ถึงตำแหน่งปัจจุบันของหน้า (ตำแหน่งปัจจุบัน)
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> หนังสือของฉัน </a> </li> <li> "ภาพประกอบ css3" </li> </ol>
ภาพการทำซ้ำ: