css でさくっとボタンを配置したいときって、たま～にあります。
SNSボタンとかちょっとカラフルで、このサイトとはあまり関係ないですが～といった雰囲気のボタンですね。

css でさくっとボタンを配置する

自分で style などで書いてもいいんですけど、たまにしか使わないんで色決めとかちょっとだけ時間がかかってしまいます。

もったいなので bootstrap を使ってしまうって手です。

bootstrap の導入の仕方

bootstarp の導入方法は、⇒こちら

bootstarp のボタンクラス

bootstrap の ボタンクラスは、 btn です。
<div class="btn">ボタン ぽちっ</div><br />

クリックしても div 指定なのでなんにも起こりませんが(笑)


a タグを使うと
<a href="#" class="btn">ボタン ぽちっ</a><br />
ボタン ぽちっ
なにがいいって a タグに設定されている link , hover の色を捨ててくれるので、テキスト文字の色が影響を受けない。

bootstarp のボタン色クラス

<button type="button" class="btn btn-default">Default</button><br /><button type="button" class="btn btn-primary">Primary</button><br /><button type="button" class="btn btn-success">Success</button><br /><button type="button" class="btn btn-info">Info</button><br /><button type="button" class="btn btn-warning">Warning</button><br /><button type="button" class="btn btn-danger">Danger</button><br /><button type="button" class="btn btn-link">Link</button><br />
Default Primary Success Info Warning Danger Link
カラフルな色のボタンを作ることができます。

ただし、bootstrap は、フリーのフレームワークで、かつ、今進化している最中です。

そのため、今後なくなるクラスがでてきたり、クラスが増えたりしてきます。

前の 3.xxx では、 btn-lg などボタンサイズを指定できるものがありましたが、4.xxx になると btn-lg は、なくなっています。

そういった理由から、bootstrap は、ネット経由で引っ張るのではなく、ダウンロードしてきて使うのが正解です。