Twitter Bootstrap

twitterとは関係あるようで関係ないようで、ともあれ、「ソレ」っぽくするためのCSSの枠組みである(CSSフレームワーク)

まずはともかくこのページを眺めるべし http://twitter.github.com/bootstrap/examples.html

作っていく

ここではZend Frameworkを絡めながら実際に「まんまtwitter bootstrap」なサイトを組んでみたい。別段Zend Frameworkが必要というわけでもないのだが、なんせこのフレームワークはプロジェクトのイニシャライズで吐き出されるHTMLがクソwなのである意味やりやすい。

とはいえ、キモなのはCSSとjsなのでPHPとか関係なく普通に読める内容にしてゆく予定。

まずはzf create projectでプロジェクトを作成し、zf enable layoutでレイアウトを有効にしただけのブツを作りあげる事。

% zf create project twitter_bootstrap
% zf enable layout 

まあこれ単純なHTMLが出来たと思えばOK

Twitter Bootstrapの組みこみ

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

よりzipをまるっと落として展開するぞと。

% ls bootstrap  
css/  img/  js/

このように、cssとimgとjsという3つのディレクトリを内包している。zend frameworkの場合はpublicの下に置くべし。そうでなければindex.htmlとかから相対参照できるように置けばokよね。

なお、jQueryにも依存するのでこれも置かないといけない。Zend Frameworkの場合はZendX_JQueryを使うと格段に楽なので、これを利用する事とする。最終出力のHTMLを見れば大体理解できるはずなのでZFとか関係ない人はそれを参考にすればOK。っと。

大まかな手順

  1. libraryの中にZendXを入れる
  2. application/configs/application.iniにview resourceの設定を書く(以下)
  3. application/Bootstrap.phpに適当なブートストラップメソッドを書く(以下)
  4. layoutから呼ぶ(以下)

application.ini

@@ -7,6 +7,7 @@
 appnamespace = "Application"
 resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
 
 resources.frontController.params.displayExceptions = 0
+resources.view[] =
 
 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"
 [staging : production]

application/Bootstrap.php

<?php
 
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        ZendX_JQuery::enableView($view);
        $view->jQuery()->setVersion('1.7.1')->enable();
    }
}

application/layouts/scripts/layout.phtml

<html>
  <head>
    <title>Twitter Bootstrap demo</title>
    <?php
    echo $this->jQuery()
            ->addJavaScriptFile($this->baseUrl('/js/bootstrap.js'))
            ->addStylesheet($this->baseUrl('/css/bootstrap.css'))
    ?>
  </head>
  <body>
    <?php echo $this->layout()->content; ?>
  </body>
</html>

なにやらゴチャゴチャになってしまったが、HTML的には以下のようになっていればおk

<html>
  <head>
    <title>Twitter Bootstrap demo</title>
    <link rel="stylesheet" href="/path/to/css/bootstrap.css" type="text/css" media="screen">
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/js/bootstrap.js"></script>
 
  </head>
<body>...</body></html>

この時点でマージンが無効化されるので見た目に多少変化があるはず。

グリッドシステムでレイアウトを組む

グリッドシステムというのは別段Twitter Bootstrapに限った話しではなく一般的なWebレイアウトの考え方らしいよ。それはともかく、画面を12分割するというのが基本的な考え方になるようですよ。

  • 固定型(container)
  • 可変型(container-fruid)

という2種類のレイアウトを組む事が出来るのだすが、ここでは固定型で行こうかなと。これを指定すると画面の横幅が940pxだったかに固定化されます。

組んでみよう

まずはできあがりのイメージを…

http://wiki.catatsumuri.org/example/003/public/

一般的といえば一般的な?ヘッダがあって、左右の分割コンテンツ(左がサイドバー、と)、それにフッタがあるタイプのレイアウトですな。固定幅なのでブラウザを縮小しても縮まない、と。

これに対応する(ZFの)ソースコード(<body>〜</body>のみ)

application/layouts/scripts/layout.phtml

  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h1>Heading 1</h1>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="span3">
        <p>sidebar</p>
        </div>
        <div class="span9">
          <?php echo $this->layout()->content; ?>
        </div>
      </div>
    </div>
      <footer>
        <p>footer footer footer footer footer footer footer
        footer footer footer footer footer footer footer </p>
      </footer>
  </body>
<?php echo $this->layout()->content; ?>

というのは、まあメインコンテンツが出てくるものという事でOKなわけですが、それはともかくとして重要なのは12分割という概念。

まず先頭の方を見てみると

  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h1>Heading 1</h1>
        </div>
      </div>
    </div>

span12が重要やね… 12分割という事なので12個のブロックを全部使うぞ、とかいう意味です。従って全部横伸びしているように見えますな。MAXのピクセルを越えたら横幅が白くなるわけです。

続いて真ん中の部分

    <div class="container">
      <div class="row">
        <div class="span3">
        <p>sidebar</p>
        </div>
        <div class="span9">
          <?php echo $this->layout()->content; ?>
        </div>
      </div>
    </div>

