Сегодня я узнал о вкладках начальной загрузки. Я поделюсь ими здесь. Конкретные объяснения включены в код и не будут повторяться.
Давайте сначала посмотрим на визуализации, это более привлекательно!
Код реализации:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, начальная масштаба = 1.0"> <title> Tab </title> <!-Вводя загрузка. href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-reponsive.min.css"> </head> <hody> <h1> <i> </i> Hello World! Вкладка-> <!-Tab-Content Определите строку содержимого вкладок-> <!-В панели содержимого каждая подбола должна содержать класс Tab-Pane-> <!-href в теге должен соответствовать идентификатору подбола в панели содержимого-> <!-Active представляет собой строку названия и подборы содержимого в действии, и каждая вкладка должна быть для Tab Data-toggle = ' 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> "#href ="########################################tabgle = "tab" 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 = div3 "> <img src =" img/"img/"/divn ". id = "tab4"> <img src = "img/4.png"> </div> <!-Введение файла JS для Bootstrap-> <script type = "text/javascript" src = "js/jquery.min.js"> </script> <script type = "javascript" src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-tab.js"> </script> </body> </html>
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.