Bootstrap - Альбом Demо

Добро пожаловать,野心勃勃ые веб-разработчики! Сегодня мы окунемся в захватывающий мир Bootstrap и создадим красивый демо-альбом. Как ваш доброжелательный соседский преподаватель информатики, я здесь, чтобы провести вас через это путешествие шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это кодирование приключение вместе со мной!

Bootstrap-Album Demo

Что такое альбом?

Прежде чем мы перейдем к коду, давайте поговорим о том, что такое альбом в контексте веб-дизайна. Представьте себе цифровой фотоальбом, но вместо просто фотографий, он может демонстрировать различные типы контента. Это визуально привлекательный способ представить коллекцию вещей,будь то продукты, работы из портфолио или даже посты в блоге.

В нашем случае, мы создадим адаптивную сетку из карточек, каждая из которых представляет элемент нашего альбома. Это как разложить кучу поляроидных фотографий на столе, но мы делаем это на веб-странице!

Настройка нашего проекта

Шаг 1: HTML структура

Давайте начнем с создания базовой HTML структуры для нашего демо-альбома. Мы будем использовать CSS и JavaScript файлы Bootstrap, чтобы упростить нашу жизнь.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Альбом Demо</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Содержание нашего альбома пойдет сюда -->

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

Это наша основа. Представьте это как пустой холст, на котором мы собираемся рисовать. Тег <link> загружает стили Bootstrap, а тег <script> в нижней части загружает его функциональность JavaScript.

Создание макета альбома

Шаг 2: Добавление заголовка

Давайте добавим простой заголовок к нашему альбому:

<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Мой классный альбом</strong>
</a>
</div>
</div>
</header>

Это создает темный навбар в верхней части нашей страницы. Это как титульная страница нашего фотоальбома!

Шаг 3: Основная область контента

Теперь давайте настроим основную область контента, где будут жить наши элементы альбома:

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Элементы альбома пойдут сюда -->
</div>
</div>
</div>
</main>

Эта структура создает светлый фон для нашего альбома и настраивает адаптивную сетку. Это как разложить пустую страницу фотоальбома, готовую к заполнению!

Шаг 4: Создание элементов альбома

Теперь наступает интересная часть - добавление элементов в наш альбом:

<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
<div class="card-body">
<p class="card-text">Это более широкая карточка с поддерживающим текстом ниже, который естественным образом подводит к дополнительному контенту.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Просмотр</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Редактировать</button>
</div>
<small class="text-muted">9 минут</small>
</div>
</div>
</div>
</div>

Этот код создает один элемент альбома. Элемент <svg> является местозаполнителем для изображения. В реальном проекте вы замените это <img> тегом, указывающим на ваше реальное изображение.

Для создания нескольких элементов просто скопируйте и вставьте этот код несколько раз внутри row div, который мы создали ранее.

Улучшение нашего альбома

Шаг 5: Добавление футера

Давайте закончим наш альбом простым футером:

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Назад наверх</a>
</p>
<p class="mb-1">Пример альбома © Bootstrap, но пожалуйста, скачайте и настройте его для себя!</p>
</div>
</footer>

Это добавляет nice touch в нижнюю часть нашей страницы, давая признание там, где это необходимо, и предоставляя удобную ссылку "Назад наверх".

Объединение всего вместе

Теперь, когда мы рассмотрели все компоненты, давайте посмотрим, как выглядит наш полный HTML файл:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Альбом Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Мой классный альбом</strong>
</a>
</div>
</div>
</header>

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Элемент альбома 1 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
</svg>
<div class="card-body">
<p class="card-text">Это более широкая карточка с поддерживающим текстом ниже, который естественным образом подводит к дополнительному контенту.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Просмотр</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Редактировать</button>
</div>
<small class="text-muted">9 минут</small>
</div>
</div>
</div>
</div>
<!-- Повторите структуру элемента альбома выше для更多的人 -->
</div>
</div>
</div>
</main>

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Назад наверх</a>
</p>
<p class="mb-1">Пример альбома © Bootstrap, но пожалуйста, скачайте и настройте его для себя!</p>
</div>
</footer>

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

Заключение

И вот мы и создали красивый, адаптивный демо-альбом с использованием Bootstrap. Помните, это только начало. Не стесняйтесь настраивать цвета, добавлять свои изображения и экспериментировать с макетом. Веб-разработка - это все о экспериментах и creativity!

Заканчивая, я вспоминаю студента, который однажды сказал мне: "Сэр, я никогда не думал, что смогу создать что-то такое профессиональное, только с помощью HTML!" Это магия фреймворков, таких как Bootstrap - они дают вам старт, позволяя сосредоточиться на контенте и creativitете.

Продолжайте практиковаться, продолжайте исследовать и, самое главное, получайте удовольствие! До свидания, счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:

Демо липкого футера Bootstrap

Следующий учебник:

Демо входа в Bootstrap