まず、BootstrapのCSSとJavaScriptをHTMLページに組み込む必要があります。以下のCDNリンクを使用する方法を例として説明します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- ここにコンテンツを追加 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>次に、トグルスイッチを追加します。以下は、単一のトグルスイッチの例です。
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>このコードでは、switchクラスがトグルスイッチのコンテナを定義し、input要素が実際のスイッチを表しています。slider roundクラスは、スイッチの見た目をカスタマイズするためのスタイルを提供します。
さらに、トグルスイッチの状態を取得するためにJavaScriptを使用することもできます。以下は、トグルスイッチの状態をコンソールに表示する例です。
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
console.log("スイッチがオンになりました");
} else {
console.log("スイッチがオフになりました");
}
});
});
</script>このコードでは、jQueryを使用してトグルスイッチの変更イベントを監視し、is(':checked')メソッドを使用してスイッチの状態を確認しています。
以上が、Bootstrapのトグルスイッチの基本的な使い方とコード例です。これを応用して、さまざまなデザインや機能を持つトグルスイッチを作成することができます。ウェブ開発で使いやすく、魅力的なユーザーインターフェースを実現するために、Bootstrapのトグルスイッチを活用してみてください。