作品 ID: 731

色々なボタンを表示する

公開

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

ソース

プログラム

//色々なボタンを表示する
//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/
*/

作品について

作品情報

作品を編集

くれあ作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: Bootstrap
利用バージョン: 3.2.25
アクセス数(累計): 12
アクセス数(今月): 12
更新日時: 2021/08/27 20:51 編集: 2021/08/28 00:35

⭐

作品公開情報

交流

コメントを取得中...