Bootstrap 5でのトグルスイッチの使用方法

2024-02-09 17:19 Bootstrap 5 トグルスイッチ コード例

まず、Bootstrap 5のCDNリンクをHTMLファイルのセクションに追加します。以下のコードを参考にしてください:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 5 Toggle Switch</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- ここにトグルスイッチを配置するコードを追加します -->

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

次に、トグルスイッチを実装するための基本的なコードを示します。以下のコード片は、トグルスイッチを作成し、初期状態をオンに設定する例です。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="toggleSwitch" checked>
  <label class="form-check-label" for="toggleSwitch">オン/オフ</label>
</div>

上記のコードでは、form-checkとform-switchクラスを使用して、トグルスイッチのスタイルを適用しています。form-check-inputクラスを持つ<input>要素は、実際のトグルスイッチの状態を表し、form-check-labelクラスを持つ<label>要素は、トグルスイッチのテキストラベルを表します。

また、checked属性を追加することで、初期状態をオンに設定しています。この属性を削除すると、初期状態がオフになります。

さらに、トグルスイッチの状態を取得するためにJavaScriptを使用する方法もあります。以下のコードは、トグルスイッチの状態をコンソールに表示する例です。

<script>
  const toggleSwitch = document.getElementById('toggleSwitch');

  toggleSwitch.addEventListener('change', function() {
    if (this.checked) {
      console.log('トグルスイッチはオンです');
    } else {
      console.log('トグルスイッチはオフです');
    }
  });
</script>

上記のコードでは、getElementByIdメソッドを使用して、トグルスイッチの要素を取得し、changeイベントリスナーを追加しています。イベントリスナー内の条件分岐によって、トグルスイッチの状態に応じたメッセージがコンソールに表示されます。

以上が、Bootstrap 5でのトグルスイッチの使用方法とコード例の解説です。これらのコードを活用することで、Web開発において便利なトグルスイッチを実装することができます。