부트스트랩 - 대시보드 데모
안녕하세요, 열정적인 개발자 여러분! 오늘 우리는 부트스트랩의 세계로 흥미로운 여정을 떠나고 대시보드 데모를 만들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 여러분이 코드를 한 줄도 작성하지 않았더라도 이 과정을 안내해 드리는 것을 기쁘게 생각합니다. 그러니 안전벨트를 고정하고 함께潜入을 시작해 보겠습니다!
부트스트랩은 무엇인가요?
대시보드를 만들기 전에 잠시 부트스트랩에 대해 이해해 보겠습니다. 부트스트랩은 집을 짓는 것을 상상해 보세요. 부트스트랩은 벽, 문, 창이 이미 설계된 사전 제작 키트와 같습니다. 이는 강력한 프론트엔드 프레임워크로, 사전 제작된 컴포넌트와 스타일을 제공하여 반응형과 시각적으로 아름다운 웹사이트를 만들기 쉽게 합니다.
프로젝트 설정
단계 1: 부트스트랩 포함
먼저 프로젝트에 부트스트랩을 포함시켜야 합니다. 이를 위해 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>이 줄들은 부트스트랩을 우리의 코딩 파티에 초대하는 것과 같습니다. 그들은 우리가 필요로 할 모든 스타일과 인터랙티브 기능을 가져옵니다.
단계 2: 기본 HTML 구조
이제 대시보드의 기본 구조를 설정해 보겠습니다:
<!DOCTYPE html>
<html lang="en">
<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"> pendiente 주문</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: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
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>Widget A</td>
<td>$100</td>
<td><span class="badge bg-success">완료됨</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning"> pendiente</span></td>
</tr>
<!-- 필요에 따라 더 많은 행을 추가하세요 -->
</tbody>
</table>
</div>
</div>이 테이블은 우리의 대시보드 집에서 파일 캐비닛과 같아, 중요한 데이터를 깔끔하게 정리하고 표시합니다.
결론
축하합니다! 여러분은 아름다운 부트스트랩 대시보드를 만들었습니다. 기억하시라, 웹 개발은 어떤 기술처럼 연습을 통해 향상됩니다. 첫 번째로 작동하지 않는 경우 낙담하지 마세요 - 경험 많은 개발자들도 코드를 디버깅하고 개선하는 데 시간을 보냅니다.
여기서 사용한 부트스트랩 클래스의 빠른 참조 표입니다:
| 클래스 | 목적 |
|---|---|
| container-fluid | 전체 너비 컨테이너 생성 |
| navbar | 네비게이션 바 생성 |
| row | 수평 컬럼 그룹 생성 |
| col-md-* | 반응형 컬럼 생성 |
| card | 유연한 콘텐츠 컨테이너 생성 |
| table | HTML 테이블 스타일링 |
| badge | 작은 카운트 및 레이블 컴포넌트 생성 |
계속 탐구하고, 계속 코딩하고, 가장 중요한 것은 즐겁게 하세요! 여러분의 웹 개발 여정이刚刚 시작되었고, 앞으로 흥미로운 가능성이 가득하다.
Credits: Image by storyset