Twitter BootstrapのCSSによる装飾

Twitter Bootstrapの第2回。今回はHTMLの基本的なマークアップがどのように装飾されるのかを見ていきたいと思います。注1

まずは見出しテキスト<h1><h6>です。

通常通り

<h1>見出しテキスト</h1>
<h2>見出しテキスト</h2>
<h3>見出しテキスト</h3>
<h4>見出しテキスト</h4>
<h5>見出しテキスト</h5>
<h6>見出しテキスト</h6>

と書いて利用できます。

http://code.rlated.net/bootstrap/bootstrap02-headline.html
http://code.rlated.net/bootstrap/bootstrap02-headline.html

次は、パラグラフ<p>です。
デフォルトではフォントサイズが14pxになります。
導入部分などで少し大きな文字にしたい場所ではclass="lead"が使えます。

<p>テキスト<br />テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p class="lead">テキスト</p>
http://code.rlated.net/bootstrap/bootstrap02-paragraph.html
http://code.rlated.net/bootstrap/bootstrap02-paragraph.html

強調は<small><strong><em>が使えます。
デフォルトの装飾は、それぞれ小さな文字、太文字、イタリック体となります。

<small>非強調のテキスト</small>
<strong>強調(ボールド)</strong>
<em>p:強調(イタリック)</em>
http://code.rlated.net/bootstrap/bootstrap02-emphasis.html
http://code.rlated.net/bootstrap/bootstrap02-emphasis.html

successerrorなどのクラスを利用すると次のように色付けされた装飾になります。
ちなみに、この色使いはフォームなどで頻繁に使われます。

<p class="muted">テキスト</p>
<p class="text-warning">警告テキスト</p>
<p class="text-error">エラーテキスト</p>
<p class="text-info">情報テキスト</p>
<p class="text-success">成功テキスト</p>
http://code.rlated.net/bootstrap/bootstrap02-emphasis-classes.html
http://code.rlated.net/bootstrap/bootstrap02-emphasis-classes.html

次は<abbr>です。
あまり使わない人も多いかもしれません。

<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
http://code.rlated.net/bootstrap/bootstrap02-abbreviation.html
http://code.rlated.net/bootstrap/bootstrap02-abbreviation.html

引用<blockquote>です。

<blockquote>
  <p>テキスト</p>
  <small>引用元<cite title="テキスト">テキスト</cite></small>
</blockquote>
http://code.rlated.net/bootstrap/bootstrap02-blockquotes.html
http://code.rlated.net/bootstrap/bootstrap02-blockquotes.html

class="pull-right"を使うと右側に表示ですることができます。

<blockquote class="pull-right>
  <p>テキスト</p>
  <small>引用元<cite title="テキスト">テキスト</cite></small>
</blockquote>
http://code.rlated.net/bootstrap/bootstrap02-blockquotes.html
http://code.rlated.net/bootstrap/bootstrap02-blockquotes.html

順序無しリスト<li>の表示は次のようになります。

<ul>
  <li>リスト</li>
  <li>リスト
    <ul>
      <li>リスト</li>
      <li>リスト</li>
    </ul>
  </li>
  <li>リスト</li>
</ul>
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html

class="unstyled"を使うとがなくなります。

<ul class="unstyled">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
<li>/ul>
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html

行を変えずに表示する場合はclass="inline"を使います。

<ul class="inline">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html
http://code.rlated.net/bootstrap/bootstrap02-unorderedlist.html

順序付きリスト<ol>は次のようになります。

<ol>
  <li>リスト</li>
  <li>リスト
    <ol>
      <li>リスト</li>
      <li>リスト</li>
    </ol>
  </li>
  <li>リスト</li>
</ol>
http://code.rlated.net/bootstrap/bootstrap02-orderedlist.html
http://code.rlated.net/bootstrap/bootstrap02-orderedlist.html

定義リスト<dl>です。

<dl>
  <dt>項目</dt>
  <dd>説明</dd>
  <dt>項目</dt>
  <dd>説明</dd>
</dl>
http://code.rlated.net/bootstrap/bootstrap02-definitionlist.html
http://code.rlated.net/bootstrap/bootstrap02-definitionlist.html

class="dl-horizontal"で縦に並べて表示できます。

<dl class="dl-horizontal">
  <dt>項目</dt>
  <dd>説明</dd>
  <dt>項目</dt>
  <dd>説明</dd>
</dl>
http://code.rlated.net/bootstrap/bootstrap02-definitionlist.html
http://code.rlated.net/bootstrap/bootstrap02-definitionlist.html

コードの表示は次のように装飾されます。
<pre class="pre-scrollable">で垂直方向にスクロールバーを表示できます。(高さは最大350px)

<code>コード</code>
<pre>コード</pre>
<pre class="pre-scrollable">コード</pre>
http://code.rlated.net/bootstrap/bootstrap02-code.html
http://code.rlated.net/bootstrap/bootstrap02-code.html

最後は<table>です。

<table class="table">
  <tr><th>#</th><th>name</th><th>value</th></tr>
  <tr><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr><td>2</td><td>bbb</td><td>450</td></tr>
  <tr><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html
<table class="table table-striped">
  <tr><th>#</th><th>name</th><th>value</th></tr>
  <tr><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr><td>2</td><td>bbb</td><td>450</td></tr>
  <tr><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html
<table class="table table-bordered">
  <tr><th>#</th><th>name</th><th>value</th></tr>
  <tr><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr><td>2</td><td>bbb</td><td>450</td></tr>
  <tr><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html

class="table-hover"でマウスカーソルがホバーされているところの色が変化します。

<table class="table table-hover">
  <tr><th>#</th><th>name</th><th>value</th></tr>
  <tr><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr><td>2</td><td>bbb</td><td>450</td></tr>
  <tr><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html

class="table-condensed"は、分かり難いかもしれませんが、行の高さが少し狭くなります。

<table class="table table-condensed">
  <tr><th>#</th><th>name</th><th>value</th></tr>
  <tr><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr><td>2</td><td>bbb</td><td>450</td></tr>
  <tr><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html

パラグラフのところでも登場したsuccess/error/warning/infoクラスです。

<table class="table">
  <tr class="success"><th>#</th><th>name</th><th>value</th></tr>
  <tr class="error"><td>1</td><td>aaa</td><td>1200</td></tr>
  <tr class="warning"><td>2</td><td>bbb</td><td>450</td></tr>
  <tr class="info"><td>3</td><td>ccc</td><td>78.90</td></tr>
</table>
http://code.rlated.net/bootstrap/bootstrap02-table.html
http://code.rlated.net/bootstrap/bootstrap02-table.html

注1 フォームについては次回を予定しています。

コメントを残す

メールアドレスが公開されることはありません。