BootStrap 4.1.3 で配布されるcss の bg-* の色見本
どこかにあるのかも知れないけど、探すのが面倒だから。。。
( 流行り、廃りでもう BootStrap 使うというのは減少してるかな?所詮、CSS書けない人の為!のコンセプトみたいだし。。)
bg-* | color | default | :hover or :focus | |
bg-primary | #007bff | #0062cc | ||
bg-secondary | #6c757d | #545b62 | ||
bg-success | #28a745 | #1e7e34 | ||
bg-info | #17a2b8 | #117a8b | ||
bg-warning | #ffc107 | #d39e00 | ||
bg-danger | #dc3545 | #bd2130 | ||
bg-light | #f8f9fa | #dae0e5 | ||
bg-dark | #343a40 | #1d2124 | ||
bg-white | #ffffff | |||
bg-transparent | transparent |
カスタマイズとして、任意の bg-* をCSSとして記述すれば、それが利用できる。
例)
<link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .bg-Cochineal-Red { background-color: #ae2b52 !important; } a.bg-Cochineal-Red:hover, a.bg-Cochineal-Red:focus, button.bg-Cochineal-Red:hover, button.bg-Cochineal-Red:focus { background-color: #e390a9 !important; } </style>
<nav class="navbar navbar-expand-lg navbar-dark bg-Cochineal-Red"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav>