「Bootstrap.cssのHelper classes」のサンプル

「Bootstrap.cssのクラス名のサンプル：和訳」の「Helper classes」のサンプルページです。

テキストカラー

指定なし

.text-muted：グレー系

.text-primary：青系

.text-success：緑系

.text-info：青っぽい・・・水色？

.text-warning：金系？

.text-danger：赤系

<p>指定なし</p>
<p class="text-muted">.text-muted：グレー系</p>
<p class="text-primary">.text-primary：青系</p>
<p class="text-success">.text-success：緑系</p>
<p class="text-info">.text-info：青っぽい・・・水色？</p>
<p class="text-warning">.text-warning：金系？</p>
<p class="text-danger">.text-danger：赤系</p>

背景色

.bg-primary：青系

.bg-success：緑系

.bg-info：水色系

.bg-warning：黄色系

.bg-danger：赤系

<p class="bg-primary">.bg-primary：青系</p>
<p class="bg-success">.bg-success：緑系</p>
<p class="bg-info">.bg-info：水色系</p>
<p class="bg-warning">.bg-warning：黄色系</p>
<p class="bg-danger">.bg-danger：赤系</p>

グラフィックアイコン

「glyphicon glyphicon-○○○」を指定。サンプルでいくつか記載しておく。

「Components・Bootstrap」に一覧があります

<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>

関連ページ

• Bootstrap
• CSS
• Html/cssのサンプル
• Bootstrap.cssのクラス名のサンプル：和訳