Heute habe ich etwas über die Registerkarten von Bootstrap gelernt. Ich werde sie hier teilen. Die spezifischen Erklärungen sind im Code enthalten und werden nicht wiederholt.
Schauen wir uns zuerst die Renderings an, es ist auffälliger!
Implementierungscode:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = Gerätebraute, initial-Scale-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Styles-Style-Style-Typ-Styles-Typ-Styles-Titel. href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap responsiv.min Von der Registerkarte-> <!-Definieren Sie die Inhaltsleiste der Registerkarte-> <!-In der Inhaltsleiste muss jede Subbox die Tab-Scheiben-Klasse enthalten-> <!-Ein HREF im Tag muss der ID der Subbox in der Inhaltsleiste entsprechen-> <!-aktiv die Titelleiste und die Inhalts-Sub-Box in der Aktivität, und jeder Tab-Bar muss für eine Data-Toggle = 'Registerkarte "ul> <la> <la> <la ^ mus eine Data-Toggle =' Tab '--> <ul> <la> <la> <la ^ Die Tablade. 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">li3</a></li> <li><a href="#tab4" data-toggle = "tab"> li4 </a> </li> </ul> <div> <div id = "tab1"> <img src = "img/1.png"> </div> <div2 "tab2"> <img src = "iMg/2.png"> </divng id = "tab3"> <img3 "> <img 3"> <img 3 "> <img 3"> <img 3 "> <img 3"> <img 3 "> <img 3"> <img. id = "tab4"> <img src = "img/4.png"> </div> <!-Einführung der JS-Datei für Bootstrap-> <script type = "text/javaScript" src = "js/jquery.min.js"> </script> <script = "text/javascript" type = "text/javaScript" src = "js/bootstrap-tab.js"> </script> </body> </html>
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.