さっそく使ってみました。Twitter Bootstrap

イマイチ使い方がわからないまま、BootstrapのCSSのページを見つつ少しずつ。
Twitter Bootstrap CSSのページ

classを覚えたりするのが大変そうだけど、Twitter Bootstrapの理解ができてきたらテンプレートを使って一つのサイトを作るのを目標にします。

まずはTwitter Bootstrapのサイトにあるコードを使ってやってみます。
やってみました。⇒ サンプルはこちら

なるほど、グローバルナビがレスポンシブ対応になっています。

さて少し他のものも
テーブルを使ってみたり、画像を円にしてみたり

こちらも ⇒ サンプル

簡単ですね。
今回CSSを一行も書いていません。
<table>にclassをつけてあげて

<table class="table table-border table-hover">
・・・・
</table>

ってすればBootstrapのテーブルができてボーダーができて、マウスホバー時のアクションが追加されます。

ふむー、イマイチわかってないｗ

使っている人が多かったってのもあって自分にはまだわからない便利さがあるんでしょう。

ちょっとレスポンシブっぽいのもやってみました。
サンプルはこちら

こちらは

Twitter Bootstrapのglid systemを参考にしました。

col-xs- ~　Extra small devices Phones (<768px)
col-sm- ~　Small devices Tablets (≥768px)
col-md- ~　Medium devices Desktops (≥992px)
col-lg- ~　Large devices Desktops (≥1200px)

といったようなclassをつけてあげる。

更に、visiable-xsとすると、768px以下のときだけ出てくる。
とかそんな感じにできてしまいます。

もうちょっと使ってみて人気のFlatstrapを使ってみようと思います。

PS.シュミテクトを使い始めて3日目。
奥歯が染みて痛いです。

関連記事

Twitter Bootstrapを使ってみる