Bootstrapで用意されているナビゲーションバー、Bootstrap４ではdiv.container-fluid, div.navbar-header の設定は不要になりました。
基本・・・全幅
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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幅」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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幅」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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}
配色クラス
|
1 2 3 |
<nav class="navbar navbar-light" style="background-color: #e3f2fd;"> ... </nav> |
|
1 |
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #E48D8F;" > |
最上部に固定
.fixed-top
最上部に達すると固定
.sticky-top
※<nav> を <header> で囲むのは不可
ドロップダウン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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幅」＋黒背景＋等間隔に配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |
中央揃え
<div class=”collapse navbar-collapse justify-content-center” id=”Navber”>
右寄せ
<div class=”collapse navbar-collapse justify-content-end” id=”Navber”>
配置（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) =常にモバイルメニューを使用
コメント