このエントリーをはてなブックマークに追加
Facebook にシェア
[`evernote` not found]
LINEで送る

IDEA*IDEAさんのサイトでなかなか面白そうなフレームワークが紹介されていました。


デザインが苦手なWebサービス開発者に朗報！今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件

Twitter社が提供しているCSSで作られたフレームワークで使い勝手がいい感じなのですが、導入がやや面倒だったので少し紹介したいと思います。

１．本体のダウンロード
本体は下記よりダウンロードできます。
Twitter Bootstrap

右にあるBootstrap on GitHubのアイコンをクリックした後に、Downloadsのアイコンをクリックし好きな方の拡張子でダウンロードします。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊色々設定を変更する予定がある人向け＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
２．Less.jsのダウンロード
BootstrapはCSSを色々拡張して表現するためにLESSという機能を利用しています。これをJavascriptで使えるようにするless.jsをダウンロードします。
less.jsのダウンロード

３．htmlファイルの作成
では早速フレームワークを使用する準備をしましょう。
libをフォルダ毎使う場所にコピーして、less.jsもコピーします。今回はindex.htmlとless.jsを同じフォルダに。その下にlibフォルダを作成しました。
では、index.htmlを作成して以下のように記述します。

<html>
    <head>
            <link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
            <script src="less.js"></script>
    </head>
    <body>
    </body>
</html>

先にbootstrap.lessを読み込んでから、less.jsを読み込みます。
こうすることでless.jsがlessファイルをコンパイルしてくれます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

と、ドキュメントを必死に調べながら作成していたのですが、後から気が付いたのですが初期値で使うだけなら
bootstrap-1.0.0.cssというファイルを読み込むだけでOKです。headに

<link rel="stylesheet" href="bootstrap-1.0.0.css" type="text/css" />

これだけでOKです。これでフレームワークの機能が全て使えるみたいです。もうちょい早く気が付きたかった。

４．実際に使う。
フレームワークなので、これを導入しただけではなにも起きません。
たとえば

 <div class="container-fluid">
	<div class="sidebar">
	サイドバー
	</div>
	<div class="content">
	コンテンツ
	</div>
 </div>

とクラスを追加したDIVを挿入すると、サイドバーとコンテンツの領域を分けることができます。
もう少し細かく分けたい場合はspanX clolumnsのクラスで細かく区切ることもできます。（このあたりはドキュメントを参照にすると細かく載っています）

また、ナビゲーションメニューとして
トップナビ風のtopbar　タブメニュー風のtabs 丸ボタン風のpills 等が用意されています。

更に、アラートメッセージ用にerror warning success infoの四種類のメッセージカラーも用意されていて色々使い勝手が良さそうです。
まださわったばっかりなので、色々試してみたいと思います。