Bootstrapの主要classの意味
http://twitter.github.com/bootstrap/
bodyタグ
- data-spy属性、data-target属性
- http://twitter.github.com/bootstrap/javascript.html#scrollspy
- HTML5のカスタム属性を使用
- HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい
- http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html
global navigation
- .navbar
- http://twitter.github.com/bootstrap/components.html#navbar
- To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation.
- .navbar は、静的なナビゲーション
- .container
- Place one anywhere within a .container, which sets the width of your site and content.
- .containerの内部におくことによって、あなたのサイトやコンテンツの幅にセットされます。
- .navbar-fixed-top
- Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
- .navbar-fixed-topを追加したら、アカウント用のhiddenエリアの下は、<body>に少なくとも40pxのpaddingを追加することを覚えておきましょう。もちろんこれを追加するのはcore bootstrap cssの後 と responsive css の前です。
- .brand
- A simple link to show your brand or project name only requires an anchor tag.
- .nav
- Nav items are simple to add via unordered lists.
- .nav-collapse
- To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
- 940px かそれ以下の幅の場合に隠したいとき
header
- http://twitter.github.com/bootstrap/components.html#typography
- bootstrap当初は、headerタグを使用していたが、現在は、<div class="page-header">を使用している模様