日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

Bootstrap - チェックアウトデモ

Overview

こんにちは、将来のウェブ開発者さんたち！今日は、Bootstrapを使用してチェックアウトページを作成する興奮人心的な旅に一緒に出発します。近所の親切なコンピュータ教師として、このプロセスをガイドするのがとても楽しみです。コードに慣れていない方も心配しないでください。私たちはステップバイステップ進めていきます。最後に、誇りを持って自分の作品を誇示できるプロフェッショナルなチェックアウトフォームを作成するでしょう！

Bootstrap-Checkout Demo

Bootstrapとは？

まず、Bootstrapについて話しましょう。家を建てるのを考えてみてください。それぞれのレンガをから作る代わりに、既に作られた壁や屋根があったらどうでしょうか？それがBootstrapの役割です。ウェブ開発において、美しいウェブサイトを作成するのをはるかに簡単で迅速にするための预制部品とスタイルのコレクションです。

プロジェクトの設定

ステップ1: Bootstrapをプロジェクトに含める

まず、プロジェクトにBootstrapを含めましょう。これまり、仕事を始める前に道具箱を用意することです。以下の行をHTMLファイルの<head>に追加してください：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

これらの行は、Bootstrapのスタイルとスクリプトをインターネットから取得するためのもので、何かをダウンロードする必要はありません。

ステップ2: 基本的なHTML構造

次に、基本的なHTML構造を設定しましょう：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チェックアウトデモ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>チェックアウトフォーム</h1>
<!-- フォームがここに入ります -->
</div>

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

これにより、タイトルとフォームのためのコンテナを持つ基本的なウェブページが作成されます。containerクラスはBootstrapクラスで、コンテンツを中央に配置し、適切なパディングを追加します。

チェックアウトフォームの構築

ステップ3: フォームの作成

次に、コンテナ内にフォームを追加しましょう：

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">名前</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">苗字</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">メール</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">住所</label>
<input type="text" class="form-control" id="address" placeholder="1234 メインストリート" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">注文を確定</button>
</form>

これを分解しましょう：

  1. Bootstrapのグリッドシステムを使用して、名前と苗字のための2つのカラムを作成します。
  2. mb-3クラスは、各フォームグループの下部にマージンを追加します。
  3. form-labelとform-controlは、ラベルと入力のスタイルを設定するBootstrapクラスです。
  4. btnクラスは基本ボタンのスタイルを設定し、btn-primaryはボタンに青色を与え、btn-lgはボタンを大きくします。

ステップ4: 支払い情報の追加

支払い情報のセクションを追加しましょう：

<h4 class="mb-3">支払い</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">クレジットカード</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">デビットカード</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">カード名義人</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">クレジットカード番号</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">有効期限</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

ここでは、支払い方法の選択のためのラジオボタンとカード詳細のフィールドを追加しました。gy-3クラスは、行間に垂直なギャップを追加します。

ユーザーエクスペリエンスの向上

ステップ5: バリデーションフィードバックの追加

Bootstrapはフォームバリデーションのフィードバッククラスを提供します。名前の入力にいくつか追加してみましょう：

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">名前</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
よくできました！
</div>
<div class="invalid-feedback">
名前を入力してください。
</div>
</div>

これが動作するように、JavaScriptを追加します：

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

このスクリプトは、フォームが送信されたときにwas-validatedクラスをフォームに追加し、バリデーションフィードバックを表示するトリガーします。

結論

おめでとうございます！Bootstrapを使用してプロフェッショナルなチェックアウトフォームを作成しました。以下に学んだことをまとめます：

  1. Bootstrapをプロジェクトに含める方法
  2. Bootstrapのグリッドシステムを使用してレイアウトする方法
  3. フォーム要素をBootstrapクラスでスタイルする方法
  4. バリデーションフィードバックを追加する方法

心に留めておいてください、練習は完璧に近づけます。このフォームを修正してみたり、新しいフィールドを追加したり、スタイルを変更したりしてみてください。実験を重ねるほど、スキルが向上します！

以下は、主に使用したBootstrapクラスの表です：

クラス 目的
container コンテンツを中央に配置し、パディングを追加
row 水平なカラムグループを作成
col-md-6 メディア画面及以上で50%幅のカラムを作成
form-label フォームラベルのスタイル
form-control フォーム入力のスタイル
btn 基本ボタンのスタイル
btn-primary ボタンに青色を与える
btn-lg ボタンを大きくする
form-check チェックボックスとラジオボタンのスタイル
valid-feedback 有効な入力のフィードバックを表示
invalid-feedback 無効な入力のフィードバックを表示

ハッピーコーディング、そして忘れてはならないのは、すべての専門家もかつては初心者だったことをです。練習を続ければ、あなたが何を作れるか驚かれるでしょう！

Credits: Image by storyset

前のチュートリアル:
Bootstrap価格設定デモ
次のチュートリアル:
Bootstrapプロダクトデモ