Carpe Diem

  Top > スポンサー広告> HTML > Twitter Bootstrap を使ってみる  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Twitter Bootstrap を使ってみる

2013 - 05/08 [Wed] - 20:42

Bootstrapを用いることで簡単にスタイリッシュなサイトを作成することができます。
ボタンや入力フォームがTwitterのようになり、アコーディオンやモーダルウィンドウなどの実装が非常に簡単になります。

アコーディオンデモ
モーダルデモ

まずはダウンロードします。
Bootstrap


スタイルの変更はBootstrapのみで大丈夫ですが、モーダルなどはjQueryが必要なのでjQueryもダウンロードします。
jQuery

ダウンロードしたら以下のようにHTMLに記述します。
BootstrapはCSSとJavaScriptファイルの2つを。jQueryはJavaScriptファイルを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の使い方

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。