Bootstrapでのnavbarの使い方の紹介｜navbarを正しく使いこなそう
- システム
エンジニア - Bootstrapでのnavbarの使い方が知りたいです。
- プロジェクト
マネージャー - 基本的な使い方やドロップダウンリストの作成方法などを解説しますので、一緒に見ていきましょう。
Bootstrapでのnavbarの使い方とは？
今回は、Bootstrapでのnavbarの使い方について説明します。
navbarとは、ナビゲーションバーを表示するものです。
ここでは、以下を紹介します。
・基本的な使い方
・ドロップダウン
・フォーム
・ナビゲーションメニュー
Bootstrapでのnavbarの使い方に興味のある方はぜひご覧ください。
基本的な使い方
Bootstrapでのナビゲーションバーの基本的な使い方を紹介します。
.navbarでナビゲーションバーを表示します。
|
1
2
3
4
5
6
7
8
9
|
<nav class="navbar navbar-dark bg-primary mb-2">
<a href="#" class="navbar-brand">Navbar Primary</a>
</nav>
<nav class="navbar navbar-dark bg-dark mb-2">
<a href="#" class="navbar-brand">Navbar Dark</a>
</nav>
<nav class="navbar navbar-light mb-2" style="background-color:#dd0000;">
<a href="#" class="navbar-brand">Navbar Custom</a>
</nav>
|
See the Pen
bootstrap_navbar1 by kskumd (@kskumd)
on CodePen.
ドロップダウン
Bootstrapでのナビゲーションバーでは、ドロップダウンリストを追加できます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown item1</a>
<a class="dropdown-item" href="#">Dropdown item2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown item3</a>
</div>
</li>
</ul>
</div>
</nav>
|
See the Pen
bootstrap_navbar2 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでのナビゲーションバーでは、ドロップダウンリストを追加できます。
フォーム
Bootstrapでのナビゲーションバーでは、フォームを追加できます。
|
1
2
3
4
5
6
7
8
9
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
|
See the Pen
bootstrap_navbar3 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでのナビゲーションバーでは、フォームを追加できます。
ナビゲーションメニュー
Bootstrapでのナビゲーションバーでは、ナビゲーションメニューを追加できます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<nav class="navbar navbar-dark bg-primary">
<a href="#" class="navbar-brand">Navbar</a>
<button class="navbar-toggler" type="button"
aria-controls="navmenu1"
aria-expanded="false"
aria-label="Toggle navigation"
data-toggle="collapse"
data-target="#navmenu1">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu1">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">menu item1</a>
<a class="nav-item nav-link" href="#">menu item2</a>
<a class="nav-item nav-link" href="#">menu item3</a>
</div>
</div>
</nav>
|
See the Pen
bootstrap_navbar4 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでのナビゲーションバーでは、ナビゲーションメニューを追加できます。
- システム
エンジニア - Bootstrapでのnavbarの使い方について理解できました。
- プロジェクト
マネージャー - navbarの使い方が理解できたら、自分でソースコードを書いて理解を深めていきましょう。
navbarを正しく使いこなそう
Bootstrapでのnavbarの使い方について説明しました。
ここでは、以下を紹介しました。
・基本的な使い方
・ドロップダウン
・フォーム
・ナビゲーションメニュー
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
CSS新着案件New Job
-
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務
月給65万～65万円東京都中央区(新富町駅) -
Webシステム開発/東京都江東区/【WEB面談可】/テレワーク
月給32万～34万円東京都江東区(豊洲駅) -
Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】
月給33万～48万円東京都千代田区(神田駅) -
空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】
月給60万～70万円神奈川県鎌倉市(大船駅) -
空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】
月給50万～60万円神奈川県鎌倉市(大船駅)
関連記事Related Posts
-
Bootstrap modalの使い方を紹介！｜modalを正しく使いこなそう
Bootstrapでのmodalの使い方とは？ 今回は、Bootstrapでのモーダルダイアログの使い方について説明します。モーダルダイアログとは、ボタンクリックなどで表示されるダイアログウィンドウのことです。 ここでは […]
-
BootstrapでのTooltipの使い方とは？Tooltipのオプションも紹介
BootstrapでのTooltipの使い方とは？ 今回は、BootstrapでのTooltipの使い方について説明します。Tooltipとは、要素にマウスオーバーした際に注釈などが表示されるものです。Tooltipには […]
-
Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法
Bootstrapでの左寄せ・中央寄せ・右寄せの方法とは？ 今回は、Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明します。 ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介します。 ・テキスト ・ブ […]
-
Bootstrapのテンプレートを使うメリットとデメリット
Bootstrapのテンプレートを使用すれば、Webサイトデザインの知識やスキルが無くても簡単にサイトのデザインを作ることが可能です。そのため、Bootstrapを利用しているサイトはたくさんあります。この記事では、Bo […]
-
【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで
「Bootstrap」とは、Webアプリケーションの画面デザインを作成するWebフレームワークです。 多くのテンプレートがあり、それを利用して画面を作成することができます。また、多彩な機能があり非常に使いやすいフレームワ […]
