前の記事のレイアウトを書き続けました。前の記事では、ナビゲーションバーと広告のレイアウトを完了しました。
配置を開始：
次のように、最終レンダリングはこのようなものだと思います。私は3つのページのスクリーンショットに分かれています。
次に、最後に未完成のものが継続されます。
ステップ5：グリッドシステムを追加すると、3列のコルMD-4のレイアウトを選択しました。完全なグリッドは12、4は12の3分の1です。複数のグリッドを繰り返しレイアウトして設定することもできます。
<div id = "tag_container"> <div> <div> <img src = "image/3.jpg"> <h2> animal1 </h2> <p> linkaホテルは、フェンガンが後ろに送られる大きなお土産施設を見たと言いました</p> <p> <a href = "＃" src = "image/3.jpg"> <h2> animal1 </h2> <p> linka Hotelは、フェンガンが背中に送られる大きなお土産の施設を見たと言いました</p> <p> <a href = "＃">クリックした</a> </p> </div> div> <div> <img src = "image/h2 </h2>フェンガンは私から送られた大きな家の捜索機関を見ました</p> <p> <a href = "＃">私をクリックします</a> </p> </div> </div> </div> </div> </div>
1）グリッドは、適切なアライメントとパディングを自動的に割り当てることができるように、コンテナまたは容器式液divに含まれている必要があります。
2）ID "tag_container"を作成し、クラスCol-MD-4の部分を中心にして整列させます。
#tag_container .col-md-4 {text-align：center; }ステップ6：ライン間隔を設定し、上部と下部を分割します
<hr> </hr>
CSSはです
HR .Divider {マージン：40px; }ステップ7：タブページの作成。次の写真は、3つのタブページのレンダリングです。
1）タブページの原則：
<ul role = "tableist"> <li> <a href = "＃an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "＃an2" lole = "data-toggle =" tab "> animal2 </a> </li> <li> < data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div div = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
タグページの構造は次のとおりです。ULリストは、タグとラベルを宣言しますclass = "nav nav-tabs" role = "tableist"
LIタグのリンクは、[tab]ページのページを開く関数を達成できるようにするために、[[tab] "[data-toggle =" tab "]の[[tab] tab" [データ] = "tab"のマークとマークされています。各タブページのhref = "＃an1"は、次の表示レイアウトにリンクされています。
拡張レイアウト構造：<div>では、各タブページにパネルがあります。 IDは上記のタブページにマップされ、ページを開くことができることに注意してください。 <div id = "an3">
2）タグページにレイアウトを追加します
<ul role = "tableist"> <li> <a href = "＃an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "＃an2" lole = "data-toggle =" tab "> animal2 </a> </li> <li> < data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div div = "an1"> <div> <div> <h2>動物1 <span> zootopia </span> </h2> <p> ajdkgjfdは、時間の航空機によって開発された時間の航空機の価格を見ます。大使館のシグオ警察の日の結果がかかる場合、KA歌の価格irjeigrugitajdokjijrgi </p> </div> <div> <img src = "image/1.jpg"> </div> </div> </div> <div> <div> <h2> zoopia </span> <pp/span> <pp> amim Time Technology Aircraftによって開発されたTime Technology Aircraftの価格を確認します。大使館のシグオ警察の日の結果がかかる場合、Ka歌の価格は人工嘆き悲しみirjeigrugitajdokgijrgi </p> </div> <div> <img src = "image/2.jpg"> </div> </div> </div> <div = "an3"> div> <h2> <h2> <> <h2> </</</</</</</</</</</</</</</</</</</</< <p> ajdkgjfdは、時間技術航空機の価格を見ています。大使館のシグオ警察の日が結果の場合、Ka歌の価格は人工喪に服するirjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/3.jpg"> </div> </div> </div> </div> div> div>
1）タブページの上限を設定します
.feature {padding：30px 0}2）タブページなどのタイトルフォントを設定します。
.feature-heading {font-size：50px;色：＃2A6496;マージントップ：120px; }3）タブページのサブタイトル形式を設定します。
.feature-heading .text-muted {font-size：28px;色：＃999; }ステップ8：下部の著作権通知を追加します。レンダリングは次のとおりです。
<footer> <p> <a href = "＃top">トップに戻る</a> </p> <p>@2016 Rongyu System </p> </footer>
注： class = "Pull-right"は、要素を右に引っ張ることができます。これは、BootstrapのCSSの機能です。
ステップ9：ポップアップボタンを追加します。
<div id = "about"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true">×</span> </button> <h4> Ginnifer Goodwin、Jason Bateman、Shakira、Allen Tuddick、Idris Elba、J.K。 /.Modal-Content-> < /div> <！ - /.Modal-Dialog-> < /div> <！ - /.Modal-Dialog-> < /div> <！
1）静的ポップアップウィンドウは、タイトル、フォーム、ボタンの3つの部分に分割されます。その中には、ボタンが1つだけで、もう1つのボタンがコメントアウトされています。 ID =を追加して、以下の位置を容易にします。
2）ナビゲーションバーのメニューバーで、トグルリンク、data-toggle = "modal"を追加し、idはdata-target = "＃about"に対応します。
<li> <a href = "＃" data-toggle = "modal" data-target = "＃bout"> arbout </a> </li>
ステップ10、メニューの位置付け
ナビゲーションバーの機能列をクリックすると、対応するタブページが開きます。実装するにはJSコードの一部が必要です
<script> $（document）.ready（function（）{$（ "＃demo-navbar .dropdown-menu a"）。click（function（）{var href = $（this）.attr（ 'href'）; // alert（href）; $（ "＃tablist a [href = '） </script>1）IDポジショニング$（ "＃demo-navbar .dropdown-menu a"）をナビゲートし、クリックイベントを設定します。
2）タブ（ "'show"）$（ "＃tab-list a [href ='" + href + "']"）のタブページを開きます。
このようにして、ブートストラップ学習が始まったばかりです。
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。