この記事では、参照のタブタグの切り替え効果を実現するために、ブートストラップの特定のコードを共有しています。特定のコンテンツは次のとおりです
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <link rel = "styleSheet" href = "css/bootstrap.min.css"/> <script type = "text/javascript" src = "js/jquery.min.js"> type = "text/javascript" src = "js/bootstrap.min.js"> </script> </head> <body> <nav role = "navigation"> <div> <div> <button data-toggle = "collapse" data-target = "。 <img src = "img/logo.jpg" style = "height：50px; margin -top：-15px;"/> </a> </div> <div> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <li> home </a> </li> <li> <a href = "> href = "＃"> product </a> </li> <li> <a href = "＃"> data-toggle = "dropdown"> services <span> </span> </a> <ul> <li> <a href = "＃">オンライン</a> </a> </li> <li> </li> </</</</ <li> <a href = "＃">アドレス電話</a> </li> </li> </li> </li> <li> <a href = "＃"> mall </a> </li> </ul> <div> <a href = "＃"> login </a> <a href = " <ボタン>検索>検索</button> </div> </div> </nav> <div style = "height：60px;"> </div> <div> <div> <div> <ul id = "mytab"> <li> <a href = "＃xw1" data-toggle = 'tab'> news1 </a> data-toggle = 'tab'> news2 </a> </li> </ul> <div> <div id = "xw1"> <p> <a href = "＃">図解されたtpp瞬間：米国で告白されていないものが常にありました（写真）</a> <span> 2015-10-6常に米国で告白されていないもの（写真）</a> <span> 2015-10-6 </span> </p> <p> <a href = "＃">図解されたTPPの瞬間：米国で告白されていないもの（写真）</a> <span> 2015-10-6米国では常に告白されていないものでした（写真）</a> <span> 2015-10-6 </span> </p> </p> </p> </p> </div> <div> <div> <p> <p> <a href = "＃" href = "＃">図解TPPの瞬間：米国で告白されていない何かがありました（写真）</a> <span> 2015-10-6 </span> </p> <p> </p> <p> <a href = "＃">イラスト入りTPPの瞬間：米国で告白されていないものがありました（写真） </div> </div> <ul> <li> <a href = "＃">ベストプラクティス1 </a> </li> <li> <a href = "＃">ベストプラクティス2 </a> </li> <li> <a href = "＃">ベストプラクティス3 </a> </li> <h3> <a> bootstrap </a> </h3> <p>これは、上記のアプリケーションの短い説明テキストです。 </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> bootstrap </a> </h3> <p>これは上記のアプリケーションの短い説明テキストです。 </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> bootstrap </a> </h3> <p>これは上記のアプリケーションの短い説明テキストです。 </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> bootstrap </a> </h3> <p>これは上記のアプリケーションの短い説明テキストです。 </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> bootstrap </a> </h3> <p>これは上記のアプリケーションの短い説明テキストです。 </p> </div> </div> </div> <div> <img src = "img/logo.jpg"/> <div> <h3> <a> bootstrap </a> </h3> <p>これは上記のアプリケーションの短い説明テキストです。 </p> </div> </div> <div> <div> <h3>これは、HTML5の新しい開発方法です</h3> </div> <p>ルックルック</p> </div> </div> </div> </div> </div> <script> // $（ '＃mytab a [href = "＃xw2"]' '）;' show '）; //＃$（ '＃mytab a：last'）。タブ（ 'show'）; $（ '＃mytab a：eq（1）'）。タブ（ 'show'）</script> </body> </html>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はすべてこの記事に関するものであり、誰もがブートストラッププログラミングを学ぶことが役立つことを願っています。