Bootstrapを使ってみた
1. はじめに
はじめまして！エンジニアの工藤です。
今回はbootstrapについて話をしてみたいと思います。
2. Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
これは、JSやCSSの知識があればデザイン知識がないエンジニアでも手軽に今どき風なサイト作れるものです。
レスポンシブデザインにも対応しているそうです。
3. 導入
導入方法は2種類あります。ファイルダウンロードする方法とHTMLにCDNを使った方法(Bootstrapのリンクを記述する方法)です。
今回は、ファイルダウンロードでBootstrapを利用できるようにしたいと思います。
公式サイトでファイルダウンロードが可能となっています。
https://getbootstrap.com/
デザインフォルダを事前に作り、そちらにBootstrapのファイルを置きます。
4. ログイン画面を作る
Webフォームでログイン画面を簡単に作りました。
うーん…、少しダサいですね…。
これを今どき風に頑張ってアレンジしようと思います。
5. Bootstrapを使う
Logintop.aspxファイルにBootstrapフォルダのリンク先を以下のようにする。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../Content/css/bootstrap.css" rel="stylesheet">
<title>ログイン画面</title>
</head>
<body>「ログインする」をボタンにしてみたいと思います。
<asp:LinkButton ID="lbLogin" class="btn btn-primary" runat="server" Text="ログイン" OnClick="lbLogin_Click" />そうすると下の画像ようにボタンが出来上がります。
6. まとめ
前の職場でPHPでBootstrapを使っていたので、ｗ２の環境で利用できるか試そうと今回実践してみました。
デザインファイルを置くだけで簡単にデザインを変更することができ、さらにアイコンが用意されているので、毎回アイコンのデザインを用意する必要がないので非常に楽です。
興味のある人は是非つかってみてください！