Bootstrap - 選購 RTL Demo
概觀
大家好，有志於網頁開發的初學者！今天，我們將進入Bootstrap的精彩世界，並創建一個支持RTL（從右到左）的漂亮結賬頁面。別擔心你對這個不熟悉 - 我會像一位有耐心的老師一樣引導你完成每一步，這位老師已經幫助過無數像你一樣的學生。
Bootstrap是什麼？
在我們進入結賬演示之前，讓我們花一會兒時間了解Bootstrap是什麼。想像一下你正在蓋房子。Bootstrap就像是一個預製套件，為你提供所有基本的結構元素。它是一個免費、開源的CSS框架，能夠幫助你快速、輕鬆地創建響應式、移動設備優先的網站。
為什麼使用Bootstrap？
- 節省時間
- 確保一致性
- 出廠即支持響應式設計
- 擁有大量的社群和支持
建立我們的專案
讓我們開始建立我們的專案。我們需要在HTML文件中包含Bootstrap。以下是如何操作的：
<!DOCTYPE html>
<html lang="zh-tw" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 選購 RTL Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<!-- 我們的內容將放在這裡 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>在這個設置中，我們包含了常规的Bootstrap CSS和RTL版本。<html>標籤中的dir="rtl"屬性告訴瀏覽器以從右到左的方向渲染頁面。
創建結賬表單
現在，讓我們創建我們的結賬表單。我們將使用Bootstrap的網格系統和表單組件來創建一個響應式佈局。
<div class="container mt-5">
<h1 class="mb-4">結賬</h1>
<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>
<!-- 更多表單字段將放在這裡 -->
</form>
</div>讓我們來分析一下：
-
container類創建一個我們內容居中的容器。 -
row和col-md-6類創建一個響應式的兩列佈局。 -
form-label和form-control類為我們的標籤和輸入設置樣式。
添加更多表單字段
讓我們在表單中添加一些更多字段：
<div class="mb-3">
<label for="email" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">地址</label>
<input type="text" class="form-control" id="address" required>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country" class="form-label">國家</label>
<select class="form-select" id="country" required>
<option value="">選擇...</option>
<option>美國</option>
<option>加拿大</option>
<option>墨西哥</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="state" class="form-label">州</label>
<select class="form-select" id="state" required>
<option value="">選擇...</option>
<option>加州</option>
<option>紐約州</option>
<option>德州</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">郵政編碼</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>在這裡，我們添加了電子郵件、地址、國家、州和郵政編碼的字段。注意我們是如何使用form-select為下拉菜單設置樣式的。
支付信息
現在，讓我們添加一個支付信息的部分：
<h3 class="mb-3">支付</h3>
<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 class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name" class="form-label">卡上姓名</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number" class="form-label">信用卡號碼</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-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 mb-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>這個部分包括選擇支付方法的單選按鈕和信用卡詳情的字段。
添加提交按鈕
最後，讓我們在表單中添加一個提交按鈕：
<button class="btn btn-primary btn-lg btn-block" type="submit">下單</button>btn、btn-primary和btn-lg類為我們的按鈕設置為大型的、主要顏色的按鈕。
RTL考慮
當使用RTL佈局時，請記住以下幾點：
- 文本對齊：在RTL佈局中，文本通常對齊到右邊。
- 表單佈局：表單標籤應該顯示在他們輸入框的右邊。
- 圖標：方向性圖標（如箭頭）應該被翻轉。
Bootstrap的RTL CSS會自動處理大多數這些考慮！
結論
恭喜你！你剛剛使用Bootstrap創建了一個響應式、支持RTL的結賬頁面。記住，熟練來自練習。嘗試修改這個表單，添加新的字段，或者更改樣式，使其成為你自己的。
這裡是一個總結我們使用過的Bootstrap類的表格：
| 類 | 目的 |
|---|---|
| container | 為內容創建一個居中的容器 |
| row | 創建一個水平列組 |
| col-md-* | 創建不同寬度的列 |
| form-label | 為表單標籤設置樣式 |
| form-control | 為表單輸入設置樣式 |
| form-select | 為下拉菜單設置樣式 |
| form-check | 為複選框和單選按鈕設置樣式 |
| btn | 按鈕的基本樣式 |
| btn-primary | 將主要顏色應用到按鈕 |
| btn-lg | 使按鈕變大 |
快樂編程，並記住 - 每個專家都曾是初學者。持續練習，你很快就會成為Bootstrap的專家！
Credits: Image by storyset