share facebook facebook twitter menu hatena pocket slack

2012.03.06 TUE

Twitter Bootstrapを使ってみる (フォーム編)

木村 圭佑

WRITTEN BY 木村 圭佑

こんにちは。
職人見習いの木村です。

今、流行の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が用意されています。

さらに、下記のような表現も簡単に実装することができます。

http://




px



最後に、ボタンにも色々なバリエーションがあります。

 





ここまでできればフォーム周りは一通り問題ありません。
Twitter Bootstrapにはフォーム以外にもいろいろな機能があるので、次回はほかの機能も試してみようと思います。

※この記事は、なかの人(moresmileman)が書いています。

木村 圭佑

木村 圭佑