🌸 「なでしこ」
>
🍯 「貯蔵庫」
色々なボタンを表示する
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
色々なボタンを表示する 📖
色々なボタンを表示します。なでしこで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
作成日時:
2021/08/27 20:51 (編集: 2021/08/28 00:35)
公開の投稿
⭐
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?