文字関係 サイズ
<span class="fs-xs">文字サイズ 極小</span>
<span class="fs-sm">文字サイズ 小</span>
<span class="fs-md">文字サイズ 中</span>
<span class="fs-lg">文字サイズ 大</span>
<span class="fs-xl">文字サイズ 特大</span>
実行結果
-
文字サイズ 極小
-
文字サイズ 小
-
文字サイズ 中
-
文字サイズ 大
-
文字サイズ 特大
文字関係 見た目
<span class="f-bold">太文字</span>
<span class="f-italic">Italic</span>
<span class="f-normal">ノーマル</span>
実行結果
文字関係 色
<span class="fc-red">赤文字</span>
<span class="fc-blue">青文字</span>
<span class="fc-green">緑文字</span>
<span class="fc-yellow">黄文字</span>
<span class="fc-white">白文字</span>
<span class="fc-black">黒文字</span>
実行結果
枠組み関係 テンプレート
<div class="box">標準枠組み</div>
<div class="box box-rounded">やや角丸</div>
<div class="box box-rounded-lg">角丸</div>
<div class="box box-rounded-xl">強角丸</div>
実行結果
枠組み関係 色
<div class="box box-primary">青</div>
<div class="box box-secondary">灰</div>
<div class="box box-success">緑</div>
<div class="box box-danger">赤</div>
<div class="box box-warning">黄</div>
<div class="box box-info">水</div>
<div class="box box-dark">黒</div>
実行結果
枠組み関係 横並び
<div class="col-2">2分割</div>
<div class="col-3">3分割</div>
<div class="col-4">4分割</div>
実行結果
枠組み関係 サイズ
<div class="col-2">2分割</div>
<div class="col-3">3分割</div>
<div class="col-4">4分割</div>
実行結果
w-●●pの数字の部分は1-100までの数字(%)で指定することが出来る
リスト スタイル
<div class="list">標準</div>
<div class="list list-square">四角</div>
実行結果
リスト 点の色
<div class="list list-style-red">赤</div>
<div class="list list-style-blue">青</div>
<div class="list list-style-green">緑</div>
<div class="list list-style-yellow">黄</div>
<div class="list list-style-black">黒</div>
<div class="list list-style-white">白</div>
実行結果
枠組み関係 色
<div class="box box-primary">青</div>
<div class="box box-secondary">灰</div>
<div class="box box-success">緑</div>
<div class="box box-danger">赤</div>
<div class="box box-warning">黄</div>
<div class="box box-info">水</div>
<div class="box box-dark">黒</div>
実行結果