.NET開発者のためのブログメディア
Bootstrapでのbuttonの使い方の紹介！｜ボタンを作成してみよう
- SE
- 見栄えのいいボタンを作りたいのですが、どんな種類がありますか？
- PM
- 見栄えの良さはデザインの要ですからね。では実際どんな種類があるのか見ていきましょう。
目次
Bootstrapでのbuttonの使い方とは？
今回は、Bootstrapを利用したボタンの作成方法について説明します。
Webページを作成していて何だか見栄えがよくなくて、HTMLやCSSを一生懸命修正して苦労することはないでしょうか？
Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。
ここでは、フォームやリンクなどで利用されるBootstrapのボタンを作成してみましょう。
Bootstrapに興味のある方はぜひご覧ください。
ボタンの種類
Bootstrapでは、ボタンの色やデザインを指定できます。
btn-*で指定します。
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="btn">Button</button> <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> |
See the Pen
bootstrap_button1 by kskumd (@kskumd)
on CodePen.
アウトラインボタン
Bootstrapでは、アウトラインボタンも表示できます。
btn-outline-*で指定します。
|
1 2 3 4 5 6 7 8 |
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> |
See the Pen
bootstrap_button2 by kskumd (@kskumd)
on CodePen.
ボタンの大きさ
Bootstrapでは、ボタンの大きさを指定できます。
btn-*で大きさを指定できます。
blockを指定すると、横幅いっぱいのボタンになります。
|
1 2 3 4 |
<button class="btn btn-success btn-sm">Small</button> <button class="btn btn-success">Default</button> <button class="btn btn-success btn-lg">Large</button> <button class="btn btn-success btn-block">Block level button</button> |
See the Pen
bootstrap_button3 by kskumd (@kskumd)
on CodePen.
ボタンの状態
Bootstrapでは、ボタンの状態を指定できます。
「active」を指定することで、ボタンのクリック状態を保持しておくことができます。
「disabled」を指定することで、ボタンを無効状態にできます。
|
1 2 3 |
<button class="btn btn-success">Normal</button> <button class="btn btn-success active" aria-pressed="true">Active</button> <button class="btn btn-success" disabled>Disabled</button> |
See the Pen
bootstrap_button4 by kskumd (@kskumd)
on CodePen.
トグルボタン
Bootstrapでは、トグルボタンを表示できます。
トグルとは、ボタンをクリックするたびにオン・オフを切り替えられるものです。
|
1 2 3 4 5 6 7 |
<button class="btn btn-success">No Toggle</button> <button class="btn btn-success" data-toggle="button" aria-pressed="false"> Toggle1 </button> <button class="btn btn-success active" data-toggle="button" aria-pressed="true"> Toggle2 </button> |
See the Pen
bootstrap_button5 by kskumd (@kskumd)
on CodePen.
トグルボタンをクリックすると、アクティブな状態が維持されてボタンの色が濃いままとなります。
もう一度クリックするとアクティブな状態が解除され、ボタンの色が薄くなります。
アイコン付きボタン
Bootstrapでは、アイコン付きボタンを表示できます。
まず、head部に以下を記載します。
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> |
次に、
https://fontawesome.com/icons?d=gallery
にアクセスします。
「Free」にチェックを付けて、キーワード検索します。
アイコンを選択し、「i class=」の部分をコピーしてコードに貼り付けます。
|
1 2 3 |
<button type="button" class="btn btn-outline-primary"><i class="fas fa-database"></i> 新規登録</button> <button type="button" class="btn btn-outline-success"><i class="fas fa-cog"></i> ユーザー設定</button> <button type="button" class="btn btn-outline-danger"><i class="fas fa-camera"></i> 写真</button> |
See the Pen
bootstrap_button6 by kskumd (@kskumd)
on CodePen.
- SE
- アイコンもつけられるのですね。いろいろ試してみたくなりました。
- PM
- それは良かった。実際にコードを書いてどんなデザインがあるのか覚えていきましょう。
Bootstrapを利用したボタンを作成してみよう
いかがでしたでしょうか。Bootstrapを利用したボタンの作成方法について説明しました。
Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。
ぜひご自身でソースコードを書いて、理解を深めてください。
