今日、私はブートストラップのタブについて学びました。ここで共有します。特定の説明はコードに含まれており、繰り返されません。
最初にレンダリングを見てみましょう、それはより人目を引くものです！
実装コード：
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width =" width、width = 1.0 "> <title> bootstrap tab </title> < href = "css/bootstrap.min.css"> <link rel = "styleSheet" type = "text/css" href = "css/bootstrap-responsive.min.css"> </head> head> <body> <h1> <i> </i> hellow-bar-tab <タブの - > <！ - タブコンテンントタブのコンテンツバー - > <！ - コンテンツバーのコンテンツバーを定義します。各サブボックスには、タブペインクラス - > <！ - タグのhrefがコンテンツバーのサブボックスのIDに対応する必要があります - > <！ - アクティブはアクティビティのタイトルバーとコンテンツサブボックスを表します。 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 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 = "tab3"> <img "> <img"> <img "> <img =" img "> id = "tab4"> <img src = "img/4.png"> </div> <！ - bootstrapのjsファイルの紹介 - > <スクリプトタイプ= "text/javascript" src = "js/jquery.min.js"> </script> <script = "" src = "js/boottrap type = "text/javascript" src = "js/bootstrap-tab.js"> </script> </body> </html>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。