Bootstrapを活用しよう! [ Ⅸ. ナビゲーションバーの作成 ]

皆さん、本日もお疲れ様です。

では、早速本日の内容を確認していきましょう(⌒∇⌒)

Bootstrapを用いたナビゲーションバーの作成

ナビゲーションバーとは??

==============================================

✫ サイトの階層間を移動する際に使われる誘導の為の
   メニューである。

[ サンプルイメージ ]

==============================================

ログイン<モーダル機能なし>

● では、早速上記のサンプルのようなナビゲーションバー
   を作成していきましょう。


[ コード ]

<!--  HTML  -->

<span id="left">◆ナビバー [ ログイン<モーダル機能なし> ] </span>
<br>
<!-- ナビの色 : ブラック[ navbar-dark bg-dark] -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item active ">
        <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" id="co" href="#">事業内容</a>
          <a class="dropdown-item" id="co" href="#">代表挨拶</a>
        </div>
      </li>
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a>
      </li>
    </ul>
  </div>

  <!-- フォーム -->
  <form class="form-inline" id="right">
    <span class="na"> ユーザID : </span>
    <input class="form-control mr-sm-1" type="search">
    <span class="na"> パスワード : </span>
    <input class="form-control mr-sm-1"  type="search">
    <button class="btn btn-primary ma" type="submit">ログイン</button>
  </form>
</nav>    


<!-- CSS (独自に指定したもの) -->

<style>

#right {
    margin-left: 140px;
}

#left {
    margin-left:15px;
}

#co {
    color:black;
}

.na {
    color:white;
    font-size:15px;
    margin-right:5px;  
    margin-left:5px;
}

.vv {
    margin-left:15px;
}

.mo {
    background-color:orange;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

.mi {
    background-color:darkseagreen;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px; 
}

</style>

　　　　　　　　　　　　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ログイン<モーダル機能あり>

[ コード ]

<!--  HTML (ナビバー部分)  -->

<span id="left">◆ナビバー [ ログイン<モーダル機能あり> ] </span>
<br>
<!-- ナビの色 : ブラック[ navbar-dark bg-dark] -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item active ">
        <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" id="co" href="#">事業内容</a>
          <a class="dropdown-item" id="co" href="#">代表挨拶</a>
        </div>
      </li>
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a>
      </li>
    </ul>
  </div>

  <!-- フォーム -->
  <!-- data-target ="##"で表示させるモーダルを指定 -->
  <form class="form-inline">
    <button class="btn btn-primary ma" type="submit" data-toggle="modal" data-target="#modal1"  >ログイン画面を表示</button>
  </form>
</nav>    


<!--  HTML (モーダル部分)  -->

<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="true" data-backdrop="static">   
<!-- modal-dialog-centered : 垂直に中央表示   -->
<!-- .modal-dialog-scrollable : スクロールを可能にする -->
<!-- モーダルが表示された際のコンテンツをclass = "modal-dialog"内に記述 -->
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <!-- class="modal-content"の中に具体的な内容を記述 -->
    <div class="modal-content">
      <!-- モーダルヘッダー -->
      <div class="modal-header">
        <!-- モーダルタイトル -->
        <h4 class="modal-title loca">ログイン画面</h4>
          <!-- モーダルを閉じる「?」ボタン -->
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&#215;</span>
          </button>
          <!-- 「?」: 終 -->
      </div>
      <!-- モーダルの中身 -->
      <div class="modal-body">
        <!-- フォームを作成 -->
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">ユーザーID :</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">パスワード :</label>
            <input type="password" class="form-control" id="recipient-name">
          </div>
          <br>
          <button type="submit" class="bu_login">
            <span id="si">ログイン</span>
          </button>
          <br>
          <br>
          <span class="new"><a href="#">▲ 新規登録はこちら ▲</a></span>
          <br>
          <span class="new"><a href="#">▲ パスワード忘れた/変更はこちら ▲</a></span>
          <br>
        </form>
        <!-- フォーム : 終 -->
      </div>
      <!-- モーダルの中身 : 終 -->
      <div class="modal-footer">
        <!-- モーダルを閉じるボタン -->
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <!-- 終 -->
      </div>
    </div>  
  </div>


<!-- CSS (独自に指定したもの) -->

<style>

#co {
    color:black;
}

.vv {
    margin-left:15px;
}

.mo {
    background-color:orange;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

.mi {
    background-color:darkseagreen;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px; 
}

.ma {
    margin-left:5px;
}

</style>

　　　　　　　　　　　　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

　　　　　　　　　　　      ↓ 　

[ モーダル画面 ]

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

位置の指定 : 左寄せ, 右寄せ, 中央寄せ

● ここでは、ナビゲーションバー内の要素の位置を指定する方法をお教えします。

■ 左寄せ / 右寄せ

[ コード ]

<!--  HTML  -->

<span id="left" >◆ナビバー [ 位置の指定 : 左寄せ( justify-content-start ), 右寄せ( justify-content-end ) ] </span>
<br>
<!-- ナビの色 : ブラック[ navbar-dark bg-dark] -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3 vv">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 左寄せ -->>
  <div class="collapse navbar-collapse justify-content-start ">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" id="co" href="#">事業内容</a>
          <a class="dropdown-item" id="co" href="#">代表挨拶</a>
        </div>
      </li>
    </ul>
  </div>

  <!-- 右寄せ -->>
  <div class="collapse navbar-collapse justify-content-end ">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a>
      </li>
    </ul>
  </div>
</nav>  


<!-- CSS (独自に指定したもの) -->

<style>

#left {
    margin-left:15px;
}

#co {
    color:black;
}

.vv {
    margin-left:15px;
}

.mo {
    background-color:orange;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

.mi {
    background-color:darkseagreen;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px; 
}

</style>

　　　　　　　　　　　　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

■ 中央寄せ

[ コード ]

<!--  HTML  -->

<span id="left" >◆ナビバー [ 位置の指定 : 中央寄せ( justify-content-center ) ] </span>
<br>
<!-- ナビの色 : グレー[ navbar-secondary bg-secondary] -->
<nav class="navbar navbar-expand-sm navbar-secondary bg-secondary mt-3 mb-3 vv">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center ">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>ホーム</b></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link mi dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b><span id="co">事業詳細</span></b></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" id="co" href="#">事業内容</a>
          <a class="dropdown-item" id="co" href="#">代表挨拶</a>
        </div>
      </li>
      <li class="nav-item active">
        <a class="nav-link mo" id="co" href="#"><b>アクセス</b></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link mi" id="co" href="#"><b>問い合わせ</b></a>
      </li>
    </ul>
  </div>
</nav>      


<!-- CSS (独自に指定したもの) -->

<style>

#left {
    margin-left:15px;
}

#co {
    color:black;
}

.vv {
    margin-left:15px;
}

.mo {
    background-color:orange;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

.mi {
    background-color:darkseagreen;
    margin-right:7px;
    width:120px;
    text-align: center;
    border-radius: 10px 10px 10px 10px; 
}

</style>

　　　　　　　　　　　　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

以上、
皆さんの開発における参考になれば幸いです。
また、その他不明点など御座いましたら、コメントして頂ければと思います。
確認次第、対応させて頂きます。

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

 【Twitter】

  https://twitter.com/so_last_family
  twitter.com

【Instagram】

  www.instagram.com

===========================================