さて、この部分、今度は<div class="row">以下に<div class="span3"><div class="span9">が定義されておるわけです。これすなわち3+9=12と、まあそういう理屈ですな。固定幅なのでspan3とするとその分の横幅でしかどうしても取れません。その中に収められるコンテンツを配備すべき。それが嫌ならfruidを使えという事になるんでしょう、多分。

最後の<footer></footer>はフッタです。HTML5ですね! HTML5が前提なんだよ。これは多分。

まあレイアウトはこんなもんでいいですかね。

サイドバー

http://wiki.catatsumuri.org/example/004/public/

まあこんな具合に書いたらよろし

    <div class="container">
      <div class="row">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar Header</li>
              <li class="active"><a href="#">Active Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="active"><a href="#">Active Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>
        <div class="span9">
...

sidebarはともかくとして「well」とは何かというと、まあアレです。角丸にした背景色の付いたナニかという事です。適当に外してみたりしてチェックしてね。 サイドバーはul, liで表現。activeというクラスを付けるとactive感が出るようになっている。 これはidでなくclassなので複数与える事もできます。まあそんな使い方はあんまり無いでしょうがね。

ここから少しプログラマブルな感じで書いてゆきます。まあ中身は単純なHTMLになるだろうから適時ソースを見ていただければOKなんでしょうがね。とりあえず「HOME」とかその他のメニューとか作って移動できるようにしてみしたで。

http://wiki.catatsumuri.org/example/004-1/public/

table

デフォルトだと実に地味なボーダーを引いてくれたりするtableだが、Twitter Bootstrapを読んだ時点で、tableは全てsolidなボーダーとなる。

tableタグのclassにそれこそ「table」を与えると、適当な間隔を取ったtableを作成してくれる。この際、一部の線が落ちたりするが、それは「table-bordered」classを与えれると角丸を張ったtableが作成される。

さらには「table-striped」を与えると1つ置きで背景色を変更してくれるようになる。この辺の色設定も出来るのだとは思われるが、とり急ぎデフォルト。

  <h2>tableデモ</h2>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>ヘッダ1</th> <th>ヘッダ2</th> <th>ヘッダ3</th>
      </tr>
    </thead>
 
    <tbody>
      <tr>
        <td>カラム1-1</td> <td>カラム2-1</td> <td>カラム3-1</td>
      </tr>
      <tr>
        <td>カラム1-2</td> <td>カラム2-2</td> <td>カラム3-2</td>
      </tr>
      <tr>
        <td>カラム1-3</td> <td>カラム2-3</td> <td>カラム3-3</td>
      </tr>
      <tr>
        <td>カラム1-4</td> <td>カラム2-4</td> <td>カラム3-4</td>
      </tr>
    </tbody>
  </table>

http://wiki.catatsumuri.org/example/005/public/index/table

form

語り所はぼつぼつあれど、こういうのはソースをバスっとコピって後は自分で改変するしかないんだよね、やっぱり。

というわけで置いておきます。

http://wiki.catatsumuri.org/example/006/public/index/form (なおsubmitしても何も起きません)

x-largeとかxx-largeとかがボツボツきもかもしれない。input type="file"はサイズ指定できないようだから自分でサイズを指定するしかないのかも。まあそもそもファイルコントローラってchromeとかでは扱いも全然違いますからなあ…

jQuery validationと組み合わせる

ま、せっかくエラーぽいクラスとかあるんだし、jQuery Validatorでチェックできれば楽だよなと、いう所でして。jQuery依存だしね。

jQuery validationについてはこちら

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

まあ、とにかく落とす。この段階ではjquery-validation-1.9.0.zipという奴でした。 jquery.validate.min.jsというのが居るので、jsに入れておく、と。 まあ、あとは呼び出せるようにしておく。Zend Frameworkならこんな具合でよろしいでしょう。

application/layouts/scripts/layout.phtml

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Twitter Bootstrap demo</title>
    <meta charset="UTF-8">
    <?php
    echo $this->jQuery()
            ->addJavaScriptFile($this->baseUrl('/js/bootstrap.js'))
            ->addJavaScriptFile($this->baseUrl('/js/jquery.validate.min.js')) // ← これ!
            ->addStylesheet($this->baseUrl('/css/bootstrap.css'))
    ?>

で、jQueryスクリプトをどこかに書く。ZFの場合は<?php $this→jQuery()→javascriptCaptureStart()?>とかで書いてしまうのだが、素のHTMLの場合は適当にどこかに挿入するべし。

$(function() {
  $('#sample-form').validate({
      rules: {
        title: {
          required: true
        }
      },
      messages: {
          title : {
              required: "タイトルは必須です"
          }
      },
      success: function(label) {
        $(label).closest('.control-group').removeClass('error');
      },
      highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
      }
    });
});

まあこんなもんすかねえ。。あとlabel class="error"というのが挿入されるので適当にスタイル定義。

label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}

的な。

まあ、あとは実用的なアプリでも書きましょうか、と。

twitterbootstrap.txt · 最終更新: 2012/04/17 20:05 by admin
www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0