Bootstrap 3のボタンの使い方


まず始めに、BootstrapのCDN(Content Delivery Network)を使用して、必要なCSSとJavaScriptファイルを読み込む必要があります。以下のコードをHTMLファイルのセクション内に追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 Button</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- ボタンのコード例をここに追加 -->
</body>
</html>

続いて、ボタンを作成する方法です。Bootstrapでは、以下のようなクラスを使用してボタンをスタイル付けします。

<button class="btn btn-default">デフォルトのボタン</button>
<button class="btn btn-primary">プライマリーボタン</button>
<button class="btn btn-success">サクセスボタン</button>
<button class="btn btn-info">インフォボタン</button>
<button class="btn btn-warning">ワーニングボタン</button>
<button class="btn btn-danger">デンジャーボタン</button>

これらのクラスをボタン要素に追加することで、それぞれのスタイルが適用されます。さらに、ボタンにアイコンを追加することもできます。

<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 検索</button>

上記の例では、glyphiconクラスと適切なアイコンクラスを組み合わせて、検索ボタンに検索アイコンを追加しています。

また、ボタンのサイズを変更することもできます。

<button class="btn btn-primary btn-lg">大きなボタン</button>
<button class="btn btn-primary">通常のボタン</button>
<button class="btn btn-primary btn-sm">小さなボタン</button>
<button class="btn btn-primary btn-xs">超小さなボタン</button>

これらのクラスを使用することで、ボタンのサイズを自由に調整することができます。

以上がBootstrap 3を使用してボタンを作成する方法といくつかのコード例です。これを参考にして、自分のウェブデザインプロジェクトにボタンを追加してみてください。