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

Bootstrapのサンプルとは?Bootstrapのサンプルについて解説!

 
Bootstrapのサンプルとは?Bootstrapのサンプルについて解説!
SE
Bootstrapのサンプルを使用するとどのようなことができるのでしょうか。
PM
Bootstrapを利用すると、良いデザインのページを作成できます。

Bootstrapのサンプルとは?


今回は、Bootstrapのサンプルを紹介します。
Bootstrapを利用すると、良いデザインのページを作成できます。

ここでは、
・ボタン
・テーブル
・アラート
・ツールチップ
のサンプルを紹介します。

Bootstrapに興味のある方はぜひご覧ください。

ボタン

Bootstrapでのボタンのサンプルを紹介します。

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

btn-primary、btn-secondary、btn-successなどでボタンの色を指定できます。

また、btn-sm、btn-lg、btn-blockなどでボタンのサイズを指定できます。

テーブル

Bootstrapでのテーブルのサンプルを紹介します。

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

table-stripedを指定すると、ストライプのテーブルになります。

thead-darkを指定すると、ヘッダの色を指定できます。

アラート

Bootstrapでのアラートのサンプルを紹介します。

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


alert-primary、alert-secondaryなどを指定すると、アラートの色を指定できます。

ツールチップ

Bootstrapでのツールチップのサンプルを紹介します。
ツールチップを使用するには、JavaScriptに以下のように記述してください。

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


data-placementを指定すれば、ツールチップの表示場所を変更できます。

SE
Bootstrapのサンプルを使用すると、良質なデザインを作ることができるのですね。
PM
こちらで紹介したサンプル以外にもさまざまな種類がありますので、ご自身に必要なサンプルを探してみてください。

Bootstrapのサンプルについて知ろう

Bootstrapのサンプルを紹介しました。
Bootstrapを利用すると、デザインの良いページを作成することができます。

ここでは、
・ボタン
・テーブル
・アラート
・ツールチップ
のサンプルを紹介しました。

紹介したサンプル以外にも様々な要素がありますので、調べてみてください。


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

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

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

Search

Popular

reccomended

Categories

Tags