تعلمت اليوم عن علامات تبويب bootstrap. سوف أشاركهم هنا. يتم تضمين التفسيرات المحددة في الكود ولن يتم تكرارها.
دعنا نلقي نظرة على العروض أولاً ، إنها أكثر جاذبية!
رمز التنفيذ:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width width ، scale-scale = 1.0"> <title> bootstrap tab </title> <! href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap responsive.min.css"> </head> <body> شريط علامة التبويب-> <!-تحدد محتوى علامة التبويب ، يحدد شريط المحتوى في علامة التبويب-> <!-في شريط المحتوى ، يجب أن يحتوي كل مربع فرعي على فئة لوحة التبويب-> <!-يجب أن يتوافق HREF في العلامة مع معرف الصناديق الفرعية في BAR-TAB-> <! href = "#tab1" data-toggle = "tab"> li1 </a> </li> <li> <a href = "#tab2" data-toggle = "tab"> li2 </a> </li> <li> <a href = "#tab3" data-toggle = "tab" </a> data-toggle = "tab"> li4 </a> </li></ul> <viv> <div id = "tab1"> <img src = "img/1.png"> </div> <div id = "tab2"> <img src = "img/2.png"> </div id = "tab3" id = "tab4"> <img src = "img/4.png"> </viv> <!-تقديم ملف JS لـ bootstrap-> <script type = "text/javaScript" src = "js/jquery.min.js src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap-tab.js"> </script> </body> </html>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.