1件のコメント

超便利!Twitter BootstrapでさくさくWeb開発

新年度です!

新入学、新入社を迎えるみなさん、おめでとうございます。
エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか?

カッコよくって統一的なデザインがほしい!でもデザインセンスないし…実は私もそうでした。
ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます!

Twitter Bootstrapとはなにか

Twitter Bootstrap
CSSのフレームワークです。Web上に使ってみた!スゲー!等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい(クラス名など結構ガラっと変わっています)。今回ご説明しているのは、Twitter Bootstrap 2についてです。

サイトにTwitter Bootstrapを導入しよう!

一番簡単な導入方法は、CSSをダウンロードして設置するだけです!
公式サイトのデカ白ボタン「Download Bootstrap」をクリックし、zipファイルをダウンロードしましょう。
解凍してできたcss、img、jsのディレクトリごと設置します。

function parseOutputBuffer($buf) {
    global $portal_small_code, $portal_gzcompress;
    global $PHP_SELF, $HTTP_ACCEPT_ENCODING;

    // cleaning out the code.
    if($portal_small_code && !$portal_gzcompress) {
        $buf = str_replace(" ", "", $buf);
        $buf = str_replace("", "", $buf);
        $buf = str_replace(chr(13), "", $buf);
    }
}

レイアウト

Twitter Bootstrapが提供しているレイアウトは、大きくわけて二つです。
固定幅レイアウト:940pxからなる固定幅レイアウトです。
流動幅レイアウト:画面のサイズに併せて流動的なサイズになるレイアウトです。

これらをコンテナと呼びましょう。
コンテナの中に、ボックスを置くようにコンテンツを置きたい場合があります。そこで使うのがgridです。
グリッドは横幅を12個に分割しており、span1〜span12で表します。

Google_Old_Style

Google_Old_Style

Preタグで囲むコード

エンジニアの皆さんなら、ブログにコードを書きたいですよね。
Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。

02038_morningmist_1920x1080


1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA