簡単！bootstrapのボタンデザインサンプル（button design sample）

投稿日: 投稿者: kishiken

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>

Navbar Button

ナビの中のボタン

<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>

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする

こんな記事も読まれています。