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

Web面接の背景

Bootstrap modalの使い方を紹介!|modalを正しく使いこなそう

 
SE
Bootstrap modalの使い方を教えてください。
PM
Bootstrapでのモーダルダイアログの使い方について説明しますので、一緒に見ていきましょう。

Bootstrapでのmodalの使い方とは?


今回は、Bootstrapでのモーダルダイアログの使い方について説明します。モーダルダイアログとは、ボタンクリックなどで表示されるダイアログウィンドウのことです。

ここでは、モーダルダイアログについて、「基本的な使い方」「フェードイン」「センター表示」「フォーム」の4つを紹介します。

基本的な使い方

Bootstrapでのモーダルダイアログの基本的な使い方を紹介します。

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

modal-headerは、タイトルなどを記述するヘッダー部分です。
modal-bodyは、内容を記述するボディ部分です。
modal-footerは、ボタンなどを配置するフッター部分です。

フェードイン

Bootstrapでは、div class=”modal fade”を指定することで、モーダルダイアログがフェードインします。

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

センター表示

Bootstrapでは、modal-dialog-centeredを指定することで、モーダルダイアログをセンターに表示できます。

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

フォーム

Bootstrapでは、モーダルダイアログには、formの要素を記述することもできます。

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

SE
Bootstrapでのモーダルダイアログの「基本的な使い方」「フェードイン」などが理解できました。
PM
使い方が理解できたら、実際にソースコードで指定してみましょう。

Bootstrap modalを正しく使いこなそう

いかがでしたでしょうか。Bootstrapでのモーダルダイアログについて、「基本的な使い方」「フェードイン「センター表示」「フォーム」の4つを紹介しました。

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


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

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

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

Search

Popular

reccomended

Categories

Tags