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>";

CSSにFoundationを使う