日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

Bootstrap - ボタンデモ

こんにちは、将来のプログラミングスーパースター！今日は、Bootstrapボタンの素晴らしい世界に飛び込みます。近所の親切なコンピュータ教師として、私はあなたがこの旅をステップバイステップで案内するためにここにいます。お気に入りの飲み物を手に取り、リラックスして、一緒にこのエキサイティングな冒険に乗り出しましょう！

Bootstrap - Buttons Demo

Bootstrapボタンとは？

具体的な内容に入る前に、まずBootstrapボタンが実際に何かについて話しましょう。家を建てていると考えてみてください。壁と屋根はあなたのHTML構造、ペンキはCSS、そしてBootstrapは？そう、すべてをより簡単に、より美しくする魔法の工具箱のようなものです。Bootstrapボタンは、すぐにウェブページに追加できる pré-styled、すぐに使えるボタンです。

Bootstrapを始める

まず第一に、Bootstrapのプレイグラウンドを設定します。心配しないでください、モノポリーのゲームを設定するよりも簡単です！

ステップ1: HTML構造を設定する

基本的なHTML構造から始めましょう：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap ボタンデモ</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- ボタンをここに配置します -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

これまり、絵を描く前にキャanvasを設定するようなものです。BootstrapのCSSとJSファイルを含めて、Bootstrapのすべての機能にアクセスできるようにしました。

基本的なBootstrapボタン

さあ、ページにボタンを追加しましょう！

<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">副</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危険</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">情報</button>
<button type="button" class="btn btn-light">ライト</button>
<button type="button" class="btn btn-dark">ダーク</button>

各クラスの役割は以下の通りです：

  • btn: すべてのBootstrapボタンのための基本クラス。
  • btn-primary, btn-secondaryなど：これらのクラスはボタンの色とスタイルを定義します。

ボタンのサイズ

ファストフードレストランで異なるサイズのフライを注文するのと同様に、Bootstrapボタンも異なるサイズがあります！

<button type="button" class="btn btn-primary btn-lg">大型ボタン</button>
<button type="button" class="btn btn-primary">デフォルトボタン</button>
<button type="button" class="btn btn-primary btn-sm">小型ボタン</button>
  • btn-lg: ボタンを大きくします。
  • btn-sm: ボタンを小さくします。

アウトラインボタン

時々、少し控えめなボタンが必要です。その時はアウトラインボタンが役立ちます！

<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">副</button>
<button type="button" class="btn btn-outline-success">成功</button>

btn-outline-*クラスは、色のボーダーと透瑩な背景を持つボタンを提供します。

ブロックボタン

親要素の全幅にわたるボタンが必要な場合は、ブロックボタンがあなたの友です！

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">ブロックボタン</button>
<button class="btn btn-primary" type="button">ブロックボタン</button>
</div>

親divのd-gridクラスとgap-2クラスは、ボタン間にスペースを追加します。

ボタンの状態

ボタンは異なる状態を持つことができます。私たちが異なる気分を持つのと同じです！

<button type="button" class="btn btn-primary">通常ボタン</button>
<button type="button" class="btn btn-primary active">アクティブボタン</button>
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
  • activeクラスは、ボタンが押されているように表示します。
  • disabled属性は、ボタンをクリック不可にします。

トグルボタン

トグルボタンはライトスイッチのように、オンとオフの切り替えができます！

<button type="button" class="btn btn-primary" data-bs-toggle="button">トグルボタン</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">アクティブトグルボタン</button>

data-bs-toggle="button"属性がトグル機能を有効にします。

ボタングループ

時々、ボタンは一緒に過ごすのが好きです。その時はボタングループが役立ちます！

<div class="btn-group" role="group" aria-label="基本例">
<button type="button" class="btn btn-primary">左</button>
<button type="button" class="btn btn-primary">中央</button>
<button type="button" class="btn btn-primary">右</button>
</div>

btn-groupクラスはボタンをグループ化します。

ドロップダウンボタン

ドロップダウンボタンはサプライズボックスのように、クリックすると更多信息が表示されます！

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンボタン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">アクション</a></li>
<li><a class="dropdown-item" href="#">別のアクション</a></li>
<li><a class="dropdown-item" href="#">ここに他のもの</a></li>
</ul>
</div>

dropdown-toggleクラスとdata-bs-toggle="dropdown"属性がドロップダウン機能を有効にします。

結論

おめでとうございます！Bootstrapボタンの whirlwind tour を刚刚終了しました。忘れてはならないのは、練習は完璧に近づけるものです。さまざまな組み合わせで実験を恐れずに試してみてください。あなたが次のウェブデザインの大物を作るかもしれません！

以下は、私たちがカバーしたすべてのボタンクラスの簡単な参照表です：

クラス 説明
btn ボタンのための基本クラス
btn-primary 主要色のボタン
btn-secondary 副色のボタン
btn-success 成功色のボタン
btn-danger 危険色のボタン
btn-warning 警告色のボタン
btn-info 情報色のボタン
btn-light ライト色のボタン
btn-dark ダーク色のボタン
btn-lg 大型ボタン
btn-sm 小型ボタン
btn-outline-* アウトラインボタン
active アクティブ状態のボタン
disabled 無効なボタン
data-bs-toggle="button" トグルボタン
btn-group ボタングループ
dropdown-toggle ドロップダウンボタン

ハッピーコーディング、そしてBootstrapと共にいけ！

Credits: Image by storyset

前のチュートリアル:
Bootstrap - グリッドデモ
次のチュートリアル:
Bootstrap - ナビゲーションデモ