//色々なボタンを表示する //2021/08/27 DOM親要素に『 <!-- Bootstrap CSS --> <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/ */