end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

bootstrap - テキスト(ヘッダ, リスト, インライン ラベル)

記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659

ヘッダと段落(<p>)


ヘッダのhtml

<h1>h1. ヘッダ1</h1>
<h2>h2. ヘッダ2</h2>
<h3>h3. ヘッダ3</h3>
<h4>h4. ヘッダ4</h4>
<h5>h5. ヘッダ5</h5>
<h6>h6. ヘッダ6</h6>

段落(<p>)のhtml

<h3>文書表示例</h3>
この部分はサンプル文書の本文です。この部分はサンプル文書の本文です。
この部分はサンプル文書の本文です。この部分はサンプル文書の本文です。
この部分はサンプル文書の本文です。この部分はサンプル文書の本文です。
<h1>ヘッダ例<small>smallタグでサブヘッダを表示しています&hellip;</small></h1>

Misc. elements や Blockquotes は解説しません

私は Misc. elements や Blockquotes をしばらく利用しないと思うので、解説しません。次のurlにある本家をご覧下さい。
http://twitter.github.com/bootstrap/#typography

リスト

順序なしリスト <ul>

<ul>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
      <ul>
	<li>Phasellus iaculis neque</li>
	<li>Purus sodales ultricies</li>
      </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>

マークなしリスト <ul.unstyled>

<ul class="unstyled">
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
</ul>

順序付きリスト <ol>

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ol>


定義リスト <dl>

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
</dl>

インライン ラベル

.labelと、必要に応じて .success , .warning , .important , .notice を指定して下さい。