오늘 나는 부트 스트랩 탭에 대해 배웠습니다. 나는 여기에서 그들을 공유하겠습니다. 특정 설명은 코드에 포함되어 있으며 반복되지 않습니다.
먼저 렌더링을 살펴 보겠습니다. 더 눈길을 끄는 것입니다!
구현 코드 :
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1.0"> <title> bootstrap tab </title> <!-<inlink rel = ""type "" "" href = "css/bootstrap.min.css"> <link rel = "Stylesheet"type = "text/css"href = "css/bootstrap-responsive.min.css"> </head> </head> <h1> <i> </i> Hello World! 탭-> <!-Tab-Content 탭의 내용 막대를 정의합니다.-> <!-컨텐츠 표시 줄에 각 서브 박스는 탭판 클래스-> <!-태그의 href는 컨텐츠 바의 서브 박스의 ID에 해당해야하며 활동의 제목 막대 및 컨텐츠 하위 상자를 나타 내어야하며 각 탭 막대는 데이터 탭을 사용해야합니다. href = "#tab1"data-toggle = "tab"> li1 </a> </li> <li> <a href = "#tab2"data-toggle = "tab"> li2 </a> </a> </li> <li> <a href = "#tab3"data-toggle = "tab"> li3 </a> <li> < data-toggle = "tab"> li4 </a> </li> </li> </li> </ul> <div> <div id = "tab1"> <img src = "img/1.png"> </div> <div id = "tab2"> <img src = "img/2.png"> </div id = "tab3"> <img src = "img/3.png"> id = "tab4"> <img src = "img/4.png"> </div> <!-bootstrap에 대한 JS 파일 소개-> <script type = "text/javaScript"src = "js/jquery.min.js"> </script> <script> <script> <text/javascript " src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"src = "js/bootstrap-tab.js"> </script> </body> </html>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.