Bootstrap 按钮

目标

ボタンはウェブサイトやアプリケーションで広く使用されています。このチュートリアルでは、実例と実例の説明を通して、Bootstrap 3 ボタンの使用方法と、デフォルトのボタンをカスタマイズする方法を説明します。

デフォルトのボタンを使用する

以下の例では、Bootstrap 3を使用してボタンをすばやく作成する方法を説明します。

上記のコードの出力は以下のとおりです。あなたはできます。ここをクリックして、オンラインで実例を表示。

CSS

これらのボタンを作成するために使用されるCSSルールについて説明します。ボタンを作成するための主要なclassはbtn、以下のようになります。

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

上記の CSS コードにより、btn class を持つボタンは inline-block として表示され、共通のベースラインを持つ隣接要素とインラインで表示されることが可能ですが、width と height 属性を追加することもできます。その上パディングと下パディングはそれぞれ 6 ピクセルと 12 ピクセルです。下マージンは 0 に設定されています。

フォントサイズは14ピクセルに設定され、フォントの太さはnormalに設定されます。btn classを持つボタンの行の高さは1.428571429で、デフォルトの高さ1より少し高くなっています。テキストは中央寄せです。

white-space プロパティは nowrap に設定されているため、改行、スペース、タブは折りたたまれます。関連する垂直方向に中央揃えされた要素は、高さの中央に配置されます。関連する要素の上にマウスを置くと、カーソルはポインタ形状になります。ここでは背景画像は表示されません。

ここには透明な1ピクセル幅の実線ボーダーが表示されます。border-radius: 4px;、関連するボタンの角は丸みを帯びます。値を 4px 増減することで、角丸の丸みをより大きくしたり、小さくしたりできます。〜によりuser-select: none、関連するボタンおよび子要素のテキストは選択できなくなります。クロスブラウザの一貫性を確保するため、同じプロパティは複数のベンダープレフィックスを付けて適用されます。

上記の例で表示されている各ボタンは、...を除いてbtn他にも別の CSS クラスがあり、たとえば btn-default、btn-primary などです。これらのクラスはボタンのcolor、background-colorとborderプロパティです。これらは、通常のボタンおよびリンク状態（hover、active、focusなど）を持つボタンのためのCSSルールです。

btn-primaryclass のコードは次のとおりです。

.btn-primary {
  color: #FFFFFF;
  background-color: #428BCA;
  border-color: #357EBD;
}

異なるサイズのボタン

ここでは3つのサイズを設定できます。各サイズを設定するには、追加のclassを1つ追加する必要があります。

btn-lg for setting large button.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

btn-lg classのCSSコードは次のとおりです。

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

使用btn-smとbtn-xsさまざまなサイズのボタンを設定します。

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-xs">Large button</button>

btn-sm と btn-xs クラスの CSS コードは次のとおりです。

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
}

次のコードは、異なるサイズの異なるタイプのボタンを示しています。ここをクリックして、オンラインでデモを表示。以下は、効果のスクリーンショットとコードです。

块级按钮

ボタンが配置されているコンテナの全幅を使用するには、Bootstrap 3はブロックレベルボタンオプションを提供しています。btn-block上記で説明したclassにclassを追加して、ブロックレベルボタンを作成します。

<button type="button" class="btn btn-primary btn-lg btn-block">Large button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large button</button>  

ブロックレベルボタンを作成するためのCSS定義は次のとおりです

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

以下に、ブロックレベルボタンのスクリーンショットとコードを示します。ここをクリックして、オンラインで実例を表示。

アクティブなボタン

您可以使用activeボタンまたはリンクに異なる外観を追加してアクティブ状態を示すためのCSS classです。これは实例演示、スクリーンショットとコード。

Chrome DevToolsを使用すると、ボタンにactiveクラス設定時に、CSS ルールが有効になります。

Default アクティブボタン

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}

Primary アクティブボタン

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276B1;
border-color: #285E8E;
}

Success アクティブボタン

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #fff;
background-color: #4877A6;
border-color: #4877A6;
}

Info アクティブボタン

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39B3D7;
border-color: #269ABC;
}

Warning アクティブボタン

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ED9C28;
border-color: #D58512;
}

Danger アクティブボタン

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
color: #fff;
background-color: #D2322D;
border-color: #AC2925;
}

Link アクティブボタン

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: transparent;
}

が追加されたときに、color、background-color、border-colorプロパティを変更することで実現されていることがわかります。

無効なボタン

您可以使用disabledボタンまたはリンクに異なる外観を追加して無効状態を示すためのCSS classです。これは实例演示、スクリーンショットとコード。

ボタンを少しぼやけさせるには、次のCSSルールを使用します（Chrome DevToolsで確認）

.btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}

無効化されたアンカー要素

btn や他の関連する class を持つアンカー要素が無効状態として表示される場合、通常とは少し異なります。まず、アンカー要素のリンクはまだ存在し、外観と感触だけが変わります。さらに、ナビゲーションバーではそれらを使用できません。

ここをクリックして、オンラインでデモを表示。コードは次のとおりです。

请注意，role="button"は、使いやすさの目的で使用されています。

按钮标签

button、a、input 要素でボタン class を使用すると、ボタンをタグとして使用できます。ただし、通常は button 要素を使用することをお勧めします。そうしないと、クロスブラウザの不整合の問題が発生します。

以下の実例は、ボタンタグの使用方法を示しています。

ここをクリックして、オンラインでデモをご覧ください。

定制按钮

ここでは、デフォルトのボタンから始めて、まったく異なる外観と感触を持つようにカスタマイズします。

以下のボタンコードから始めます。

<button type="button" class="btn btn-default">Default</button>

ここでCSS classを作成し、btn-w3rそれを使ってbtn-defaultを置き換えます。したがって、上記のコードの代わりに次のコードを記述します

<button type="button" class="btn btn-w3r">Default</button>

まず背景色を変更します。次のCSSを追加します

.btn-w3r {
    background: #CB60B3; /* Old browsers */
    background: -moz-linear-gradient(top,  #CB60B3 0%, #AD1283 50%, #DE47AC 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CB60B3), color-stop(50%,#AD1283), color-stop(100%,#DE47AC)); /   *   Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CB60B3', endColorstr='#DE47AC',GradientType=0 ); /* IE6-9 */
    }

現在、ボタンは次のようになります。

フォントの色を変更するには、既存のbtn-w3rclassのCSSコードの後に次のCSSを追加します

color:#fff;

次に、ボタンの形状を円形にするために、既存のbtn-w3rclassのCSSコードの前に次のCSSを追加します

width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

ホバー効果を追加するには、次のCSSコードを追加します

.btn-w3r:hover {
    background: #333; 
    color:#E75616;
    }

上記のCSSコードを追加した後のボタンのホバー効果は次のとおりです

您可以ここをクリックして、私たちが作成したカスタムボタンのオンラインデモをご覧ください。。