「Bootstrap4最速の入門書(導入/コンポーネントその1)」の感想・備忘録3

「Bootstrap4最速の入門書(導入/コンポーネントその1)」の感想・備忘録2の続き

ボタン

ボタン

.btnと.btn-primaryなどを指定する。

.btn-linkはテキストリンクとなる。
.btn-lg, btn-smで大きさを変更可能。
.btn-outline-primaryなどを指定するとアウトラインボタンとなる。 (背景なし、ボーダーあり)

<button type="button" class="btn btn-primary btn-lg">btn-primary</button>
<button type="button" class="btn btn-link">btn-link</button>
<button type="button" class="btn btn-outline-info btn-sm">btn-outline-info</button>
<!-- inputタグやaタグでも使用可能 -->

ボタングループ

.btn-groupで複数の.btnを囲むとグループ化が可能。

<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>

画像

  • .img-fluid: レスポンシブ
  • .img-thumbnail: 枠線
  • .float-start .float-end: 左右寄せ
    bootstrap4では.float-left, float-rightだったが、bootstrap5では.float-start .float-endに変わった。
  • .rounded: 角が丸くなる。
  • .rounded-circleで円、.rounded-pillでカプセル型になる。
<img src="./sample.jpg" class="img-fluid">
<img src="./sample2.jpg" class="img-thumbnail float-start">
<img src="./sample2.jpg" class="img-thumbnail float-end">
<img src="./sample2.jpg" class="rounded">
<img src="./sample2.jpg" class="rounded-circle">

スピナー

スピナー

.spinner-borderまたは.spinner-growを指定する。
.text-primaryなどを一緒に指定することで色を変更可能。
.spinner-border-smまたは.spinner-grow-smを一緒に指定することで、大きさを変更可能。

<div class="spinner-border"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border spinner-border-sm text-primary"></div>
<div class="spinner-grow text-danger"></div>

ボタンの中のスピナー

.btnの中に.spinner-borderと.spinner-border-smを指定したspanを含める。
(グロースピナーの場合は.spinner-growと.spinner-grow-sm)
「読み込み中」などの場合は、.btnにdisabledをつけるのが一般的。

<button class="btn btn-primary" disabled>
  読み込み中...<span class="spinner-border spinner-border-sm"></span>
</button>

プログレスバー

.progressの中に.progress-barを含める。

  • .progressにstyle=”height: 10px”などで高さを指定。
  • .progressに.bg-primaryなどで背景色を変更可能。
  • .progress-barに.bg-primaryなどでバーの色を変更可能。
  • .progress-barに.w-25やstyle=”width: 100px”などで幅を指定。
  • .progress-barに.progress-bar-stripedでストライプ。
  • .progress-bar-stripedに.progress-bar-animatedでストライプのアニメーション化。
<div class="progress bg-secondary mb-2" style="height: 40px">
  <div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-success w-50 progress-bar-striped">50%</div>
  <div class="progress-bar bg-info w-25 progress-bar-animated">25%</div>
</div>

ディスプレイ

  • .d-inline
  • .d-block
  • .d-none
  • .d-inline-block
  • .d-flex

ブレークポイントの指定も可能。
例えば.d-nodeと.d-md-blockで768px以上の場合のみ表示となる。
他にも.d-table, .d-table-cell, .d-table-row, .d-inline-flexなどがある。

<span class="d-block bg-warning">d-inline</span>
<div class="d-md-none bg-info">d-md-none</div>

フォーム

フォーム

divに.form-groupを指定する。
.form-groupの中にlabelや.form-controlのinput, select, textareaなどを含める。
.form-controlに.form-control-lgまたは.form-control-smでサイズを変更可能。

ァイル入力はbootstrap4では.form-control-fileだったが、bootstrap5では他の部品と同様に.form-controlを指定するようになった。
<input type="file" class="form-control">

<div class="form-group">
  <label for="name">名前</label>
  <input type="text" class="form-control" id="name">
  <label for="kana">フリガナ</label>
  <input type="text" class="form-control form-control-lg" id="kana">
  </label>
</div>

チェックボックス・ラジオボタン

.form-groupの代わりに、選択肢毎に.form-checkを指定したdivを記述する。
横並びにする場合は.form-check-inlineも指定する。
labelには.form-check-label、inputには.form-check-inputを指定する。

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="agreement">
  <label for="agreement" class="form-check-label">同意する</label>
  </label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="orange">
  <label for="orange" class="form-check-label">オレンジ</label>
  </label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" id="apple">
  <label for="apple" class="form-check-label">りんご</label>
  </label>
</div>

グリッドシステム

.rowが.col-sm-6などと一緒に指定されることが多い。

bootstrap4では.rowよりもマージンが小さい.form-rowがあったが、bootstrap5では削除された。

<div class="container">
  <div class="row g-3">
    <div class="form-group col-sm-6">
      <label for="hoge1">hoge1</label>
      <input type="text" class="form-control" id="hoge1">
    </div>
    <div class="form-group col-sm-6">
      <label for="hoge2">hoge2</label>
      <input type="text" class="form-control" id="hoge2">
    </div>
  </div>
</div>

インプットグループ

.input-groupのdivの中に.input-group-textのspanを含める。
.input-groupに.input-group-lgまたは.input-group-smでサイズを変更可能。

bootstrap4ではspanの外側に.input-group-prependまたは.input-group-appendが必要だったが、bootstrap5では削除された。

<div class="input-group input-group-lg">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <span class="input-group-text"><input type="checkbox" class="form-check-input"></span>
  <input type="text" class="form-control">
</div>a

バッジ

.badgeと.bg-primaryなどを指定する。
bootstrap4では.badge-primaryなどだったが、bootstrap5では.bg-primaryなどに変わった。
.rounded-pillも指定するとカプセル型になる。

aタグに指定すると、マウスオーバーで変化するリンクを手早く作成することができる。

<span class="badge bg-primary rounded-pill">aaaa</span>
<button class="btn btn-primary">通知 <span class="badge bg-info">10</span></button>
<a href="#">お知らせ <span class="badge bg-dark">4</span></a>
<a href="#" class="badge bg-primary">リンク</a>

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。