วันนี้ฉันเรียนรู้เกี่ยวกับแท็บของ bootstrap ฉันจะแบ่งปันพวกเขาที่นี่ คำอธิบายเฉพาะจะรวมอยู่ในรหัสและจะไม่ถูกทำซ้ำ
มาดูการเรนเดอร์ก่อนมันจะสะดุดตามากขึ้น!
รหัสการใช้งาน:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, stylestrap-styles-styles href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-responsive.min.css"> </head> แท็บ-> <!-แท็บเนื้อหากำหนดแถบเนื้อหาของแท็บ-> <!-ในแถบเนื้อหาแต่ละกล่องย่อยจะต้องมีคลาส Tab-Pane-> <!-href ในแท็กต้องสอดคล้องกับ ID ของกล่องย่อยในแถบเนื้อหา-> <! href = "#tab1" data-toggle = "tab"> li1 </a> </li> <li> <a href = "#tab2" data-toggle = "tab"> li2 </a> </li> <li> <a href = "#tab3" tab3 data-toggle = "tab"> li4 </a> </li> </ul> <div> <div id = "tab1"> <img src = "img/1.png"> </div> <div id = "tab2"> <img src = "img/2.png"> id = "tab4"> <img src = "img/4.png"> </div> <!-แนะนำไฟล์ JS สำหรับ bootstrap-> <script type = "text/javascript" src = "js/jquery.min.js"> </script> type = "text/javascript" src = "js/bootstrap-tab.js"> </script> </body> </html>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น