カラー・バリエーション Contextual classes
コンテキスト(文脈)に応じた背景色が5つ用意されている。行に指定することも、セルに指定することもできる。
行に指定
サンプル
クラス | 意味 |
---|---|
danger |
危険。極めて否定的。 |
warning |
注意。否定的。 |
info |
否定的でも肯定的でもない中立的情報。 |
success |
肯定的。 |
active |
アクティブ。 |
ソースコード
<table class="table"> <thead> <tr> <th>クラス</th> <th>意味</th> </tr> </thead> <tbody> <tr class="danger"> <th><code>danger</code></th> <td>危険。極めて否定的。</td> </tr> <tr class="warning"> <th><code>warning</code></th> <td>注意。否定的。</td> </tr> <tr class="info"> <th><code>info</code></th> <td>否定的でも肯定的でもない中立的情報。</td> </tr> <tr class="success"> <th><code>success</code></th> <td>肯定的。</td> </tr> <tr class="active"> <th><code>active</code></th> <td>アクティブ。</td> </tr> </tbody> </table>
セルに指定
サンプル
クラス | 意味 |
---|---|
danger |
危険。極めて否定的。 |
warning |
注意。否定的。 |
info |
否定的でも肯定的でもない中立的情報。 |
success |
肯定的。 |
active |
アクティブ。 |
ソースコード
<table class="table"> <thead> <tr> <th>クラス</th> <th>意味</th> </tr> </thead> <tbody> <tr> <th class="danger"><code>danger</code></th> <td>危険。極めて否定的。</td> </tr> <tr> <th class="warning"><code>warning</code></th> <td>注意。否定的。</td> </tr> <tr> <th class="info"><code>info</code></th> <td>否定的でも肯定的でもない中立的情報。</td> </tr> <tr> <th class="success"><code>success</code></th> <td>肯定的。</td> </tr> <tr> <th class="active"><code>active</code></th> <td>アクティブ。</td> </tr> </tbody> </table>