2012年8月31日金曜日

Twitter BootstrapでSticky Footerを作成する

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.0.4

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

Twitter Bootstrapは便利なツールなのですが、footerを画面下に配置するcssの設定が見当たらなかったので、実装しました。

footerの仕様

  • HTML画面の下部にfooterを表示する。
  • 画面の表示量が少ない場合は、画面最下部にfooterを表示する。
  • 画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

このようなフッタをSticky Footer(スティッキフッタ)と呼びます

html


<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 

    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point"> 
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html> 

divで囲むwrapperクラスを用意します。これはbodyタグのfooterタグ以外を囲むタグです。
footerタグをdivで囲むwrapperクラスの外に設定します。

CSS

上記のhtmlで指定したcommon.cssの内容です。


html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}

footer {
  height: 2.3em;
}

.push {
  height: 2.3em;
}

.top_start_point {
  padding-top: 60px;
}

wrapperクラス内のmin-heightは領域の高さの最小値を設定します。
marginのautoはセンタリングを設定します(margin 上マージン auto 下マージン)
footerタグをdivのwrapperクラスの外に設定します。

top_start_pointクラスは画面の内容が開始する位置を指定しています。
ヘッダーを使用する場合に必要になるので注意してください。

私はTwitter Bootstrapを使うのは、まだ次期尚早かなと思うのですが、個人開発者はもう使ってのもよい段階に入っていると思います。
私も自分のWEBアプリをTwitter Bootstrapに差し替えるつもりです。(完了したら報告します)

個人実装で全てのブラウザに対応するのは苦しいので、Twitter Bootstrapのようなcssフレームワークは今後はやると思います。

でわ


参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...