PR
bootstrap@5.3.0のデザインスタイルシート適応

ボタン＆バッジ色(Bootstrap)ｖ5.0.2/ｖ5.3.x

Bootstrap
BootstrapHTML
Bootstrap5Bootstrap5.3CSSHTMLカラー
スポンサーリンク
このページは英語が苦手なナナヨが、フロントエンドライブラリ Bootstrapを
快適に使う為、作ったメモページです。
悪戦苦闘する過程の中で、得たヒントを少しでも、参考にしていただけると幸いです。
詳しく知りたい方は、ネット検索もしくは、こちらのリンクからどうそhttps://getbootstrap.jp/

Bootstrapは、登場してからずっと更新され続けています。
コードをコピーする際は、必ず使用しているバージョンをきちんとご確認ください。
バージョンによっては、クラス名の確認また書き換えだけで、大変なことになる場合もあります。（私がそうでした。）

ボタン色のクラス名

通常のボタン色

HTMLソースコードの書き方no
<button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
ブラウザ表示

基本設定されているボタンの色の指定クラス名一覧です。

CSSクラス名表示見本

class=”btn btn-primary rounded-pill px-3″

class=”btn btn-secondary rounded-pill px-3″

class=”btn btn-success rounded-pill px-3″

class=”btn btn-danger rounded-pill px-3″

class=”btn btn-warning rounded-pill px-3″

class=”btn btn-info rounded-pill px-3″

class=”btn btn-light rounded-pill px-3″

class=”btn btn-dark rounded-pill px-3″

class=”btn btn-link rounded-pill px-3″

クラス名の多さから分かるように、ボタンの大きさやスタイルを自分でカスタマイズできる仕様になっています。

基本のスタイルは下記のようになります。

  • btn・・・ボタンの基本的な形
  • btn-primary・・・ボタンの色
  • rounded-pill・・・角のまるみ
  • px-3・・・左右の余白
【参考】ボタンのスタイルシートCSSの中身(例：btn btn-primary rounded-pill px-3))（）
.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
.rounded-pill {
    border-radius: var(--bs-border-radius-pill)!important;
}
.px-3 {
    padding-right: 1rem!important;
    padding-left: 1rem!important;
}

バッジ（アクセントなどにも用います）

バッジは、リンクやボタンの一部としてまた、カウンターとしても、使用することができます。

被リンクのアクセントとしても、使用することがありますので、使用する際にはUIに配慮した使い方をお願いします。

HTMLソースコードの書き方no
<span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">アクセント/通知など</span>
ブラウザ表示
アクセント/通知など
CSSクラス名(色)表示見本

bg-primary-subtle

Primary

bg-secondary-subtle

Secondary

bg-success-subtle

Success

bg-danger-subtle

Danger

bg-warning-subtle

Warning

bg-info-subtle

Info

bg-light-subtle

Light

bg-dark-subtle

Dark

基本のスタイルは下記のようになります。

  • badge・・・バッジの基本的な形
  • bg-primary-subtle・・・バッジの背景色
  • border・・・線の種類/太さ
  • border-primary-subtle・・・線の色
  • text-primary-emphasis・・・テキストの色
  • rounded-pill・・・角のまるみ
【参考】バッジのスタイルシートCSSの中身(例：badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill))（）
.badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}
.rounded-pill {
    border-radius: var(--bs-border-radius-pill)!important;
}
.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle)!important;
}
.text-primary-emphasis {
    color: var(--bs-primary-text-emphasis)!important;
}
.border-primary-subtle {
    border-color: var(--bs-primary-border-subtle)!important;
}
.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
}

一括指定されている、カラーコードはこちら↓

カラーコード(Bootstrap)ｖ5.0.2/ｖ5.3.x
Bootstrap5で指定されているcolor cssで呼び出すカラーコード表。
nanayo74.com
2023.12.04

こちらもよろしく

ナナヨの素材サイト
他の人に、配らない、売らない、偽らない。ナナヨナナヨです。フリー素材提供しています。決まりを守って自由に使ってほしいです。著作権を侵害する行為もダメです利用規約はこちら新着
image.nanayo74.com
タイトルとURLをコピーしました