tamlog

主にwebのフロント回り たまに登山

TwitterBootstrapを使ってブログを作成。

スポンサーリンク

当ブログをTwitterBootstrapを使ってリニューアルしましたのでその手順をまとめます。 「TwitterBootstrapとは?」ですが、 名前の通りTwitter社から提供されているフレームワークです。 ボタン、フォームなどの部品が用意されており組み合わせることによってサイトが作れるといった感じです。

01

1,使い方

使い方の説明ですが、リファレンスを参考に進めていくのが良いと思います。 Bootstrapをダウンロードすると以下構成になっています。

 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

そして、フォルダを任意の場所に移動させ作成したhtmlファイルに以下cssとjavascriptをリンクさせればOKです。 あとはパーツに合ったclassを指定するといった感じです。

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<script src="">http://code.jquery.com/jquery-latest.js"> 
<script src="js/bootstrap.min.js"></script>

2,コードと、リファレンス

当ブログのトップページを参考に header部分を説明します。

Coda

トップのタイトルバーの箇所はBasic navbarを参考に作成しています。 参考リファレンス箇所

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> <a class="brand" href="/">tamshow.com</a>
      <div id="search-box">
        <form class="navbar-search pull-right" method="get" action="">
          <input type="text" class="search-query"  placeholder="検索" />
        </form>
      </div>
    </div>
  </div>
</header>

まずdiv.navberの中にdiv.navbar-innerを配置します。 トップに固定したかったのでdiv.navberと同じタグに.navbar-fixed-topを指定します。 タイトルはdiv.brandを指定。

続いてSearch form 参考リファレンス箇所は少し下の方にSearch formがありますのでそちらを参考に form.navbar-searchの直下にimput.search-query 今回は右寄せにしたかったためform.navbar-searchと同じタグに.pull-rightを指定します。

3,まとめ

このようにclassを組み合わせていくとサイトが組めるといった感じです。 注意点としてフレームワークですので他のTwitterBootstrapを使ったサイトと似た感じになってしまいます。 ただし、気軽に作りたい場合は良いのではないのでしょうか? 覚えておいて損はないと思いますので是非使ってみては!