色々なボタンを表示する

色々なボタンを表示します。なでしこで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/
*/

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