.net column
.NET開発者のためのブログメディア

Bootstrapでのbuttonの使い方の紹介!|ボタンを作成してみよう

 
Bootstrapでのbuttonの使い方の紹介!|ボタンを作成してみよう
SE
見栄えのいいボタンを作りたいのですが、どんな種類がありますか?
PM
見栄えの良さはデザインの要ですからね。では実際どんな種類があるのか見ていきましょう。

Bootstrapでのbuttonの使い方とは?


今回は、Bootstrapを利用したボタンの作成方法について説明します。

Webページを作成していて何だか見栄えがよくなくて、HTMLやCSSを一生懸命修正して苦労することはないでしょうか?

Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。

ここでは、フォームやリンクなどで利用されるBootstrapのボタンを作成してみましょう。
Bootstrapに興味のある方はぜひご覧ください。

ボタンの種類

Bootstrapでは、ボタンの色やデザインを指定できます。
btn-*で指定します。

See the Pen
bootstrap_button1
by kskumd (@kskumd)
on CodePen.

アウトラインボタン

Bootstrapでは、アウトラインボタンも表示できます。
btn-outline-*で指定します。

See the Pen
bootstrap_button2
by kskumd (@kskumd)
on CodePen.

ボタンの大きさ

Bootstrapでは、ボタンの大きさを指定できます。
btn-*で大きさを指定できます。

blockを指定すると、横幅いっぱいのボタンになります。

See the Pen
bootstrap_button3
by kskumd (@kskumd)
on CodePen.

ボタンの状態

Bootstrapでは、ボタンの状態を指定できます。
「active」を指定することで、ボタンのクリック状態を保持しておくことができます。
「disabled」を指定することで、ボタンを無効状態にできます。

See the Pen
bootstrap_button4
by kskumd (@kskumd)
on CodePen.

トグルボタン

Bootstrapでは、トグルボタンを表示できます。
トグルとは、ボタンをクリックするたびにオン・オフを切り替えられるものです。

See the Pen
bootstrap_button5
by kskumd (@kskumd)
on CodePen.


トグルボタンをクリックすると、アクティブな状態が維持されてボタンの色が濃いままとなります。
もう一度クリックするとアクティブな状態が解除され、ボタンの色が薄くなります。

アイコン付きボタン

Bootstrapでは、アイコン付きボタンを表示できます。

まず、head部に以下を記載します。

次に、
https://fontawesome.com/icons?d=gallery
にアクセスします。
「Free」にチェックを付けて、キーワード検索します。
アイコンを選択し、「i class=」の部分をコピーしてコードに貼り付けます。

See the Pen
bootstrap_button6
by kskumd (@kskumd)
on CodePen.

SE
アイコンもつけられるのですね。いろいろ試してみたくなりました。
PM
それは良かった。実際にコードを書いてどんなデザインがあるのか覚えていきましょう。

Bootstrapを利用したボタンを作成してみよう

いかがでしたでしょうか。Bootstrapを利用したボタンの作成方法について説明しました。

Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags