บทความนี้ส่วนใหญ่จะแนะนำเมนูและการนำทางของ Bootstrap
เริ่มต้นด้วยบทความนี้เราจะแนะนำไฟล์ที่เกี่ยวข้องกับ JavaScript ดังนี้:
<!-วางไว้ที่ส่วนท้ายของแท็กตัวถังเพื่อให้โหลดหน้าเร็วขึ้น->
<!-ถ้าคุณต้องการใช้ปลั๊กอิน js ของ bootstrap คุณต้องโทรหา jQuery ก่อน->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-รวมปลั๊กอิน Bootstrap JS ทั้งหมดหรือปลั๊กอิน JS ที่สามารถใช้ได้ตามต้องการ->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
ใน bootstrap ส่วนประกอบเมนูแบบเลื่อนลงเป็นองค์ประกอบแบบสแตนด์อโลน เอฟเฟกต์การโต้ตอบของส่วนประกอบของ Bootstrap นั้นขึ้นอยู่กับปลั๊กอินที่เขียนโดย JQuery Library ดังนั้นก่อนที่จะใช้ bootstrap.min.js คุณต้องโหลด jQuery.min.js ก่อน
1. การใช้งานเมนูแบบดึงลง
<! 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.1.1.1. สไตล์-> <style> ร่างกาย {มาร์จิ้น: 50px; padding: 50px;} </style> </head> <body> <div> <button type = "ปุ่ม" id = "dropdownMenu1" data-toggle = "dropdown"> เมนู dropdownu </span> </pan> role = "menuitem" tabindex = "-1" href = "#"> เมนู 1 </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> menu2 </a> </li> tabindex = "-1" href = "#"> เมนู 3 </a> </li> <!-ตั้งค่าสถานะรายการเมนูให้ปิดใช้งาน (.disabled)-> <lio role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> เมนู 4 </a> tabindex = "-1" href = "#"> เมนู 4 </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> เมนู 4 </a> </li> role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> เมนู 6 </a> </li> </ul> </div> <!-วางไว้ที่ส่วนท้ายของเอกสารเพื่อให้โหลดหน้าเร็วขึ้น-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-รวมถึงปลั๊กอิน JS ทั้งหมดสำหรับปลั๊กอิน bootstrap หรือ JS ที่สามารถใช้ได้ตามต้องการ-> <สคริปต์ src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>หมายเหตุ: บางครั้งมีความจำเป็นที่จะต้องเด้งขึ้นไปดังนั้นคุณจะต้องเพิ่มชื่อคลาส "Dropup" ลงในชื่อคลาส "Dropdown"
การเรนเดอร์มีดังนี้:
2. การจัดตำแหน่งเมนูแบบดึงลง
เมนูแบบดรอปดาวน์ใน bootstrap จะได้รับการจัดแนวซ้ายตามค่าเริ่มต้น หากคุณต้องการให้เมนูแบบดรอปดาวน์ได้รับการจัดแนวขวาเมื่อเทียบกับคอนเทนเนอร์พาเรนต์คุณสามารถเพิ่มชื่อคลาส "แบบเลื่อนลง"-เมนู-เมนู-ขวา "ลงใน" Dropdown-Menu "ดังที่แสดงด้านล่าง:
<!-ส่วนที่ถูกละเว้นเช่นรหัสใน 1-> ... <div> <button type = "ปุ่ม" id = "dropdownMenu1" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <span> </pan> </ปุ่ม> รายการเมนู </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> รายการเมนูแบบเลื่อนลง </a> </li> </ul> </div> ...
การเรนเดอร์มีดังนี้:
3. กลุ่มปุ่มปุ่ม
กลุ่มปุ่มยังเป็นองค์ประกอบอิสระ มันต้องพึ่งพาปลั๊กอิน button.js เพื่อทำงานตามปกติ และ bootstrap.js ได้รวมฟังก์ชั่นปลั๊กอินของ button.js
การใช้งาน: ใช้ภาชนะ "BTN-group" และวางปุ่มหลายปุ่มลงในคอนเทนเนอร์นี้ ดังที่แสดงด้านล่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> กลุ่มปุ่ม </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/cssfboots ร่างกาย {มาร์จิ้น: 30px; การตอบสนอง: 30px; } </style> </head> <body> <div> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button type = "ปุ่ม"> <span> </span> </pution> <button type = "ปุ่ม"> <span> </span> type = "button"> <span> </span> </button> <button type = "ปุ่ม"> <span> </span> </pution> <button type = "ปุ่ม"> <span> </span> </pution> <ปุ่ม type = "ปุ่ม" type = "button"> <span> </span> </button> <button type = "ปุ่ม"> <span> </span> </pution> <button type = "ปุ่ม"> <span> </span> </pution> <ปุ่ม type = "ปุ่ม" type = "ปุ่ม"> <span> </span> </button> </div> <!-วางไว้ที่ส่วนท้ายของเอกสารเพื่อทำให้หน้าโหลดเร็วขึ้น-> <!-ถ้าคุณต้องการใช้ปลั๊กอิน JS ของ bootstrap คุณต้องโทรหา jQuery/1.9.b. รวมถึงปลั๊กอิน bootstrap js ทั้งหมดหรือปลั๊กอิน JS ที่สามารถเรียกได้ตามต้องการ -> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body>การเรนเดอร์มีดังนี้:
4. ปุ่ม - การจัดกลุ่มซ้อนกัน
หลายครั้งที่เรามักจะจัดเมนูแบบเลื่อนลงและกลุ่มปุ่มธรรมดาเพื่อให้ได้เอฟเฟกต์คล้ายกับเมนูการนำทาง เมื่อใช้การจัดกลุ่มแบบซ้อนกันของปุ่ม bootstrap คุณจะต้องแทนที่คอนเทนเนอร์ "ดรอปดาวน์" ที่ทำเมนูแบบเลื่อนลงด้วย "BTN-group" และวางไว้ในระดับเดียวกับปุ่มธรรมดา ดังที่แสดงด้านล่าง:
<!-ชิ้นส่วนที่ถูกละเว้นเช่นรหัสใน 3-> ... <div> <button type = "ปุ่ม"> home </button> <div> <button data-toggle = "dropdown" type = "ปุ่ม"> การพัฒนามือถือ <span> </pan> </ul> </div> <button type = "ปุ่ม"> Java Web Development </button> <button type = "ปุ่ม"> PHP Development </button> <button type = "ปุ่ม"> ข้อมูลขนาดใหญ่ </button> </div> ...
การเรนเดอร์มีดังนี้:
ในการใช้งานจริงเอฟเฟกต์การแสดงผลแนวตั้งจะพบได้เสมอ สไตล์นี้มีให้ใน bootstrap เราต้องเปลี่ยนชื่อคลาส "BTN-group" ของการจัดกลุ่มแนวนอนเป็น "BTN-Group-Vertical" เพื่อตระหนักถึงการจัดกลุ่มแนวตั้งของปุ่ม
5. ปุ่มเทียบเท่าปุ่ม
วิธีการใช้งานของปุ่มการทำให้เท่าเทียมกัน (ปุ่มการจัดกลุ่มแบบปรับตัว) ก็ง่ายมากเช่นกัน คุณจะต้องเพิ่มชื่อคลาส "BTN-group-justified" ในกลุ่มปุ่ม "BTN-Group" ดังที่แสดงด้านล่าง:
<div> <a href = "#"> หนึ่งในสาม </a> <a href = "#"> หนึ่งในสาม </a> <a href = "#"> หนึ่งในสาม </a> <a href = "#"> หนึ่งในสาม </a> </div>
การเรนเดอร์มีดังนี้:
6. การนำทาง - การใช้งานขั้นพื้นฐาน
แถบการนำทางส่วนใหญ่ทำใน bootstrap ผ่านสไตล์ ".nav" .nav "ต้องติดกับรูปแบบอื่นเพื่อให้มีประสิทธิภาพเช่น" Nav-Tabs "," Nav-Pills "ฯลฯ
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานการนำทาง-basic </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. สไตล์-> <style> body {margin: 30px; padding: 30px;} </style> </head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a href = "##"> ฟอรัม </a> </li> <!-สถานะปิดใช้งาน-> <li> <a href = "##"> คำติชม </a> </li> </ul> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-รวมถึงปลั๊กอิน JS ทั้งหมดสำหรับปลั๊กอิน bootstrap หรือ JS ที่สามารถเรียกได้ตามต้องการ-> <สคริปต์ src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>การเรนเดอร์มีดังนี้:
7. การนำทางนำทาง (ยา) การนำทาง
การนำทางแคปซูล (ยา) รายการปัจจุบันจะถูกเน้นและมีเอฟเฟกต์มุมโค้งมน เพียงแทนที่ชื่อคลาส "Nav-Tabs" ด้วย "Nav-Pills":
<ul> <!-สถานะปัจจุบัน-> <li> <a href = "##"> home </a> </li> <!-สถานะที่ถูกระงับ-> <li> <a href = "##"> ข่าว </a> </li> <li> <a href = "##" data-toggle = "dropdown" href = "##"> บล็อก front-end </a> </li> <li> <a href = "##"> java blog </a> </li> </li> </li> <li> <a href = "##"> forum </a> </li> <!
การเรนเดอร์มีดังนี้:
8. การนำทาง - การนำทางแบบเรียงซ้อนแนวตั้ง
ในการสร้างการนำทางสแต็กแนวตั้งคุณจะต้องเพิ่มชื่อคลาส "Nav-Stacked" ตาม "Nav-Pills":
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> ข่าว </a> </li> <li> <a href = "##"> บล็อก </a> </li> <li> href = "##"> คำติชม </a> </li></ul>
การเรนเดอร์มีดังนี้:
9. การนำทาง - การนำทางแบบปรับตัว
การนำทางแบบปรับตัว "Nav-Justified" (โปรดดูไฟล์ bootstrap.css, บรรทัด 3585 ถึงบรรทัด 3607) ต้องใช้ร่วมกับ "Nav-Tabs" หรือ "Nav-Pills" ชอบ:
<ul> <li> <a href = "##"> บ้าน </a> </li> <li> <a href = "##"> ข่าว </a> </li> <li> <a href = "##"> บล็อก </a> </li> <li> href = "##"> คำติชม </a> </li></ul>
การเรนเดอร์มีดังนี้:
10. การนำทาง-ขนมปัง
Breadcrumb ยังเป็นส่วนประกอบโมดูลอิสระโดยทั่วไปใช้สำหรับการนำทางและฟังก์ชั่นหลักของมันคือการบอกผู้ใช้ถึงตำแหน่งปัจจุบันของหน้า (ตำแหน่งปัจจุบัน) วิธีการใช้งานง่ายมากเพิ่มคลาส breadcrumb ลงใน OL:
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> จีน </a> </li> <li> ปักกิ่ง </li> </ol>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น