最強CSSフレームワーク twitterbootstrap 3つの裏技

2014年10月12日更新 view: 6236 view
photoBy: http://getstarted.main.jp/blog/wp-content/uploads/2012/02/twitterbootstrap-plugin_01-630x299.png

twitterbootstrapってなに?

プログラマーでも一瞬で素敵なデザインを作ってしまえるCSSフレームワーク。 今までもいろんなCSSフレームワークがあった。

  • blueprint.css
  • bluetrip.css

そのフレームワークとの違いは

・jqueryにもきっちり対応。jsを使った後のデザインまで考えて作られている。 ・豊富なアイコン。 ・スマートフォンにも対応したレスポンシブデザイン。

といった所です。 このまとめーたーのサイトも

  • twitter bootstrap
  • cakephp 1.3

で作られているんです。

ダウンロードと設置

http://twitter.github.com/bootstrap/

よりダウンロードして設置することができます。

使い方

まず、公式。 http://twitter.github.com/bootstrap/base-css.html

Greenapple-roomさん http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html

便利なスニペット

「こういうデザインを作る場合はどうしたらいいんだろう?」 をコピペで簡単に作ることが出来る。 http://bootsnipp.com/

さらなる拡張

矢印まで書ける

photoBy: http://bootstrap-arrows.iarfhlaith.com/img/swirl_bg.png

簡単なCSSを指定するだけで矢印を書くことができます。 http://bootstrap-arrows.iarfhlaith.com/

黄金比を作り上げる Goglden Bootstrap

黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrap。

スポンサードリンク
photoBy: http://coliss.com/wp-content/uploads-2012-2d/2012103105.png

詳しい解説 http://coliss.com/articles/build-websites/operation/work/using-golden-ratio-with-bootstrap.html

公式 http://phildionne.github.com/golden-bootstrap/

デモ グリッドやカラム以外に、エレメントのサイズにも適用できます。 http://phildionne.github.com/golden-bootstrap/examples/fixed-layout.html http://phildionne.github.com/golden-bootstrap/examples/fluid-layout.html http://phildionne.github.com/golden-bootstrap/#fluid

もっと使えるアイコンを増やしたい

twitterbootstrapにもたくさんのアイコンがありますが、 さらに使えるアイコンを増やす方法。

Ligature Symbols を Twitter Bootstrap で使えるようにしてみた。 https://twitter.com/kudakurage さんが作成したみたいです。素晴らしい。

使い方 http://d.hatena.ne.jp/Mariyudu/20121021/1350819831

デモ http://mariyudu.net/bs-fonts-demo/

コンボボックス

タグ付けするときに便利かも。
オートコンプリート対応みたい。

http://nicolasbize.github.com/magicsuggest/

以上。 twitterbootstrap での使えそうな拡張などもまとめてみました。

さらにノウハウを学びたい

http://bootsnipp.com/

に色々なスニペットがまとまっています。
コピペするだけで一発で色々なデザインが作成完了。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月20日 ( 水 ) にアクセスが多かった記事はこちら!