なんだかいろいろつくってみるぺーじ Twitter Bootstrap編

サイドメニュー的な

• Top
• Css
• HTML

自分の感性が乏しすぎて、色々便利な機能があるんだけど生かし切れない…
というわけで、Twitter Bootstrap公式サイト ここを見たほうが早いと思います。英語だけどね。
一応レスポンシブデザインにしてあるので、画面幅にあわせてくれます。
ちょっとコードを書き足すだけで画像をこんな風に丸く切り抜いて表示できたりして。
今は特に何も色やら特別な設定はしていません。が、自力で配色を変更するのは結構骨が折れる…
と思ってたらジェネレータみたいなのがあるじゃないか→http://www.lavishbootstrap.com/ 便利ねー。

CSSコードを一部載せておきます．

ちなみに全部で5894行・・・

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
} //class名containerで要素を中央揃えにできる

.span12 {
  width: 940px;
}　//span12から1まで幅が指定されている

.span11 {
  width: 860px;
}
				
.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}　//-fluidとクラス名につけることで画面幅の変化に対応するようになる



.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}//widthの値がpxではなく%になってる

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

一番上の黒いやつは「navber navber-inverse nav-static-top」クラスで指定
navber-inverseで黒くなる　static-topで上部に固定

その次の大きい文字の部分は「page-header」クラス
他に使うとしたらheroクラスかな？

サイドメニュー的なものとメインの部分は3:9=12の比率で実装。
画面幅に合わせて伸縮はするけれど、仕様までは変わらないので（時間不足）細くしていくと一番上の黒いやつとかがおかしくなります。
色々調べながら作ってたら、この程度のサイト作るのにも5時間ほどかけてしまったよ。
まだまだ勉強が足りないね。