Bootstrap - 仪表板範例

歡迎，有抱負的開發者們！今天，我們將踏上一段令人興奮的旅程，進入Bootstrap的世界，並創建一個出色的仪表板範例。作為你們友好的鄰居計算機科學老師，我很高興能夠引導你們完成這個過程，即使你們之前從未寫過一行代碼。所以，請繫好安全帶，我們一起來投入這個旅程！

Bootstrap-Dashboard 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結構

現在，讓我們設置仪表板的基本結構：

<!DOCTYPE html>
<html lang="zh-CN">
<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-fluid">
<!-- 我們的仪表板內容將放在這裡 -->
</div>

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

這就像是在我們的房子中鋪設基礎。container-fluid類保證我們的内容佔滿整個屏幕寬度。

建立仪表板

步驟3：創建導航欄

讓我們從為仪表板添加導航欄開始：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">我的仪表板</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分析</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">設置</a>
</li>
</ul>
</div>
</div>
</nav>

這段代碼創建了一個響應式的導航欄。它就像是我們仪表板的招牌，幫助用戶導航到不同的部分。

步驟4：添加側邊欄

接下來，讓我們添加一個側邊欄，以提供額外的導航選項：

<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
仪表板
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
訂單
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
產品
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
客戶
</a>
</li>
</ul>
</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- 主内容將放在這裡 -->
</main>
</div>

這個側邊欄就像餐廳中的菜單，提供快速訪問我們仪表板不同部分的途徑。

步驟5：創建仪表板小工具

現在，讓我們在主内容區域添加一些小工具：

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">仪表板</h1>
</div>

<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">總銷售額</h5>
<p class="card-text display-4">$15,000</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">新客戶</h5>
<p class="card-text display-4">250</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">待處理訂單</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>

這些小工具就像是我們仪表板房子中的房間，每個都有特定的用途，並顯示重要的信息。

增強我們的仪表板

步驟6：添加图表

讓我們添加一個图表，使我们的仪表板更具動態性。我們將使用Chart.js，一個流行的图表庫：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="row mt-4">
<div class="col-md-8">
<canvas id="salesChart"></canvas>
</div>
</div>

<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
datasets: [{
label: '銷售',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

這個图表就像是我们仪表板房子中的窗户，提供了一個查看銷售趨勢的視角。

步驟7：添加表格

最後，讓我們添加一個表格來顯示一些詳細數據：

<div class="row mt-4">
<div class="col-md-12">
<h3>最近訂單</h3>
<table class="table table-striped">
<thead>
<tr>
<th>訂單ID</th>
<th>客戶</th>
<th>產品</th>
<th>數量</th>
<th>狀態</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Doe</td>
<td>部件A</td>
<td>$100</td>
<td><span class="badge bg-success">已完成</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>部件B</td>
<td>$75</td>
<td><span class="badge bg-warning">待處理</span></td>
</tr>
<!-- 如有需要，添加更多行 -->
</tbody>
</table>
</div>
</div>

這個表格就像是我们仪表板中的文件櫃，整齊地組織和顯示重要的數據。

結論

恭喜你們！你們剛剛建立了一個美麗的Bootstrap仪表板。記住，像任何技能一樣，網頁開發會隨著練習而進步。如果第一次事情不完美，不要氣餒 - 即使是經驗豐富的開發者也要花時間調試和改進他們的代碼。

這裡是一個我們使用過的Bootstrap類別的快速參考表：

類別	用途
container-fluid	創建全寬容器
navbar	創建導航欄
row	創建水平列群
col-md-*	創建響應式列
card	創建可彈性内容容器
table	樣式化HTML表格
badge	創建小型計數和標籤組件

繼續探索，繼續編碼，最重要的是，玩得開心！你們在網頁開發的旅程才剛開始，前方有著一個充滿刺激的可能性的世界。

Credits: Image by storyset