前の記事は、すでにいくつかの手順とブートストラップの基本的な使用について説明しています。クリックして表示します
このブログは、主に次のコンポーネントを含むいくつかの一般的な効果を紹介し続けています
1。メニューをプルダウンします
2。ナビゲーションバー
3。進行中のバー
4。メディアオブジェクト
5。ページネーション
6。リスト
まず、ブートストラップのCSSとJSをインポートします
<link rel = "styleSheet" href = "css/bootstrap.min.css"> <！ - cdnのcssを引用するのが最善です。いくつかのスタイルファイルはlink rel = "styleSheet" href = " src = "js/jquery-3.1.0.min.js"> </script> <スクリプトsrc = "js/bootstrap.min.js"> </script>
1。メニューをプルダウンします
主にボタンとULで構成され、字幕とスプリットラインを追加できます
<div> <button type = "button" data-toggle = "ドロップダウン" aria-expanded = "false">地下鉄の線<！ - これは下向きの三角形のシンボルです - > <span> </span> </button> <ul chenu = "menu"> <！ - これは字幕 - > < href = "＃">行2 </a> </li> <li> <a href = "＃">行3 </a> </li> <li> <a href = "＃">行4 </a> </li> <！
2。ナビゲーションバー
ナビゲーションバーは、ほぼすべてのWebページの標準であるため、使用方法を学ぶことは絶対に正しいです。
これはページの上部にあるナビゲーションバーです
<！ - NAVクラスをよりハイエンドに設定し、Navbar-Static-Topに設定してNavbarの丸い角を削除し、上部に固定します - > <navロール= <nav div> <！ - ナビゲーションバーの始まり、通常はテキストまたは絵 - > <div> <！ - このボタンはメニューをクリックします。 data-target = "＃bs-example-navbar-collapse-1"> <span>トグルナビゲーション</span> <span> </span> <span> </span> </span> <span> </span> </button> <！ - swapブランドへ - > <a href = "＃">ブランド</a撤回してクリックしました - > <div id = "bs-example-navbar-collapse-1"> <ul> <li> <li> <a href = "＃">メンバー管理</a> </li> <li> <a href = "＃">メンバー管理</a> </a> </li> <li> <a href = "管理</a> </li> <li> <a href = "＃">メンバー管理</a> </li> <li> <a href = "＃">メンバー管理</a> </li> <li> <a href = "＃">メンバー管理</a> </a> </li> <li> <a href = "＃" <li> <a href = "＃" data-toggle = "ドロップダウン"ロール= "ボタン" aria-expanded = "false">システムメンテナンス<span> </span> </a> <ul chole = "menu"> <li> <a href = " href = "＃"> disconnect </a> </li> <li> <a href = "＃">ユーザーの削除</a> </li> </li> </li> </ul> <！ - Navbar-right first and the right-> <！ - navigation burt = <> <> <> <> <入力タイプ= "Text" PlaceHolder = "検索コンテンツを入力"> </div> <button type = "summit"> search </button> </form> </div> </div> </nav> </nav>
Webページを使用してブログやファイルを閲覧すると、レベルがあります。この時点で、前のレベルまたはいくつかのレベルに戻りたい場合は、ロケーションナビゲーションバーが必要です。
<！ - ナビゲーションバー - > <ol> <li> <a href = "＃">私のバックエンド</a> </li> <li> <a href = "＃">システム分析</a> </li> <！ - 現在の場所をクリックしてジャンプすることはできません - > <li>アクセス統計</li> </ol>
3。進行中のバー
<div> <！ - 進行中の縞模様がストライプをセットし、アクティブセットアニメーション - > <！ - スタイル幅の割合に応じて進行状況バーの割合を表示 - > <div role "aria-valuenow =" 60 "aria-valuemin =" 0 "0" "aria-valuemax =" 100 " </div> </div>
4。メディアオブジェクト
これは基本的にWeiboまたはTwitterで同じメッセージです
左側のアバター、右側のタイトルとテキスト
<div> <div> <img src = "images/1.jpg"> </div> <div> <h4>メディアヘッド</h4> <p> cras sit amet amet nibh libero、gravida nulla。 nulla vel metus sclerisque ante sollicitudin commodo。 Cras Purus Odio、Vulputate at、Tempus Viverra Turpisの前庭。 fusce condimentum nunc ac nisi vulputate fringilla。 FaucibusのDonec Lacinia Congue Felis。</p> </div> </div>
5。ページネーション
これは複数のページです
<ul> <li> <a href = "＃" aria-label = "preter"> <！ - 左への二重矢印 - > <span aria-hidden = "true">«</span> </a> </li> <！ - 最初のオプションはアクティブ化されています - > <li> <a href = "＃"> <li> <a href = "＃"> 3 </a> </li> <li> <a href = "＃"> 4 </a> </li> <li> <a href = "＃"> 5 </a> </li> <li> href = "＃"> 7 </a> </li> <li> <a href = "＃"> aria-label = "next"> <！ - 右への二重矢印 - > <span aria-hidden = "true">»</a> </li> </ul> </a>
これは前のページと次のページのみです
<ul> <li> <a href = "＃"> <span aria-hidden = "true">←</span>前のページ</a> </li> <li> <a href = "＃"> <span aria-hidden = "true"> </span>次のページ</a> </li> </ul>
上記は、2つのボタンが接続されて書かれています
2つのボタンが両側に分散されているため、以下は書かれています
<ul> <li> <a href = "＃"> <span aria-hidden = "true">←</span>前のページ</a> </li> <li> <a href = "＃"> <span aria-hidden = "true"> </span>次のページ</a> </li> </ul>
6。リスト
リストの効果は非常に一般的で非常に簡単です
<div> <！ - 最初の項目が選択されました - > <> <a href = "＃">アクセス統計</a> <a href = "＃">情報統計</a> <a href = "＃"> log統計</a> <a href = "＃">情報統計</a> <a href = " href = "＃">情報統計</a> <a href = "＃">情報統計</a> </div>
上記のコンポーネントを使用して、バックエンドの静的Webページを作成しました
効果は写真に示されているとおりです
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。