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プラグインと組み合わせて使用すると、楽に挿入できるようになると思います。
コメント
[…] SimplicityにBootstrap風の案内メッセージを表示する方法 SimplicityでLINE風の会話文を表示する方法 […]