初めての Twitter Bootstrap　その１

bootstrap

こんにちは！ @taro_tnk です！

ここらで twitter bootstarp の勉強しつつ、
自分のメモとして残しておくよ！

必要なファイルを落としてくる

まずは必要なファイルを落とさないことには始まらないので、
以下のサイトから bootstrap と jquery を落としてくるよ。

・TwitterBoostrap
http://twitter.github.com/bootstrap/

・ jQuery
http://jquery.com/


基本

こちらの公式サイトを見ながら勉強していくよ！

まずは以下のような html ファイルを準備します。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ただ jquery , boostrap の js, css を読み込んでるだけの html 。
ここからどんどん肉付けしていくよ！

ヘッダーを付ける

bootstrap でヘッダーを付けるには以下のように記述します。

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

そうするとこんな感じのナビゲーションバーができます。

f:id:taro_tnk:20121226202800p:plain


簡単ですね！

あとはそこにオプション的にいろいろすることができます。


fix にする

ナビゲーションを fix にするには

div.navbar に以下のように .navbar-fixed-top を追加すればOKです。

<div class="navbar navbar-fixed-top">

※ ヘッダーが浮いてしまうので、body に padding-top: 60px; とかやるとちょうどいい。


文字と背景の色を反転させる（黒っぽいヘッダーにする）

やっぱり黒系のほうがシックだよね、って場合は以下のようにしましょう。

<div class="navbar navbar-inverse">

こんな感じ。

f:id:taro_tnk:20121226204721p:plain


まじスバラシス。


丸っぽいのをやめる

なんかこれだと四方が丸っぽいので、それをやめるには以下のクラスを追加します。

<div class="navbar navbar-inverse navbar-static-top">

いいね。


940px の中に入れる

このままだと左上に文字とか寄っちゃってるので、940px の枠内に収めます。

さっきのソースを以下のように変更して、
内容物を div.container で囲みます。.container については後述。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

f:id:taro_tnk:20121226204726p:plain


ちゃんと 940px の枠内に収まってヘッダーらしくなりました！


とりあえずヘッダーはこんな感じで、
あとは状況に応じてドロップダウンと組み合わせたりすればおっけーですね！


メインエリアを作る

メインエリアは一番大枠として div.container で囲みます。

  <div class="container">
    <h1>Hello World!</div>
  </div>

昔からよく言うところの「ラッパー」的な感じですね！
これが 940px の箱を作ります。


グリッドシステムについて

まず前提として Bootstrap ではグリッドシステムというものを採用しています。
940px の箱を 12 カラムに分割してデザインしていく、みたいな感じです。

詳しくはこちらを参考に。
Scaffolding · Bootstrap


レッツ分割！

今回はサイドメニューとメインカラムの２カラム構成をやってみましょう。
とりあえずサイドメニューを 3/12 、メインカラムを 9/12 とします。

分割するには分割するものに .span3 のように、
「span + 12個のうちいくつ使うか」
のようなクラスを付けます。
そしてそれらを .row で囲みます。

日本語不自由で上手く説明できないので、ソースで書くとこんな感じです。

  <div class="container">
    <div class="row">
      <div class="span9">
        <h1>Hello, world!</h1>
        <p>メインカラムですよ</p>
      </div>
      <div class="span3">
        <p>サイドメニューですよ</p>
      </div>
    </div>
  </div>

もちろん div.row の中にある div.span の後ろの数値は、
足して 12 になるようにします。

f:id:taro_tnk:20121226204723p:plain


サイドメニューをもう少し格好良くする

見た目的に２種類のやり方があります。


  • その１

ul.class="nav nav-list" で実現します。
こんな風にやると

        <ul class="nav nav-list well">
          <li class="nav-header">コンテンツ１</li>
          <li><a href="#">なび１</a></li>
          <li><a href="#">なび２</a></li>
          <li class="nav-header">コンテンツ２</li>
          <li><a href="#">なび３</a></li>
          <li><a href="#">なび４</a></li>
        </ul>

ナビゲーションリストになります！
.well は背景を角丸グレーにするためにやってます。

この方法だとこんな感じになります。

f:id:taro_tnk:20121226204724p:plain


  • その２

次の方法は

ul.nav nav-tabs nav-stacked でやります。

        <ul class="nav nav-tabs nav-stacked">
          <li><a href="#">なび１</a></li>
          <li><a href="#">なび２</a></li>
          <li><a href="#">なび３</a></li>
          <li><a href="#">なび４</a></li>
        </ul>

ちなみにこんな感じになりますよ。
（こっちはサイドバーにするには一般的じゃないのかな？）

f:id:taro_tnk:20121226204725p:plain

好きな方を選びましょー


フッターを作る

Bootstrap 自体にフッター的なものは準備されてないっぽいですね（要検証）。
なので公式の Example にある こちらのページのスタイルをコピペします。
html にスタイルが直書きしてある以下の部分をまるっと持ってきます。

<style type="text/css">
      /* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      /* My Setting CSS
      -------------------------------------------------- */
      body {
          padding-top: 60px;
      }
</style>

html もソースを参考に以下のように作ります。

  1. footer 以外のコンテンツを div.wrap で囲む
  2. div#wrap の最後に空の div#push を入れる
  3. div#footer を入れる

ソースだとこんな感じ。

<div id="wrap">
  <div class="container">

    <div class="row">
      <div class="span9">
        ...
      </div><!-- /span9 -->
      <div id="sidebar" class="span3">
        <ul class="nav nav-list well">
          ...
        </ul>
      </div><!-- /span3 -->
    </div><!-- /row -->
  </div><!-- /container -->

  <div id="push"></div>
</div><!-- /wrap -->

<div id="footer">
  <div class="container">
    <p>フッターですよ</p>
  </div>
</div>

こうすると確かにできるのですが、
ヘッダーを fixed にした時に追加した、 body { padding-top: 60px; } のせいで、
フッターがスクロールしないと表示できない状態になってしまいます。

いろいろ調べてみたら以下のような gist を発見しました！
https://gist.github.com/1918937


しかし

試してみたのですが div#footer の横幅が 940px になってしまってあまり好きじゃないので、
諦めて公式で紹介されてるやり方でやろうと思います。


とりあえず

レイアウト的な部分がふわっとできましたので、とりあえず今日はここまで。
今日の成果はこんな感じ↓

f:id:taro_tnk:20121226204727p:plain

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style type="text/css" media="screen">
    <!--
      /* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }



      /* My Setting CSS
      -------------------------------------------------- */
      body {
          padding-top: 60px;
      }

    -->
    </style>
  </head>
  <body>

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

<div id="wrap">
  <div class="container">

    <div class="row">
      <div class="span9">
        <h1>Hello, world!</h1>
        <p>メインカラムですよ</p>
      </div><!-- /span9 -->
      <div id="sidebar" class="span3">
        <ul class="nav nav-list well">
          <li class="nav-header">コンテンツ１</li>
          <li><a href="#">なび１</a></li>
          <li><a href="#">なび２</a></li>
          <li class="nav-header">コンテンツ２</li>
          <li><a href="#">なび３</a></li>
          <li><a href="#">なび４</a></li>
        </ul>
      </div><!-- /span3 -->
    </div><!-- /row -->
  </div><!-- /container -->

  <div id="push"></div>
</div><!-- /wrap -->

<div id="footer">
  <div class="container">
    <p>フッターですよ</p>
  </div>
</div><!-- /footer -->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

次回はテーブルレイアウトをやろうと思ってます。

追伸
　日本語不自由すぎて泣いた

追記
その２書きました → 初めての Twitter Bootstrap その２　〜table編〜