Hoje aprendi sobre as abas do bootstrap. Vou compartilhá -los aqui. As explicações específicas são incluídas no código e não serão repetidas.
Vamos dar uma olhada nas renderizações primeiro, é mais atraente!
Código de implementação:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device-width, scale inicial = 1.0"> <title> bootstrap Reltrap </title> <!-Apresentando os estilos de boots- href = "css/bootstrap.min.css"> <link rel = "Stylesheet" type = "text/css" href = "css/bootstrap-responsivo.min.css"> </head> <body> <h1> <i> </i> heli) </h1> da guia-> <!-Content Definir a barra de conteúdo da guia-> <!-Na barra de conteúdo, cada sub-caixa deve conter a classe de panela de guias-> <!-um href na tag deve corresponder ao ID da sub-caixa-na barra de conteúdo-> <!-Representa a barra de título e o sub-caixa da atividade, e a guia href = "#tab1" data-toggle = "tab"> li1 </a> </li> <li> <a href = "#tab2" data-toggle = "tab"> li2 </a> </li> <li> <a href = "#tab3" data-tgle = "tabs"> tab3 <li> </li> </li> <lref = "#tab3" data-tgle = ""> tab3 </a> 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> <dd = "TAB3" id = "tab4"> <img src = "img/4.png"> </div> <!-Apresentando o arquivo js para bootstrap-> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> <script type = "text/javsscrint" " src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-tab.js"> </script> </body> </html>
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.