Bootstrap

【Bootstrap4】navbarでレスポンシブデザインをしよう

Bootstrapのnavbarにはレスポンシブデザインを実装するためのクラスが用意されています。

スマホ用のハンバーガーメニューと、パソコンの画面用のグローバルメニューを同時に実装できます。レスポンシブデザインを実装する方法を解説します。

navbarでレスポンシブデザインをしよう

Bootstrapではパソコン用の表示、スマホ用の表示を同時に実現することができます。

navbarでもメニュー表示の切り替えを設定することができます。

小さい画面幅ではハンバーガーメニュー、大きな画面幅では横並びのグローバルメニューを表示し、設定しておけば画面幅に応じて自動で表示を切り替えてくれます。

特に非表示の設定をしない限り、パソコンとスマホで表示のされ方が変わるだけで、表示する項目は変わりません。

navbarの横並びのグローバルメニュー

パソコン用の表示としてBootstrapで用意されている横並びのグローバルメニューは、以下のようなデザインです。

パソコン用navbarの表示

メニューの項目が横並びで表示されます。

navbarのスマホ用ハンバーガーメニュー

スマホ用の表示としてBootstrapで用意されているハンバーガーメニューは、以下のようなデザインです。

スマホnavbar

右の三本の線が重なったボタンを押すと、ドロップダウンのようにメニューが表示されます。

navbarのトグラークラスの使用方法

navbarのトグラークラスの使用方法を解説します。

<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarsExample01">・・・中略・・・</div></nav>

buttonタグの部分がスマホ用のハンバーガーメニューのボタン部分で、その下のdivクラスの内部がパソコンやスマホで表示されます。

Bootstrapのトグラーのプラグインはボタンのdata-targetクラスの名前と一致する名前を持つidの部分を表示・非表示と切り替えるようです。

上記例ではnavbarsExample01というdatar-targetのボタンを押し、同名のidのdivタグの中身が表示されます。

上記例でbuttonに付与されているaria-controlsとaria-expanded、aria-labelはクラスはBootstrap固有のものではなく、HTMLのものです。

aria-controls 指定した要素が値に指定した要素を制御することを示す属性。
aria-expanded 要素の開閉の状態を示すための属性。true(開いている状態)、false(閉じている状態)
aria-label aria-label属性は要素に対してラベル付けを行うことができる属性。

collapseについてはこちら。

トグラークラスの書き方について

トグラークラスの表示の書き方を紹介します。

  • 常にハンバーガーメニュー
  • 常に横並びのグローバルメニュー
  • 画面幅に応じてグローバルメニューとハンバーガーメニューが切り替わるメニュー

常にハンバーガーメニューを表示する場合

特に何も指定しない場合、画面幅に関係なく常にハンバーガーメニューが表示されます。メニューの項目が下にスライドして表示されます。

<nav class="navbar navbar-dark bg-dark">

常に横並びのグローバルメニューを表示する場合

画面幅に関係なく、常に横並びのグローバルメニューを表示する場合は、navbar-expandというクラスを付け加えます。

<nav class="navbar navbar-expand navbar-dark bg-dark">

画面幅に応じメニューの表示方法を切り替える場合

画面幅に応じてハンバーガーメニューを表示したり、PC用に横並びにしたり切り替えて使用する場合は、navbar-expalnd-●●のようなクラスを加えます。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">

小さい画面幅ではハンバーガーメニュー、md、lgなど、自分で指定した画面幅の広さを越えるとグローバルメニューでの表示に切り替わります。

Bootstrapでよく見るmd、lgは何のために使うの?Bootstrapでよくmd、lgなどの文字が書かれていることがあります。ナビゲーションバーやグリッドシステムなどで使われています。書か...

navbarの関連記事について

Bootstrap関連の記事をほかにも書いています。

Bootstrapのnavbarの挙動について詳しく知りたい

navbarに関係するクラスで、どんなcssが設定されているのか詳しく知りたい方はこちらの記事をどうぞ。

適当なコピペを脱却したい中級者向けの記事となっております。

Bootstrap4のnavbarを極めるBootstrap4でグローバルナビを簡単に作成するクラスであるnavbarを使用するとき、毎回Bootstrap公式サイトの凡例をコピ...