読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

Twitter Bootstrap を使ってみる

HTML
Bootstrapを用いることで簡単にスタイリッシュなサイトを作成することができます。 ボタンや入力フォームがTwitterのようになり、アコーディオンやモーダルウィンドウなどの実装が非常に簡単になります。 アコーディオンデモ モーダルデモ まずはダウンロードします。 Bootstrap スタイルの変更はBootstrapのみで大丈夫ですが、モーダルなどはjQueryが必要なのでjQueryもダウンロードします。 jQuery ダウンロードしたら以下のようにHTMLに記述します。 BootstrapはCSSJavaScriptファイルの2つを。jQueryJavaScriptファイルを1つ指定します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen"> </head> <body> <script src="js/jquery-2.0.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> これで使えるようになります。 例えばform要素などを以下のように作成します。 <form method="GET" action="submit.cgi">   氏名:   <input type="text" name="name" size="50">   <br>   性別:   <label class="radio"><input type="radio" name="sex" value="男">男</label>   <label class="radio"><input type="radio" name="sex" value="女">女</label>   <br>   血液型:   <select name="blood-type">     <option value="A型">A型</option>     <option value="B型">B型</option>     <option value="O型">O型</option>     <option value="AB型">AB型</option>   </select>   <br>   自由記述欄:   <br>   <textarea name="freenote" cols="50" rows="5"></textarea>   <br>   <input type="submit" value="送信する" class="btn btn-primary">   <input type="reset" value="リセットする" class="btn"> </form> formtest.png すると入力フォームが光るようになり、ボタンも通常よりポップな感じになります。 ある程度の要素は自動でスタイルが反映されますし、そうでないものもclassを指定すれば様々な設定が可能になります。以下のサイトに多くのExampleが載っているので参考にしてください。 ブートストラップスターターテンプレートv2.0.4 ソース: ブートストラップ用のJavaScript-v2.0.4 Twitter Bootstrapの使い方