FuelPHP入門で書いてあるP113~のtemplate.phpをver.1.3用にする

PHP

2012.10.222016.06.05

FuelPHP入門で書いてあるP113~のtemplate.phpをver.1.3用にする

こんばんは。ファガイです。本日はソーテック社から出ているFuelPHP入門のP113ページに載っているtemplate.phpをfuelphpのver.1.3にも対応するようにコードを書き直しました。

まず、最初に通常どおり書くとどうなるかです。

こうなります。
まずこれでもまぁ・・・テストだし・・・みたいな感じですが、一応。

こうなってしまった理由ですが、FuelPHPに入ってるtwitter bootstrapのバージョンがアップデートされたからです。(v2.0.3に。public/assets/css/bootstrap.cssで確認可能)

この影響でソースコードはこのようになります。(h3やHtml::anchor等に変更があります)

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
    <?php echo Asset::css('bootstrap.css'); ?>
    <style type="text/css">
        body{ margin: 50px; }
        .page-links a{ margin:0 10px;}
        .page-links .active{margin:0 10px; text-decoration: underline;}
    </style>
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
            <h1><?php echo Html::anchor('articles', 'FuelPHP入門ブログ',array('class'=>'brand'));?></h1>

            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="span12">
                <h1><?php echo $title; ?></h1>
                <hr>
            </div>
            <div class="span12">
                <?php echo $content; ?>
            </div>
        </div>
    </div>
</body>
</html>

色々変えましたが特徴的な所だけ。
まず、上部のナビゲーション。ナビゲーションはclassにnavbar navbar-fixed-topを指定します。中身に関してclassにnavbar-innerを指定。topbarや、fillは無くなっているようです。
後は、Html::anchorですね。第３引数にclassにbrandを指定しています。

後はclass span16。span16は無くなってるよ。span12までになってました。そういう感じです。

twitter bootstrapに関しては、v2.0.4ですが、
これだけ覚えれば誰でも使えるTwitter Bootstrap2.0
こちらがおすすめです。