1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。

Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。
今回はBootstrap4を使ったボタンの作り方を紹介していきたいと思います。

ボタンの作り方の基本

ではまずボタンの作り方の基本を紹介していこうと思います。
「btn」というクラスと、ボタンのデザインやサイズを示すクラス(btn-xxxx)と組み合わせて使うことで、色々なパターンのボタンを作ることができます。

<button class="btn btn-primary" type="button">buttonタグ</button>
<button class="btn btn-primary btn-lg" type="button">buttonタグ</button>
<button class="btn btn-primary btn-sm" type="button">buttonタグ</button>

上の例では、buttonタグを使いましたが、aタグやinputタグも使うことができます。

<button class="btn btn-primary" type="button">buttonタグ</button>
<input class="btn btn-primary" type="button" value="Inputタグ">
<a class="btn btn-primary" href="#" role="button">aタグ</a>

色、デザインの指定

色の指定をしてみましょう。
次の例をご覧ください。

<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>

また、アウトラインデザインのボタンを作ることもできます。

<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>

サイズの指定

.btn-lg, .btn-sm, .btn-blockで、ボタンのサイズを指定することもできます。
また、.btn-blockについては、「btn-lg」や「btn-sm」とも組み合わせることが可能です。

<button type="button" class="btn btn-primary btn-lg">大きいボタン</button>
<button type="button" class="btn btn-primary btn-sm">小さいボタン</button>
<button type="button" class="btn btn-primary btn-lg btn-block">幅いっぱい</button>

状態の指定

ボタンの状態を指定することもできます。
まず「active」というクラスを使うことで、ボタンを押された状態に保っておくことができます。
また、buttonタグのdisabled属性を使うことで、そのボタンを無効状態にしておくことができます。
しかしボタンにaタグを使用している場合、クラスに「disabled」を使う必要があります。

<button type="button" class="btn btn-primary active" aria-pressed="true">アクティブ</button>
<button type="button" class="btn btn-primary" disabled>無効なボタン</button>
<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">無効なボタン</a>

トグル ( toggle )

トグルとは、ボタンの ON OFF を切り替えられるようにするものです。
ボタンの初期値をONにする場合は、activeクラスと、aria-pressed="true"を使います。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
	切り替え
</button>
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
	切り替え
</button>

まとめ

Bootstrap4にはボタンで使える様々なクラスが含まれており、組み合わせることでより多くのパターンのボタンを作ることができます。
今回はボタンのサイズや色などの指定方法を紹介しましたが、さらにBootstrap4にはボタングループという機能も備わっており、それを使うことで複数のボタンをまとめることもできます。
ボタングループについては後日紹介する予定です。

興味のある方はぜひお試しください。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

文字を表示するクラスを作ろう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

コメントをどうぞ!

メールアドレスが公開されることはありません。