Bootstrap4 navbar 2段に

bootstap4で nav と navbarを2段にしたかったがどうも悩んだので、備忘録。

やりたかった事。Bootstrap4でNavbarを2段にしたかった。


結論から書くとこんな感じ。

http://kato.space/demo/bootstrap4/navbar-demo08.html

コードはこちら

 

子要素のFlex指定すればよかっただけ。

 

ようはこんな感じね。


Flexユーティリティについては公式で、Utilitiesに書いてある。
https://getbootstrap.com/docs/4.1/utilities/flex/

 

以下悩んだ迷走記録(´・ω・)ス

 

nav

まずは基本を確認。

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

  • ナビゲーションバーは、レスポンシブ可能な折り畳みのために .navbar-expand{-sm|-md|-lg|-xl} 入りの包括用の .navbar と配色クラスが必要。
  • ナビゲーションバーとそのコンテンツは、デフォルトでは幅一杯に表示する。オプションのコンテナを使用して、横幅を制限可能。
  • 空白やFlexユーティリティクラスを使用して、ナビゲーションバー内の間隔や配置を制御。
  • ナビゲーションバーはデフォルトでレスポンシブするが、簡単に修正して変更可能。レスポンシブの動作はJavaScriptの折り畳みプラグインに依存。
  • ナビゲーションバーは、印刷時にはデフォルトで非表示になっているので、それらを強制的に印刷させる場合は、.navbar に .d-print を追加する。詳しくは表示ユーティリティクラスを参照すること。
  • 支援技術のユーザーにランドマーク領域として明示するには、<nav> 要素を使用してアクセシビリティを確認するか、より一般的な <div> などの要素を使用して、すべてのナビゲーションバーに role="navigation" を追加すること。

まずはデモをそのまま動作させる。

デモ01  http://kato.space/demo/bootstrap4/navbar-demo01.html

 

シンプルに変更変更

デモ01  http://kato.space/demo/bootstrap4/navbar-demo02.html

Navbarを使うには、クラスに.navbar .navbar-expand-{sm、md、lg、xl}と、カラーの指定必要らしい。

.navbar-expand-だが、試しに表示させてみる。
デモ http://kato.space/demo/bootstrap4/navbar-demo04.html

カラースキームは
暗い背景 navbar-dark
明るい背景 navbar-light
bg-{ dark、info、primary }

単純に.navbarとcollapseだけで構成してみる。

http://kato.space/demo/bootstrap4/navbar-demo05.html

そうか.navbar .navbar-expandで内包させてそれ以下の幅サイズになったら、.navbar .navbar-expand-

これは内包してそのサイズになるとトグルを出して、collapseさせるのか。
クラス collapse navbar-collapseのを消すのか。

  • button:に .navbar-toggler
  • data-toggle.collapse
  • data-target:折むメニューのIDかクラス指定
  • aria-controls:折むメニューのIDかクラス指定
  • aria-expanded:aria-expanded属性は要素の開閉の状態を示すためのWAI-ARIAの属性です。(参考
    要素が折りたたまれている場合はfalse、展開時はtrue。自動で切り替る。
  • aria-label:ラベル属性は画像や文字に情報を付けたいときとかに使う

じゃ、これで普通に文字を入れてみる。
http://kato.space/demo/bootstrap4/navbar-demo06.html

じゃ、ここで基本のものを2段にしてみる。
nav と navbarに  displayflex;があるのか、

だとすると………

方法はnavbarにクラスを上書き
デモ:http://kato.space/demo/bootstrap4/navbar-demo07.html

@参考
Bootstrap4】navbarを2段にしてみた。
http://song-of-life.hatenablog.com/entry/2017/06/03/235015


しかし行いたいのはこれではなくて……こうしたい。
デモ:http://kato.space/demo/bootstrap4/navbar-demo08.html

つまり2段にしたいところに、flex-md-columnとか Flexで指定すればいいのか。
mdはいらないから、

こちら
デモ:http://kato.space/demo/bootstrap4/navbar-demo08.html

コードはこちら

 

 

Brandの部分

画像に

ロゴもここに入れるのだろう。

入れてみる。
デモ:http://kato.space/demo/bootstrap4/navbar-demo03.html

 

おっぱい!

 

 

Follow me!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA