bootstrap4.css
.btn-light {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
bootstrap4.css
.btn-light:hover {
color: #212529;
background-color: #e2e6ea;
border-color: #dae0e5;
}
bootstrap4.css
.btn-light:focus, .btn-light.focus {
box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
bootstrap4.css
.btn-light.disabled, .btn-light:disabled {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
bootstrap4.css
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
color: #212529;
background-color: #dae0e5;
border-color: #d3d9df;
}
bootstrap4.css
.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
■ボタン：button：コンポーネント：ボタンの色
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-secondary">btn-secondary</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-light">btn-light</button>
<button type="button" class="btn btn-dark">btn-dark</button>
<button type="button" class="btn btn-link">btn-link</button>
■ナビゲーションバー：navbar：コンポーネント：レスポンシブ対応の設定
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビバーの中にフォーム検索
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="検索キーワード" aria-label="検索キーワード">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビバーの基本例 navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target_div" aria-controls="target_div" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="target_div">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item active"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item active"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーションバー レスポンシブにブランドを左寄せ、切替ボタンを右寄せに表示
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav01" aria-controls="navbarNav01" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav01">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーションバー レスポンシブにブランドを右寄せ、切替ボタンを左寄せに表示
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02" aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNav02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ブランドの表示・非表示 初期設定のナビゲーションバー
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランドを表示</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ボタン：navbar
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<button class="btn btn-light mr-3" type="button">通常のボタン</button>
<button class="btn btn-sm btn-light" type="button">小サイズのボタン</button>
</form>
</nav>