こんにちは。
職人見習いの木村です。
今、流行のTwitter Bootstrapを使ってみます。
Twitter BootstrapとはTwitter謹製のCSSフレームワークで、これを使うことでTwitterライクなデザインが簡単に実現できるというツールです。
デザインをすることができないプログラマには重宝されるツールです。
まず、Bootstrap,from Twitterから一式をダウンロードします。
ファイルを解凍するとcss,img,jsの3ファイルがあるのでこれらをプロジェクトに入れ込みます。
まず、基本となるcssが必要なのでcssを読み込んでおきます。
これでまずは準備完了です。
機能がたくさんあるので、今回はフォームレイアウトの一部を紹介します。
まずは普通にテキストボックスを置いてみます。
テキストボックスを配置しただけで、デザインされたものになります。 さらに、フォーカスすると周りが青く光り、フォーカスされている感じがわかりやすくなっています。
これはかなり期待できるということで、次にサイズを変えてみます。
これは、classを指定することで容易に変更することができます。
サイズの指定classは大まかに2種類あって、span1～10とinput-small～xxlargeがあります。
spanの方が等間隔にサイズを広げることができます。
また、フォームの形も変更することができます。
classにsearch-queryを指定することで、丸みを帯びたボックスができます。
さらに、バリデーションエラー等が起きた際にわかりやすく装飾することもできます。
バリデーションチェックは、warning、error、successの3種類のclassが用意されています。
さらに、下記のような表現も簡単に実装することができます。
最後に、ボタンにも色々なバリエーションがあります。
ここまでできればフォーム周りは一通り問題ありません。
Twitter Bootstrapにはフォーム以外にもいろいろな機能があるので、次回はほかの機能も試してみようと思います。
※この記事は、なかの人（moresmileman）が書いています。
