navbarの使い方

はじめに

bootstrapの「navbar」クラスの使い方を学んだので、学んだ内容を記録する。

基本的な書き方

<nav class="navbar navbar-light">
  <a href="#" class="navbar-brand">brand</a>
</nav>

色を変える

<nav class="navbar navbar-dark bg-primary">
  <a href="#" class="navbar-brand">brand</a>
</nav>

メニューリンクを表示する

<nav class="navbar navbar-light navbar-expand">
  <a href="#" class="navbar-brand">brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Link1</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link2</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link3</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link4</a></li>
  </ul>
</nav>

メニューリンクをハンバーガーメニューにする

<nav class="navbar navbar-light navbar-expand-md">
  <a href="#" class="navbar-brand">brand</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="menu" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">Link1</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Link2</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Link3</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Link4</a></li>
    </ul>
  </div>
</nav>

入力フォームを表示する

<nav class="navbar navbar-light">
  <a href="#" class="navbar-brand">brand</a>
  <form action="#" class="form-inline">
    <input type="text" class="form-control" placeholder="name...">
    <input type="password" class="form-control ml-1" placeholder="password...">
    <input type="submit" class="btn btn-primary ml-1" value="Login">
  </form>
</nav>

任意の文字列を表示する

<nav class="navbar navbar-light">
  <a href="#" class="navbar-brand">brand</a>
  <span class="navbar-text">ようこそ、ゲストさん</span>
</nav>

画面上部にnavbarを固定する

<navbar class="navbar-light fixed-top">
  <a href="#" class="navbar-brand">brand</a>
</navbar>

感想

だいぶnavbarについてわかってきた。
フォームやポップアップの書き方についても、上記と同様に整理したい。

参考

https://getbootstrap.com/docs/4.1/components/navbar/
http://bootstrap3.cyberlab.info/components/navbar.html
https://cccabinet.jpn.org/bootstrap4/components/navbar