Twitter Bootstrapで見栄えを変える

前回の続き。少しでも見栄えを良くしようとTwitter Bootstrapを適用した。

成果物：about.about (Twitter Bootstrapの適用)

メモ

ナビゲーションバーのclass=”btn btn-navbar” data-toggle=”collapse”の箇所は、スマホなど画面幅が短いときに表示される開閉ボタン。class=”icon-bar”が3つあるのは開閉ボタン内の横線が3つあるのに対応してる。

<!-- ナビゲーションバー -->
<div class="navbar navbar-static-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">

      <!-- 画面幅が短い時に表示される開閉ボタン -->
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
	  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- ロゴ -->
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="index.html">SHOWCASE</a>

      <!-- メニュー -->
      <!-- Everything you want hidden at 940px or less, place within here -->
	  <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
		<ul class="nav">
			<!-- <li class="active"><a href="#">Home</a></li> -->
			<li><a href="ranking.html">人気順</a></li>
			<li><a href="latest.html">新着順</a></li>
			<li><a href="upload.html">アップロード</a></li>
			<li><a href="customize.html">カスタマイズ</a></li>
			<li class="active"><a href="about.html">アバウト</a></li>
		</ul>
      </div>

    </div>
  </div>
</div>

ナビゲーションバーやフッターなど共通する項目については、別ファイルのHTMLに括りだしてPHPのincludeで読み込むようにしたい。SmartyやTwigといったテンプレートエンジンもあるようだけど、最初はincludeから。
コンテンツ量が少ない場合にフッターを画面下部に固定表示するのに、footerFixed.jsを使用。

ソースコード
about.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

	<title></title>
</head>
<body>
    <!-- ナビゲーションバー -->
	<div class="navbar navbar-static-top navbar-inverse">
	  <div class="navbar-inner">
	    <div class="container">

	      <!-- 画面幅が短い時に表示される開閉ボタン -->
	      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
		  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </a>

	      <!-- ロゴ -->
	      <!-- Be sure to leave the brand out there if you want it shown -->
	      <a class="brand" href="index.html">SHOWCASE</a>

	      <!-- メニュー -->
	      <!-- Everything you want hidden at 940px or less, place within here -->
		  <div class="nav-collapse collapse">
	        <!-- .nav, .navbar-search, .navbar-form, etc -->
			<ul class="nav">
				<!-- <li class="active"><a href="#">Home</a></li> -->
				<li><a href="ranking.html">人気順</a></li>
				<li><a href="latest.html">新着順</a></li>
				<li><a href="upload.html">アップロード</a></li>
				<li><a href="customize.html">カスタマイズ</a></li>
				<li class="active"><a href="about.html">アバウト</a></li>
			</ul>
	      </div>

	    </div>
	  </div>
	</div>

    <!-- 本文 -->
	<div class="container">
		<ul class="breadcrumb">
			<li><a href="index.html">Home</a> <span class="divider">></span></li>
			<li class="active">About</li>
		</ul>

		<h1>このサイトについて</h1>
		<p>スマートフォンのカスタマイズアプリでホーム画面を変えた時のスクリーンショットを集めたサイトです。</p>

		<p>カスタマイズアプリのレビューは<a href="customize.html">こちらのページ</a>にまとめます。</p>

	</div>

    <!-- フッター -->
	<div id="footer" style="background:black; color:grey; text-align:center;">Copyright yamakadoh.</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="footerFixed.js"></script>
</body>
</html>

参考サイト