ナビゲーションバーは優れた機能であり、Bootstrap Webサイトの顕著な機能です。ナビゲーションバーは、アプリケーションまたはWebサイトのナビゲーションタイトルとして機能するレスポンシブメタコンポーネントです。ナビゲーションバーはモバイルデバイスのビューで崩壊し、ナビゲーションバーは利用可能なビューポート幅が増加すると水平方向に拡張されます。ブートストラップナビゲーションバーのコアには、ナビゲーションバーには、サイト名と基本ナビゲーションのスタイルの定義が含まれています。
デフォルトのナビゲーションバーを作成する手順は次のとおりです。
ナビゲーションバーにリンクを追加するには、クラス.nav、.navbar-navで順序付けられていないリストを追加するだけです。
次の例では、Bootstrap3を使用して作成されたナビゲーションバーを共有します。特定のコンテンツは次のとおりです
例えば
グーグル
ワイボ
したがって、このような便利なコンポーネントを書く方法
bootstrap3を使用してください！
直接教えてください
一般的に言えば、ナビゲーションは次の構造に配置されます
<nav role = "navigation"> <div> <div> <a href = "＃"> <img src = "..."> </a> </div> </div> </nav>
1。ナビタタグ
ファーストクラスでは、Navbarが必要です。他のプロパティはオプションです。
Navbar-Defaultを追加すると、最も基本的なナビゲーションが作成されますが、色が透明な場合は修正されません。
Navbarの逆クラスの色を追加して黒くする
Navbar-Fixed-Topを追加して上に修正し、Navbar-Fixed-Bottomを追加して底に固定します
Navbar-Static-Topを追加する効果は次のとおりです
<div>
たとえば、ナビゲーションヘッダー、Webサイトのログ、ホームページ、またはWebサイトの名前をクリックしてください
効果は上記のようです
ここでテキストに変更できれば、効果はより良いと思います
2。フォーム
検索、ログインなど、ナビゲーションにフォームを追加することも一般的です
たとえば、上記の私の検索
<form role = "search"> <div> <input type = "text" placeholder = "search"> </div> <button type = "submit"> search </button> </form>
Navbar-Leftクラスがこのフォームを左に配置することを説明する
もちろん、Navbar-Rightクラスもあります
同様に、このようにボタンを追加できます
<ボタンタイプ= "ボタン">サインイン</button>
このようにテキストを追加できます
<p>マークオットーとしてサインイン</p>
このようにリンクを追加できます
<p> as <a href = "＃"> mark otto </a> </p>に署名されました
このようにして、Navbar-RightまたはNavbar-Leftクラスを追加できます
私のナビゲーション
<！ - ナビゲーション - > <div> <div id = "navcontainer"> <nav role = "navigation"> <div> <div> <a href = "＃"> xiansheng library </a> </div> <form role = "search"> <div> <input type = "text" placeholder = "search"> data-toggle = "modal" data-target = "＃register">レジスタ</a> </li> <li> <a data-toggle = "modal" data-target = "＃signin"> login </li> </ul>
効果は次のとおりです
その他のコンテンツについては、学習については記事を参照できます。
ブートストラップはデフォルトのナビゲーションバー効果を実装します
ブートストラップは毎日学ばなければなりません（ii）
ブートストラップは、毎日追加のナビゲーション（Affix）プラグインを学習する必要があります
ブートストラップに関するその他のコンテンツは、特別なトピックにもあります： 「ブートストラップ学習チュートリアル」
上記は、bootstrap3を使用して作られたナビゲーションバーです。みんなの学習に役立ち、自分のナビゲーションバーを作ることを願っています