Bootstrap - Dashboard Demo
Добро пожаловать,野心勃勃的开发者们! Сегодня мы отправимся в увлекательное путешествие в мир Bootstrap и создадим потрясающий демо-приложение панели инструментов. Как ваш доброжелательный сосед по компьютерным наукам, я рад помочь вам в этом процессе, даже если вы никогда не писали ни строчки кода. Так что пристегнитесь и погружайтесь с нами!
Что такое Bootstrap?
Прежде чем мы начнем создавать нашу панель инструментов, давайте на минутку поймем, что такое Bootstrap. Представьте, что вы пытаетесь построить дом. Bootstrap - это как prefab-комплект, который уже включает в себя стены, двери и окна. Это мощный фронтенд-фреймворк, который предоставляет готовые компоненты и стили, делая создание адаптивных и визуально привлекательных веб-сайтов проще.
Настройка нашего проекта
Шаг 1: Включить Bootstrap
Во-первых, нам нужно включить Bootstrap в наш проект. Мы сделаем это, добавив следующие строки в секцию <head> нашего HTML-файла:
<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="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>Этот код создает адаптивную навигационную строку. Это как будто табличка нашей панели инструментов, помогающая пользователям navigировать по разным разделам.
Шаг 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>Джон Доу</td>
<td>Виджет A</td>
<td>$100</td>
<td><span class="badge bg-success">Завершен</span></td>
</tr>
<tr>
<td>002</td>
<td>Джейн Смит</td>
<td>Виджет B</td>
<td>$75</td>
<td><span class="badge bg-warning">В ожидании</span></td>
</tr>
<!-- Добавьте больше строк по мере необходимости -->
</tbody>
</table>
</div>
</div>Эта таблица как будто файловый ящик в нашей панели инструментов, аккуратно организующий и отображающий важные данные.
Заключение
Поздравления! Вы только что создали красивую панель инструментов Bootstrap. Помните, как и любая другая مهра, веб-разработка улучшается с практикой. Не отчаивайтесь, если что-то не сработает идеально с первого раза - даже опытные разработчики тратят время на отладку и улучшение своего кода.
Вот quick reference таблица классов Bootstrap, которые мы использовали:
| Класс | Назначение |
|---|---|
| container-fluid | Создает контейнер полной ширины |
| navbar | Создает навигационную строку |
| row | Создает горизонтальную группу столбцов |
| col-md-* | Создает адаптивные столбцы |
| card | Создает гибкий контейнер содержимого |
| table | Стилизует HTML-таблицу |
| badge | Создает小型 счетчик и компонент labeling |
Продолжайте исследовать, продолжайте программировать и, самое главное, получайте удовольствие! Ваше путешествие в веб-разработке только началось, и перед вами открывается целый мир захватывающих возможностей.
Credits: Image by storyset