SimplicityにBootstrap風の案内メッセージを表示する方法

ブートストラップ風インフォメーションクラス

Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。

ブートストラップのデザインをそのままパク参考にさせていただきました。

以下のようにして使用します。

例ではp要素を使用していますが、divなどでも使用できます。

スポンサーリンク

.sp-primaryクラス

使用方法

<p class="sp-primary">.sp-primaryクラスを使用</p>

表示例

.sp-primaryクラスを使用

.sp-successクラス

使用方法

<p class="sp-success">.sp-successクラスを使用</p>

表示例

.sp-successクラスを使用

.sp-infoクラス

使用方法

<p class="sp-info">.sp-infoクラスを使用</p>

表示例

.sp-infoクラスを使用

.sp-warningクラス

使用方法

<p class="sp-warning">.sp-warningクラスを使用</p>

表示例

.sp-warningクラスを使用

.sp-dangerクラス

使用方法

<p class="sp-danger">.sp-dangerクラスを使用</p>

表示例

.sp-dangerクラスを使用


spは、Simplicityの短縮形です。

単にdengerクラスみたいにした場合は、他に利用しているCSSとクラス名が衝突する可能性が高くなってしまいます。ですので、名前の衝突を回避するために少し長くなりますが先頭にsp-とついています。

使い方が少し面倒ですが、AddQuicktagプラグインと組み合わせて使用すると、楽に挿入できるようになると思います。

スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. […] SimplicityにBootstrap風の案内メッセージを表示する方法 SimplicityでLINE風の会話文を表示する方法 […]