bootstrapのボタンはCSSの指定だけで、簡単に様々な色、形、種類のボタンが作れます。
よく使われているものからあまり使われてない形まで、まとめてみました。
コピペで使えるので、ぜひ参考にしてください。
目次
サンプルデモページ
サンプルページを作成しました。
ブログ記事内だと、表示が崩れるので、サンプルページで動作の確認をしてください。
Button Colors
ボタンの色変更。
<p> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p>
Button Sizes
ボタンのサイズを変更。
<p> <button type="button" class="btn btn-default btn-lg">Large</button> <button type="button" class="btn btn-default btn-sm">Small</button> <button type="button" class="btn btn-default btn-xs">XSmall</button> </p>
Active/Disabled Buttons
ボタンのアクティブ、不可、の状態。
<p> <button type="button" class="btn btn-info">Info Button</button> <button type="button" class="btn btn-info active">Active Info Button</button> <button type="button" class="btn btn-info disabled">Disabled Info Button</button> </p>
Block-level Button
横幅いっぱいブロックレベルのボタン。

<div><button type="button" class="btn btn-primary btn-block">Block-level Button</button></div>
Button Groups
ボタングループ。

<p>大サイズ</p> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <p>中サイズ</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <p>小サイズ</p> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <p>極小サイズ</p> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
横幅いっぱい

<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Apple</a> <a href="#" class="btn btn-primary">Samsung</a> <a href="#" class="btn btn-primary">Sony</a> </div>
縦のボタングループ

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
ナビの中のボタン
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button class="btn btn-danger navbar-btn">Button</button> </div> </nav>