Bootstrap - 滑動條範例：初學者的全面指南
你好啊，有抱負的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 Bootstrap 滑動條的世界。作為你們親切友善的鄰居電腦老師，我將引導你們一步一步地進行這次冒險。所以，拿起你們最喜歡的飲料，放鬆一下，我們來開始吧！
什麼是 Bootstrap 滑動條？
在我們開始編程之前，讓我們先了解一下我們要處理的是什麼。Bootstrap 滑動條是一個用戶界面組件，使用戶可以通過沿著一個條滑動把手來選擇一個範圍內的值。這就像那些老式收音機上看到的音量滑動條的數字版本——很酷，對吧？
為什麼使用 Bootstrap 滑動條？
滑動條對於以下情況非常好：
- 在範圍內選擇數值
- 調整像音量或亮度這樣的設置
- 根據範圍過濾數據（想想購物網站上的價格範圍）
現在我們知道了它們是什麼以及它們的用途，讓我們來動手編寫一些代碼吧！
設置 Bootstrap 環境
首先，我們需要設置 Bootstrap 環境。別擔心，這比設置一部新手機要容易！
步驟 1：引入 Bootstrap CSS 和 JS
將以下行添加到你的 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 來參加你的編程派對。它們帶來了我們將需要所有酷炫樣式和功能。
創建你的第一個 Bootstrap 滑動條
現在，讓我們來創建一個基本的滑動條。這就像烤吐司一樣容易——也許有點複雜，但你會掌握它的！
步驟 2：HTML 構架
將以下代碼添加到你的 HTML 頁面正文：
<div class="container mt-5">
<h2>我的第一個 Bootstrap 滑動條</h2>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange">
<p>值： <span id="rangeValue"></span></p>
</div>讓我們分解一下：
-
<div class="container mt-5">：這創建了一個容器並添加了一些頂部間距。 -
<input type="range">：這是我們的滑動條輸入。 -
class="form-range"：這個 Bootstrap 類為我們的輸入提供了滑動條樣式。 -
min="0" max="100" step="1"：這些設置最小值、最大值和步長。 -
<p>值： <span id="rangeValue"></span></p>：這將顯示我們選擇的值。
步驟 3：JavaScript 魔法
現在，讓我們添加一些 JavaScript 代碼來讓我們的滑動條具有互動性：
<script>
const slider = document.getElementById('customRange');
const output = document.getElementById('rangeValue');
output.innerHTML = slider.value; // 顯示滑動條的默認值
// 當你拖動滑動條把手時更新當前滑動條值
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>這段腚本做了兩件事：
- 它顯示滑動條的初始值。
- 當你移動滑動條時，它會更新顯示的值。
自定義你的滑動條
現在我們已經有一個基本的滑動條了，讓我們來給它增加一點特色。是時候戴上我們的設計師帽子了！
步驟 4：添加一些樣式
讓我們添加一些自定義 CSS 來讓我們的滑動條脫穎而出：
<style>
.custom-range {
width: 300px;
}
.custom-range::-webkit-slider-thumb {
background: #007bff;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
</style>將這段代碼添加到你的 HTML 檔案的 <head> 部分中。它改變了滑動條的寬度並將把手（你拖動的部分）的顏色設為藍色。
步驟 5：創建雙頭滑動條
現在，讓我們來創建一個更先進的東西——一個雙頭滑動條，用於選擇範圍：
<div class="container mt-5">
<h2>價格範圍選擇器</h2>
<div class="row">
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="minPrice">
<p>最低價格：$<span id="minValue"></span></p>
</div>
<div class="col-sm-6">
<input type="range" class="form-range custom-range" min="0" max="1000" step="10" id="maxPrice">
<p>最高價格：$<span id="maxValue"></span></p>
</div>
</div>
</div>以及對應的 JavaScript 代碼：
<script>
const minSlider = document.getElementById('minPrice');
const maxSlider = document.getElementById('maxPrice');
const minOutput = document.getElementById('minValue');
const maxOutput = document.getElementById('maxValue');
minOutput.innerHTML = minSlider.value;
maxOutput.innerHTML = maxSlider.value;
minSlider.oninput = function() {
minOutput.innerHTML = this.value;
if (parseInt(this.value) > parseInt(maxSlider.value)) {
maxSlider.value = this.value;
maxOutput.innerHTML = this.value;
}
}
maxSlider.oninput = function() {
maxOutput.innerHTML = this.value;
if (parseInt(this.value) < parseInt(minSlider.value)) {
minSlider.value = this.value;
minOutput.innerHTML = this.value;
}
}
</script>這創建了兩個滑動條，它們一起工作以選擇價格範圍。腚本確保最低價格永遠不會超過最高價格，反之亦然。
結論
恭喜你！你剛剛創建了你的第一個 Bootstrap 滑動條。從一個簡單的單一滑動條到一個更複雜的雙頭範圍選擇器，你已經走了很長一段路。記住，熟練來自練習，所以不要害怕嘗試不同的樣式和功能。
以下是我們學到的快速總結：
| 概念 | 描述 |
|---|---|
| Bootstrap 設置 | 在你的 HTML 中引入 Bootstrap CSS 和 JS |
| 基本滑動條 | 創建一個簡單的範圍輸入並使用 Bootstrap 進行樣式化 |
| JavaScript 互動 | 使用 JavaScript 來顯示和更新滑動條值 |
| 自定義樣式 | 應用自定義 CSS 來修改滑動條的外觀 |
| 雙頭滑動條 | 創建一個兩端連接的滑動條來選擇範圍 |
繼續滑動你的成功之路，並且快樂編程！
Credits: Image by storyset