まず、BootstrapとJQueryを紹介する必要があります
CDNをお勧めします:http://cdn.gbtags.com/index.html
次に、HTMLコードの書き込みを開始します。実際、ディスプレイ効果を変更したくない場合、CSSは2333を記述することはできません。
多くのHTMLコードがあるため、ここでは3つの部分に分割され、全体的なHTMLコードが最後になります
まず、上の図に示すように、Bootstrapの次のコンポーネントを理解する必要があります
•ナビゲーションバー
•ボタン
•形状
•ドロップダウンメニュー
実際、上記のコンポーネントには多くのスタイルがあります。その一部を知る必要があります。詳細については、詳細については、http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.htmlを参照してください。
PS:クラス{}ここには、HTMLコードではなく、単なるコメントです
PS2:HTMLファイルにオンラインケースのデバッグを提供します
ナビゲーションバーとナビゲーションバーのロゴレイアウト
<! - BootStarpナビゲーションバーとナビゲーションロゴレイアウトを作成します - > <Nav> <div> // sth </div> </nav>
ナビゲーションボタン
< Aria-Expanded = "false":assisted reading function..settings for special groups-> <button type = "button" data-toggle = "data-target =" try} - > <span>私をクリックします</span> <span> </span> <span> </span> </span> <span> </span> </button>
形状
<div> <! - class {form-control:widthを%に設定しますが、widを親要素フォームに設定して、幅が一定の量で制御されるように} - > <入力タイプ= "Text" Placeholder = "Placeholder =" Placeholder = "Search"/> <!プルダウンメニュー
<li> <! - class {dropdown-toggle:宣言これはドロップダウンできるリストです。実際、私はこのクラスの特定の目的を見つけられませんでした。キャンセルしてbugspan.caret {小さな三角形のアイコン画像スタイル}} data-toggle = "ドロップダウン":ドロップダウンメニューコンポーネントロールの必要な属性を導入します= "ボタン":補助宣言として動作します。これはボタンです - > <> <a href = "#" data-toggle = "ドロップダウン"ロール= "ボタン" aria-haspopup = "true" aria-expanded = "false">ドロップダウンメニュー名<span> </span> </a>分割者としてのこの要素 - > <liロール= "separator"> </li> <li> <a href = "">オタクラベルに従ってください</a> </li> </ul> <! - ドロップダウンメニュー - >HTMLの全体的な実装
<!Doctype HTML> <HTML> <HEAD> <META CHARSET = "UTF-8"> <title>レスポンシブナビゲーションバー</title> <link rel = "styleSheet" type = "text/css" href = "../ type = "text/javascript" charset = "utf-8"> </script> <script src = "../ js/bootstrap.min.js" type = "text/javascript" charset = "utf-8"> </script> </head> <body> <! - bootstarp bar-> <> <> <> <> <! - Bootstraplogoレイアウトの作成 - > <! - 注:Navbar-Headerを作成し、ロゴとレスポンシブボタンをラップする必要があります。それ以外の場合は...誰もがNavbar-Headerを削除し、ドロップダウンメニューを狭め、ノウハウにクリックします - > <div> <div> <p> otgge </p> div </div <> JSはクリック可能な崩壊です。Navbar-Collapseを組み合わせない場合、デフォルトのクラスです。追加せずにバグは見つからないようです。 } data-toggle = "collapse":collapseプラグインを導入しますdata-target = "#navbar-gbtag":ボタンをクリックすると、どのタグがリダイレクト/開きます= "false":aspided reading functions ..特別なグループのセッティング - > <ボタンタイプ= "ボタン"# "collapsed" <! - ボタンクラスにいくつかのアイコンと手順を追加する{SRのみ:このタグを非表示になります:アイコンスタイルを変更し、アイコンスタイルをGlyphicon-Star try} - > <span>クリック</span> </span> <span> </span> <span> </span> </button>デフォルトで。崩壊がキャンセルされた場合、ボタンはデフォルトで展開されます。 Navbar-Collapse:ナビゲーションバー要素レイアウトに必要なクラス} ID:ボタンのデータタージと一致 - > <div id = "navbar-gbtag"> <! - ナビゲーションバー内部要素クラスを作成します{nav:ナビゲーションバーの内部要素に必要なベースクラスを作成します。 Navbar-nav:説明するのは簡単ではありません。私は公式のドキュメントを調べてみて、詳細に言わなかったからです。ここでは、簡単に説明します。同時に、幅はコンテンツ幅であり、フォームなどの背後にある要素を絞りません。そして最後に、このクラスを削除して、それが使用されていることを知ることができます。 Navbar-right:ナビゲーションバーによってアレンジされているクラス} - > <ul> <! - クラス{アクティブ:デフォルトクリック、ドロップダウン:ドロップダウンメニューの作成に必要な基本クラス} - > <li> <li> <li> <a href = ""> relsoul </a>ドロップすることができるリスト。実際、私はこのクラスの特定の目的を見つけられませんでした。キャンセルしましたが、バグは見つかりませんでした。 span .caret {小さな三角形のアイコンイメージスタイル}} data-toggle = "ドロップダウン":ドロップダウンメニューコンポーネントの必要な属性を導入= "ボタン":補助宣言として機能します。これはボタンです - > <> <a href = "#" data-toggle = "ドロップダウン"ロール= "ボタン" aria-haspopup = "true" aria-expanded = "false">ドロップダウンメニュー名<span> </span> </a>仕切りとしてのこの要素 - > <liロール= "セパレーター"> </li> <li> <a href = ""> geekタグに注意してください</a> </li> </ul> <! - ドロップダウンメニュー - > </li> <! http://v3.bootcss.com/components/#navbar-forms navbar-left:ナビゲーションバーの要素のアラインメントを指定するために使用されますhttp://v3.bootcss.com/components/#navbar-component-alignment} - > <bass "ボタンスタイルは、BTNベースクラスの特定のリファレンスhttp://v3.bootcss.com/css/#buttonsフォームグループに基づいています。一定の金額で制御されます} - > <入力タイプ= "テキスト"プレイスホルダー= "検索"/> </div> <! - form group-> <button type = "submit"> search </button> </form> <! - form-> <ul> <li> <a href = ""> soul </a> </li> < aria-haspopup = "true" aria-expanded = "false">ドロップダウンメニュー名<span> </span> </a> <ul> <li> <a href = ""> bootstrap </a> </li> <! - class {分裂者:分裂スタイル}役割= "分離" href = "">オタクタグ</a> </li> </ul> <! - ドロップダウンメニュー - > </li> <! - ナビゲーションサブエレメント2-> </ul> <! - ナビゲーション要素2-> </div> <!上記のコンテンツは、編集者によるレスポンシブナビゲーションバーを作成するためのサンプルコードです。それがあなたに役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください。ありがとう!