[編集モード] 色々なボタンを表示する

色々なボタンを表示します。なでしこでBootstrapの機能を使用しています。

//色々なボタンを表示する
//2021/08/27

DOM親要素に『

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

色々なボタン<br>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<br><br>

色々な効果<br>
<a href="#" class="btn btn-primary">標準</a>
<a href="#" class="btn btn-outline-primary ">枠線</a>
<a href="#" class="btn btn-primary btn-lg">大きめ</a>
<a href="#" class="btn btn-primary btn-sm">小さめ</a>
<button type="button" class="btn btn-lg btn-primary" disabled>無効</button>
<br><br>

Blockボタン<br>
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>
<br>

中央揃え<br>
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>
<br>

Blockボタン／右揃え<br>
※表示幅が小さいときは、Block表示になります。<br>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>
』をHTML設定します。

/*
・Buttons (ボタン)
　https://getbootstrap.jp/docs/5.0/components/buttons/
*/

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 色々なボタンを表示する

素材のアップロード