Bootstrap:Tables

Base CSS

Typography
  • Emphasis classes
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Description
<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>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

dl要素に「class="dl-horizontal"」を追加

<dl class="dl-horizontal">

Tables
  • 「thead」「tbody」の記述が必須
<table>
<thead>
<tr><th>曜日</th><th>訪問者数</th></tr>
</thead>
<tbody>
<tr><td></td><td>3100</td></tr>
<tr><td></td><td>2800</td></tr>
<tr><td></td><td>3000</td></tr>
<tr><td></td><td>2400</td></tr>
<tr><td></td><td>2200</td></tr>
</tbody>
</table>

table要素に「class="table"」を追加

<p align="center">f:id:archives2012:20120916235840j:image</p>

ableクラスに「table-striped」を追加

<table class="table table-striped">

tableクラスに「table-bordered」を追加

<table class="table table-striped table-bordered">

tableクラスに「table-condensed」を追加

<table class="table table-striped table-bordered table-condensed">

Forms
  • 「thead」「tbody」の記述が必須
<table>
<thead>
<tr><th>曜日</th><th>訪問者数</th></tr>
</thead>
<tbody>
<tr><td></td><td>3100</td></tr>
<tr><td></td><td>2800</td></tr>
<tr><td></td><td>3000</td></tr>
<tr><td></td><td>2400</td></tr>
<tr><td></td><td>2200</td></tr>
</tbody>
</table>

table要素に「class="table"」を追加

tableクラスに「table-striped」を追加

<table class="table table-striped">

tableクラスに「table-bordered」を追加

<table class="table table-striped table-bordered">

tableクラスに「table-condensed」を追加

<table class="table table-striped table-bordered table-condensed">