Hoy aprendí sobre las pestañas de Bootstrap. Los compartiré aquí. Las explicaciones específicas se incluyen en el código y no se repetirán.
Primero echemos un vistazo a las representaciones, ¡es más llamativo!
Código de implementación:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width, escala inicial = 1.0"> <title> bootstrap tab </title> <!-Introducción de bootstrap Stylesheet-> <link RELT = "STYLESHEET" STYLESHEET " type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-respessive.min.css"> </head> <body> <h1> <i> </i> hello world! Las tablas navegantes de la barra de título de la pestaña de la pestaña-> <!-Tab-Content Define la barra de contenido de la pestaña-> <!-En la barra de contenido, cada sub-box debe contener la clase de paneles de pestaña-> <!-Un href en la etiqueta debe corresponder a la identificación de la sub-box en la barra de contenido-> <!-Active representa la barra de título y el sub-box de contenido en la actividad y cada barra debe ser para una tabla de datos. <li> <a 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> <s> <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> <d "tab3"> <img src = "img/3.png/" id = "tab4"> <img src = "img/4.png"> </div> <!-Introduciendo el archivo js para bootstrap-> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap.min.mins" type = "text/javaScript" src = "js/bootstrap-tab.js"> </script> </body> </html>
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.