Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Blog RTL Demo

Обзор

Здравствуйте,野心勃勃的网页开发者们！今天，我们将踏上一段激动人心的旅程，进入Bootstrap的世界，并创建一个支持RTL（从右到左）的漂亮博客。如果你是新手，不用担心 - 我会像幼儿园老师解释天空为什么是蓝色那样耐心地引导你完成每一步。让我们开始吧！

Bootstrap-Blog RTL Demo

什么是博客？

在开始编码之前，让我们花点时间了解一下什么是博客。想象一下，你有一个数字日记，可以与世界分享你的想法、经历和猫咪视频。这本质上就是博客！这是一个网站，其中的条目（称为“帖子”）按逆时间顺序显示，最新的帖子排在前面。

现在，让我们戴上开发者帽子，开始使用Bootstrap构建我们自己的博客！

设置我们的项目

首先，我们需要设置我们的项目。在计算机上创建一个新文件夹，命名为“bootstrap-blog-rtl”。在这个文件夹中，创建一个名为“index.html”的HTML文件。在你的favorite文本编辑器中打开这个文件。

让我们从一个基本的HTML结构开始：

<!DOCTYPE html>
<html lang="ru" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой великолепный RTL блог</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
    <h1>Добро пожаловать в мой великолепный RTL блог!</h1>

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

让我们来分析一下：

  1. Мы установили атрибут dir в значение "rtl" в теге <html>, чтобы включить макет справа налево.
  2. Мы включили файл CSS Bootstrap и RTL версию CSS Bootstrap.
  3. Мы добавили простой тег <h1>, чтобы проверить нашу страницу.
  4. Наконец, мы включили JavaScript-пакет Bootstrap в конце тела.

Создание навигационной панели

Теперь добавим панель навигации в наш блог. Мы будем использовать компонент навигационной панели Bootstrap для этого:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <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-меню на smaller экранах.

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

Теперь создадим основной макет для нашего блога. Мы будем использовать сеточную систему Bootstrap для создания двухколоночного макета:

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <!-- Здесь будут идти посты блога -->
        </div>
        <div class="col-md-4">
            <!-- Здесь будет содержимое.sidebar -->
        </div>
    </div>
</div>

Это создает контейнер с двумя колонками: широкой для постов блога и窄的 для содержимого sidebar.

Добавление постов блога

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

<div class="col-md-8">
    <article class="blog-post">
        <h2 class="blog-post-title">Пример поста в блоге</h2>
        <p class="blog-post-meta">1 января 2023 года от <a href="#">Марка</a></p>
        <p>Это пример поста в блоге. Он может содержать текст, изображения и другие HTML-элементы.</p>
        <hr>
    </article>

    <article class="blog-post">
        <h2 class="blog-post-title">Другой пост в блоге</h2>
        <p class="blog-post-meta">15 февраля 2023 года от <a href="#">Якоба</a></p>
        <p>Здесь еще один пример поста в блоге. Вы можете добавить столько, сколько вам нравится!</p>
        <hr>
    </article>
</div>

Each blog post is wrapped in an <article> tag for semantic HTML. We use Bootstrap's typography classes to style the post title and meta information.

Добавление содержимого sidebar

Теперь добавим содержимое в наш sidebar:

<div class="col-md-4">
    <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>

Это добавляет раздел "О нас" и список "Архивы" в наш sidebar.

Улучшение RTL-поддержки

Наш блог уже友好 к RTL благодаря включенному нами ранее CSS Bootstrap RTL. Однако давайте добавим немного собственного CSS, чтобы进一步提升 RTL-макет:

<style>
    body {
        text-align: right;
    }
    .navbar-nav {
        margin-right: auto;
        margin-left: 0 !important;
    }
    .blog-post-meta {
        text-align: left;
    }
</style>

Добавьте это в раздел <head> вашего HTML. Это обеспечивает выравнивание текста справа, выравнивание элементов навигации слева (что является правым в RTL), и выравнивание метаданных поста блога слева для лучшей читаемости.

Заключение

Поздравляю! Вы только что создали базовый макет RTL-блога с использованием Bootstrap. Вот таблица, резюмирующая основные компоненты, которые мы использовали:

Компонент Назначение
Navbar Меню навигации
Grid system Макет страницы
Typography classes Стилизация текста
Utility classes Отступы и фоны

Помните, это только начало. Вы можете further customize ваш блог, добавляя больше компонентов Bootstrap, реализуя систему комментирования или даже интегрируя систему управления контентом.

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

Счастливого кодирования, будущие веб-волшебники! ?‍♂️?

Credits: Image by storyset

Предыдущий учебник:
Демонстрация Bootstrap-Carousel RTL
Следующий учебник:
Bootstrap-Dashboard RTL Demo