Bootstrap4のグローバルナビ Navbarで使われるクラス

Bootstrapで用意されているナビゲーションバー、Bootstrap4ではdiv.container-fluiddiv.navbar-header の設定は不要になりました。

基本・・・全幅

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
    </nav>

基本・・・全幅だけどメニューは「container幅」

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

基本・・・「container幅」

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
    </nav>
 </div>

 

ナビゲーションバーを指定 → navbar

レスポンシブ可能な折り畳みのためのクラス → .navbar-expand{-sm|-md|-lg|-xl}

配色クラス

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  ...
</nav>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #E48D8F;" >

 

.fixed-top

.sticky-top

<nav> を <header> で囲むのは不可

ドロップダウン

      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
     </li>

 

応用・・・全幅だけどメニューは「container幅」+黒背景+等間隔に配置

<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #000;">
<div class="container">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-around" id="navbarResponsive">

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Contact</a>
      </li>
    </ul>
  </div>
  </div>
</nav>

 

配置

class=”navbar-nav”に加える場合

中央揃え

<ul class=”nav justify-content-center”>

</ul>

右寄せ

<ul class=”nav justify-content-end”>

</ul>

<ul class=“nav nav-pills nav-fill>

</ul>

<ul class=”nav nav-pills nav-justified”>

</ul>

配置(Flexboxプロパティ使用)

justify-content-start = 水平方向の左寄せ
justify-content-end = 水平方向の右寄せ
justify-content-center = 水平方向の中央寄せ
justify-content-between = 左右余白を開けず等間隔に配置
justify-content-around = 左右に余白を開け等間隔に配置

 

ブレークポイント

navbar-expand-sm = xs画面のモバイルメニュー<576px
navbar-expand-md = smスクリーン上のモバイルメニュー<768px
navbar-expand-lg = md画面のモバイルメニュー<992px
navbar-expand-xl = lg画面のモバイルメニュー<1200px
navbar-expand =モバイルメニューを使用しない
(no expand class) =常にモバイルメニューを使用

コメント

タイトルとURLをコピーしました