Bootstrap - демонстрация блога
Что такое блог?
Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир блогинга с использованием Bootstrap. Но прежде чем приступить к кодированию, давайте на минутку разберемся, что же такое блог.
Блог, сокращение от "weblog", это regularly обновляемый веб-сайт или веб-страница, обычно управляемая одним лицом или небольшой группой, который написан в неформальном или conversational стиле. Это как онлайн-дневник, где люди делятся своими мыслями, опытом или знаниями по различным темам.
Я помню, когда впервые начал блогить в начале 2000-х годов. Это было революционное средство для подключения к людям по всему миру, которые делят ваши интересы. Теперь давайте посмотрим, как мы можем создать свой собственный блог с использованием Bootstrap!
Настройка нашей демонстрации блога Bootstrap
Шаг 1: Основная HTML структура
Давайте начнем с основной HTML структуры для нашего блога. Создайте новый файл под названием index.html и добавьте следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой потрясающий блог</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Содержание нашего блога будет здесь -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Это устанавливает нашу основную HTML структуру и включает необходимые файлы Bootstrap CSS и JavaScript. Представьте это как скелет нашего блога – мы добавим мясо и мышцы (содержание и стили) позже!
Шаг 2: Создание навигационной строки
Теперь добавим навигационную строку в наш блог. Вставьте следующий код сразу после тега <body>:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Мой потрясающий блог</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
<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" aria-current="page" 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>Этот код создает адаптивную навигационную строку с ссылками на страницы Домой, О нас и Контакт. Класс navbar-expand-lg обеспечивает расширение навигационной строки на больших экранах и ее сворачивание в hamburger-меню на маленьких. Это как GPS для вашего блога – помогает читателям ориентироваться в вашем контенте!
Шаг 3: Добавление основной области содержимого
Далее создадим основную область для наших блог-постов. Добавьте этот код после навигационной строки:
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Блог-посты будут здесь -->
</div>
<div class="col-md-4">
<!-- Содержание_sidebar будет здесь -->
</div>
</div>
</div>Это создает контейнер с двумя колонками: одну для наших блог-постов (8 колонок в ширину) и одну для sidebar (4 колонки в ширину). Это как разделение вашей спальни на зону для учебы и зону для отдыха – каждая служит своей цели!
Шаг 4: Создание блог-поста
Теперь добавим пример блог-поста. Вставьте этот код在那里, где мы оставили комментарий для блог-постов:
<article class="blog-post">
<h2 class="blog-post-title">Пример блог-поста</h2>
<p class="blog-post-meta">1 января 2023 года от <a href="#">Марка</a></p>
<p>Это пример дополнительного текста для абзаца. Он написан для заполнения доступного пространства и демонстрации того, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять его часто, чтобы поддерживать демонстрацию, поэтому будьте внимательны к этому exactsame строке текста.</p>
<h3>Подзаголовок</h3>
<p>Это пример дополнительного текста для абзаца. Он написан для заполнения доступного пространства и демонстрации того, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять его часто, чтобы поддерживать демонстрацию, поэтому будьте внимательны к этому exactsame строке текста.</p>
<a href="#" class="btn btn-primary">Читать далее</a>
</article>Этот код создает простой блог-пост с заголовком, метаданными, абзацами и кнопкой "Читать далее". Это как написание письма вашим читателям, делясь своими мыслями и идеями!
Шаг 5: Добавление содержимого sidebar
Наконец, добавим содержимое в наш sidebar. Вставьте этот код在那里, где мы оставили комментарий для содержимого sidebar:
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">О нас</h4>
<p class="mb-0">Добро пожаловать в мой потрясающий блог! Здесь я делясь своими мыслями о технологии, кодировании и жизни разработчика.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Архивы</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">Март 2023</a></li>
<li><a href="#">Февраль 2023</a></li>
<li><a href="#">Январь 2023</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Где else</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>Этот код добавляет раздел "О нас", архив прошлых постов и ссылки на социальные профили. Это как добавить личный штрих к вашему блогу, давая читателям представление о том, кто вы и что еще вы написали!
Заключение
И вот у вас есть базовая структура для блога на Bootstrap! Конечно, это только начало. Вы можете настроить цвета, добавить больше постов, включить изображения и многое другое. Главное – начать с простого и постепенно развивать.
Помните, создание блога – это не только о коде – это о том, чтобы делиться своим голосом с миром. Так что не бойтесь экспериментировать, делать ошибки и, самое главное, получать удовольствие от этого!
Счастливого кодирования, и пусть ваш блог будет наполнен потрясающим контентом, который вдохновляет и обучает других!
Credits: Image by storyset