Aujourd'hui, j'ai appris les onglets de Bootstrap. Je les partagerai ici. Les explications spécifiques sont incluses dans le code et ne seront pas répétées.
Jetons un coup d'œil aux rendus en premier, c'est plus accrocheur!
Code d'implémentation:
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1.0"> <itle> bootstrap tab </ title> <! - Initial-scale href = "css / bootstrap.min.css"> <link rel = "stylesheet" type = "text / css" href = "css / bootstrap-re-urs de l'onglet -> <! - Tab-contenu Définissez la barre de contenu de l'onglet -> <! - Dans la barre de contenu, chaque sous-boîte doit contenir la classe d'onglet -> <! - Un href dans la balise doit correspondre à l'ID de la sous-boîte dans la barre de contenu -> <! 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> <div id="tab2"><img src="img/2.png"></div> <div id="tab3"><img src="img/3.png"></div> <div id = "tab4"> <img src = "img / 4.png"> </ div> <! - introduisant le fichier js pour bootstrap -> <script type = "text / javascrip type = "text / javascript" src = "js / bootstrap-tab.js"> </ script> </ body> </html>
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.