[BootStrap][CSS]Hero Unitについて

BootStrapのTypographic componentsをみると、ちょっとかっこいいヘッダーが作れることができそうです。

<div class="container">
 <div class="hero-unit">
  <h1>This is H1</h1>
  <p>This is P</p>
  <p>
   <a class="btn btn-primary btn-large">Learn more</a>
  </p>
 </div>
 <div class="row">
  <div class="span12">
   Contents
  </div>
 </div>
</div>

ここでのポイントは、class="container"の直下に、divタグのclass="hero-unit"を置いているところ。

class="row"のdivタグの内部には、置かなくていいんですね。

IEの実行結果はこちら

一方で、chrome上の実行結果はこちら

わかりにくいのですが、chromeでは、角丸になっているのが素敵。