twitter bootstrap3の入門用layoutひな形
Cakephpを利用してbootstrap3のwebサイトを開発運用しているのだが、layoutのdefault.ctpが以下のようになっていて、個人的にひな形っぽくなっている。layout、header、content、sidebar、footerとそれぞれ見てみたい。
layout
app\View\Layouts\default.ctp
のbody内は多少簡略化はしているが以下のようにしている。
<div id="container"> <div id="header"> <?php echo $this->element('header'); ?> </div> <div id="content" class="container"> <?php echo $this->element('breadcrumbs'); ?> <div class="row"> <?php echo $this->fetch('content'); ?> <?php echo $this->element('sidebar'); ?> </div> </div> <div id="footer"> <?php echo $this->element('footer'); ?> </div> </div>
contentとsidebarをbootstrap3のrowで囲んでいる。contentとsidebarのそれぞれで
col-lg-n
を設定することで、2カラム構成となるようにしている。
header
app\View\Elements\header.ctp
ヘッダーにはカテゴリのドロップダウンを載せられるようにしてある。以下のコードでは、リストに個別のカテゴリを追加することでカテゴリーツリーのドロップダウンリストとすることができる。
echo "<div class='navbar navbar-inverse navbar-fixed-top'>"; echo "<div class='container'>"; echo "<div class='navbar-header'>"; echo "<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>"; echo "<span class='icon-bar'></span>"; echo "<span class='icon-bar'></span>"; echo "<span class='icon-bar'></span>"; echo "</button>"; echo "<a class='navbar-brand' href='".DOMAIN."'>サイト名</a>"; echo "</div>"; echo "<div class='navbar-collapse collapse'>"; echo "<ul class='nav navbar-nav'>"; //echo "<li class='active'><a href='#'>Home</a></li>"; echo "<li class='dropdown'>"; echo "<a href='#' class='dropdown-toggle' data-toggle='dropdown'>カテゴリ <b class='caret'></b></a>"; echo "<ul class='dropdown-menu'>"; echo "<li><a href='/category'>"; echo "カテゴリ一覧"; echo "</a></li>"; echo "</ul>"; echo "</li>"; echo "</ul>"; echo "</div>"; echo "</div>"; echo "</div>";
breadcrumbs
app\View\Elements\breadcrumbs.ctp
パンくずリストはbootstrap3の公式ドキュメントでorder list形式で表現されているので、そのとおりに組んだHTMLが以下の例。ただし、そのままだとヘッダーとパンくずがぴったりとくっついていたので、HTMLに直にmarginを入れてある。
echo "<ol class='breadcrumb' style='margin-top: 10px;'>"; echo "<li><a href='".DOMAIN."'>サイト名</a></li>"; echo "<li class='current'>"; echo "現在のページ"; echo "</li>"; echo "</ol>";
content
app\View\[任意のディレクトリ]
メインコンテンツ部分の基本HTML。いちばん外側のdivにcol-lg-8を入れている。
echo "<div class='col-lg-8'>"; echo "<article>"; echo "<header>"; echo "<h1>"; echo "</h1>"; echo "</header>"; echo "<section>"; echo "</section>"; echo "</article>"; echo "</div>";
sidebar
app\View\Elements\sidebar.ctp
メインコンテンツエリアをcol-lg-8にしてあるので、サイドバーはcol-lg-4で囲っている。
<div class="col-lg-4 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="well sidebar-nav"> <div class='text-center'> PRエリア </div> </div> </div>
footer
app\View\Elements\footer.ctp
echo "<footer>"; echo "<div class='container'>"; echo "<div class='row'>"; echo "<div class='col-lg-6'>"; echo "<h6></h6>"; echo "</div>"; echo "<div class='col-lg-6'>"; echo "<h6></h6>"; echo "</div>"; echo "</div>"; echo "</div>"; echo "</footer>";