transitive.info

CSS テンプレート Bootstrap を使う

Bootstrap を使ってみたときのメモ。

使い方

bootstrap は LESS で書かれているいて、 使い方は、だいたい

  • LESS とそれを変換する javascript を読み込ませてブラウザで変換する
  • LESS から変換された CSS を使う
  • LESS に設定を足して変換して使う

のうちのどれか。

LESS と javascript を読み込むには

<link rel="stylesheet/less" type="text/css" href="lib/bootstrap.less">
<script src="less.js" type="text/javascript"></script>

のようにする。変換済みの CSS は bootstrap.css と bootstrap.min.css があって、普通に

<link rel="stylesheet" type="text/css" href="bootstrap.css">

のようにして読みこめば良い。

使い方は http://twitter.github.com/bootstrap/ のページのソースコードを参考にすれば良い。

grid

span? は数の合計が 16 になるようにして使う。

<div class="row">
  <div class="span2">
1
  </div>
  <div class="span3">
2
  </div>
  <div class="span4">
3
  </div>
  <div class="span7">
4
  </div>
</div>

<div class="row">
  <div class="span4">
1
  </div>
  <div class="span4">
2
  </div>
  <div class="span4">
3
  </div>
  <div class="span4">
4
  </div>
</div>

ウィンドウに合わせて幅が変わるサイドバーは

<div class=".container-fluid">
  <div class=".sidebar">
  ...
  </div>
  <div class=".content">
  ...
  </div>
</div>

とするのだが、.content の中で上の grid を使おうとしたのだが うまくいかなかった。 私の HTML や CSS が悪さをしているのかもしれないが、 grid は全体が固定幅でないといけないようだ。

clearfix

float を使うときに clearfix という CSS の常套手段があるのだが、 それは用意されている。

<div class=".clearfix">
...
</div>

Tags of current page

,