btn
リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
.disabled または disabled="disabled"が付与されていると、反応しない見た目となる（クリックはできるので注意）。
<p> <a href="#" class="btn">btn</a> <a href="#" class="btn disabled">btn</a> </p> <p> <span class="btn">btn</span> <span class="btn disabled">btn</span> </p> <p> <input type="button" class="btn" value="btn" /> <input type="button" class="btn" value="btn" disabled="disabled" /> </p> <p> <button class="btn">btn</button> <button class="btn" disabled="disabled">btn</button> </p>
btn-(color)
ボタンの色を変更する。(color)はカラーの設定を参照。
<p> <a href="#" class="btn btn-first">btn-first</a> <a href="#" class="btn btn-first disabled">btn-first</a> </p> <p> <a href="#" class="btn btn-second">btn-second</a> <a href="#" class="btn btn-second disabled">btn-second</a> </p> <p> <a href="#" class="btn btn-third">btn-third</a> <a href="#" class="btn btn-third disabled">btn-third</a> </p> <p> <a href="#" class="btn btn-info">btn-info</a> <a href="#" class="btn btn-info disabled">btn-info</a> </p> <p> <a href="#" class="btn btn-important">btn-important</a> <a href="#" class="btn btn-important disabled">btn-important</a> </p>
btn-outline
ボタンを罫線のみの見た目にする。背景色は $body-bg ではなく transparent なので注意。
.btn-(color) と同時に使用することが前提となっており、罫線の色が変わる。
<p> <a href="#" class="btn btn-outline btn-first">btn-first</a> <a href="#" class="btn btn-outline btn-first disabled">btn-first</a> </p> <p> <a href="#" class="btn btn-outline btn-second">btn-second</a> <a href="#" class="btn btn-outline btn-second disabled">btn-second</a> </p> <p> <a href="#" class="btn btn-outline btn-third">btn-third</a> <a href="#" class="btn btn-outline btn-third disabled">btn-third</a> </p> <p> <a href="#" class="btn btn-outline btn-info">btn-info</a> <a href="#" class="btn btn-outline btn-info disabled">btn-info</a> </p> <p> <a href="#" class="btn btn-outline btn-important">btn-important</a> <a href="#" class="btn btn-outline btn-important disabled">btn-important</a> </p>
btn-inverse
ボタンの文字色と背景色を反転する。
.btn-outline と同時に使用すると、罫線のみの状態で反転する。
<p class="bg-inverse p-y"> <a href="#" class="btn btn-inverse">btn-inverse</a> <a href="#" class="btn btn-inverse disabled">btn-inverse</a> </p> <p class="bg-inverse p-y"> <a href="#" class="btn btn-outline btn-inverse">btn-outline + btn-inverse</a> <a href="#" class="btn btn-outline btn-inverse disabled">btn-outline + btn-inverse</a> </p>
btn-(size)
ボタンのサイズを変える。(size)は、 sm, lg, xl, xxl に対応している。
<p> <a href="#" class="btn">default</a> <a href="#" class="btn btn-sm">btn-sm</a> <a href="#" class="btn btn-lg">btn-lg</a> <a href="#" class="btn btn-xl">btn-xl</a> <a href="#" class="btn btn-xxl">btn-xxl</a> </p>
btn-flat
ボタンの影を表示しない。
.btn-(color) と同時に使用しなかった場合、テキストのみを表示する。
<p> <a href="#" class="btn btn-sm btn-flat">btn-flat</a> <a href="#" class="btn btn-flat">btn-flat</a> <a href="#" class="btn btn-lg btn-flat">btn-flat</a> <a href="#" class="btn btn-xl btn-flat">btn-flat</a> </p> <p> <a href="#" class="btn btn-first btn-sm btn-flat">btn-flat</a> <a href="#" class="btn btn-first btn-flat">btn-flat</a> <a href="#" class="btn btn-first btn-lg btn-flat">btn-flat</a> <a href="#" class="btn btn-first btn-xl btn-flat">btn-flat</a> </p>
btn-block
ボタンを中央に寄せたブロック要素として表示する。幅は100%ではなく、一般的に考えられる幅を最大値とする。
補足：ボタンの余白
.btn-block, .btn-round, .btn-square では、.btn のpaddingの初期値を上書きする必要があるため、意図的にクラスを追加して優先度を上げている。
note: Padding in button
In .btn-block, .btn-round, .btn-square, need to override the default padding of .btn. For this reason, intentionally add classes to increase priority.
<p> <a href="#" class="btn btn-sm btn-block">btn-block</a> </p> <p> <a href="#" class="btn btn-block">btn-block</a> </p> <p> <a href="#" class="btn btn-lg btn-block">btn-block</a> </p> <p> <a href="#" class="btn btn-xl btn-block">btn-block</a> </p> <p> <a href="#" class="btn btn-xxl btn-block">btn-block</a> </p>
btn-round
ボタンを正円で表示する。幅を超えるようなテキストを入れることはできない。
<p> <a href="#" class="btn btn-sm btn-round">R</a> </p> <p> <a href="#" class="btn btn-round">R</a> </p> <p> <a href="#" class="btn btn-lg btn-round">R</a> </p> <p> <a href="#" class="btn btn-xl btn-round">R</a> </p> <p> <a href="#" class="btn btn-xxl btn-round">R</a> </p>
btn-square
ボタンを正方形で表示する。幅を超えるようなテキストを入れることはできない。
<p> <a href="#" class="btn btn-sm btn-square">R</a> </p> <p> <a href="#" class="btn btn-square">R</a> </p> <p> <a href="#" class="btn btn-lg btn-square">R</a> </p> <p> <a href="#" class="btn btn-xl btn-square">R</a> </p> <p> <a href="#" class="btn btn-xxl btn-square">R</a> </p>