فارسی‌سازی Bootstrap

بیشتر صفحات وب در ابتدا برای زبان‌هایی مانند انگلیسی طراحی شده‌اند که جهت نوشتار آن‌ها از چپ به راست یا LTR (Left To Right) است؛ اما زبان‌هایی مانند فارسی و عربی دارای جهت نوشتار RTL (Right To Left) هستند. زمانی که با Bootstrap برای ساخت یک سایت فارسی کار می‌کنیم، تنها ترجمه کردن متن‌ها کافی نیست و باید جهت کلی صفحه، فاصله‌ها، چینش ستون‌ها، فرم‌ها، منوها، جداول، دکمه‌ها و بسیاری از جزئیات رابط کاربری نیز با جهت راست به چپ هماهنگ شوند. Bootstrap از RTL پشتیبانی می‌کند و با استفاده از نسخه RTL فایل CSS می‌توان بسیاری از این تغییرات را بدون نوشتن CSS پیچیده انجام داد. در این مقاله یاد می‌گیریم چگونه Bootstrap را برای یک سایت فارسی آماده کنیم، چه تفاوتی بین نسخه معمولی و RTL وجود دارد، چگونه از dir="rtl" و lang="fa" استفاده کنیم، چگونه فاصله‌ها و تراز متن را به شکل صحیح مدیریت کنیم، چگونه Navbar و فرم‌های فارسی بسازیم و در نهایت یک صفحه واقعی و Responsive فارسی با Bootstrap ایجاد خواهیم کرد.

RTL چیست؟

عبارت RTL مخفف Right To Left است و به معنای راست به چپ است.

در زبان فارسی، متن از سمت راست شروع می‌شود و به سمت چپ ادامه پیدا می‌کند.

برای مثال:

این یک متن فارسی است.

در مقابل، زبان انگلیسی معمولاً از چپ به راست نوشته می‌شود:

This is an English text.

جهت صفحه فقط مربوط به متن نیست؛ بلکه می‌تواند روی موارد مختلفی مانند موارد زیر نیز تأثیر بگذارد:

• محل قرارگیری متن

• فاصله‌ها

• فرم‌ها

• Navbar

• Grid

• Dropdown

• جدول‌ها

• آیکون‌های جهت‌دار

• ترتیب برخی عناصر رابط کاربری

بنابراین در طراحی یک سایت فارسی باید RTL را به شکل اصولی پیاده‌سازی کنیم.

تفاوت LTR و RTL

برای درک بهتر، یک ساختار ساده را در نظر بگیرید:

LTR

[ Sidebar ] [ Main Content ]

در یک رابط RTL ممکن است همان ساختار به شکل زیر نمایش داده شود:

RTL

[ Main Content ] [ Sidebar ]

البته نحوه دقیق نمایش به ساختار HTML، CSS و نحوه استفاده از Bootstrap بستگی دارد.

فعال کردن RTL در HTML

اولین قدم این است که جهت سند HTML را مشخص کنیم.

برای یک سایت فارسی بهتر است از ویژگی‌های زیر استفاده کنیم:

<html lang="fa" dir="rtl">

در اینجا:

lang="fa" مشخص می‌کند زبان اصلی صفحه فارسی است.

و:

dir="rtl" مشخص می‌کند جهت متن و سند راست به چپ است.

یک ساختار پایه:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>سایت فارسی با Bootstrap</title>
</head>

<body>

</body>
</html>

استفاده از lang علاوه بر مشخص کردن زبان، برای دسترس‌پذیری و ابزارهایی مانند Screen Reader نیز مفید است.

استفاده از Bootstrap RTL

Bootstrap نسخه مخصوص RTL را نیز ارائه می‌کند.

به جای استفاده از:

bootstrap.min.css

در پروژه RTL می‌توانیم از:

bootstrap.rtl.min.css

استفاده کنیم.

برای استفاده از CDN:

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet">

بنابراین یک صفحه فارسی ساده می‌تواند به شکل زیر باشد:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<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/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet">
</head>

<body>

    <div class="container py-5">
        <h1>به سایت ما خوش آمدید</h1>
        <p>این یک صفحه فارسی با Bootstrap است.</p>
    </div>

</body>

</html>

چرا فقط dir="rtl" کافی نیست؟

ممکن است تصور کنید که تنها با نوشتن:

<html dir="rtl">

همه چیز کاملاً فارسی و RTL خواهد شد.

در بسیاری از موارد جهت متن درست می‌شود، اما Bootstrap نیز باید از قواعد مناسب RTL استفاده کند.

به همین دلیل در پروژه‌هایی که از Bootstrap استفاده می‌کنند، ترکیب زیر انتخاب مناسبی است:

<html lang="fa" dir="rtl">

و:

bootstrap.rtl.min.css

به این ترتیب هم سند HTML جهت صحیح دارد و هم Bootstrap قواعد RTL را اعمال می‌کند.

استفاده از Margin و Padding در RTL

یکی از مهم‌ترین تغییرات در Bootstrap نسخه‌های جدید، استفاده از کلاس‌های منطقی برای فاصله‌ها است.

برای مثال:

ms-3

و:

me-3

به ترتیب به معنی:

margin-start
margin-end

هستند.

همین مفهوم برای Padding نیز وجود دارد:

ps-3
pe-3

که به معنی:

padding-start
padding-end

است.

این روش نسبت به استفاده مستقیم از margin-left و margin-right انعطاف‌پذیرتر است.

Margin Start و Margin End

فرض کنید می‌خواهیم بین دو عنصر فاصله ایجاد کنیم.

به جای:

<div class="me-3">
    ...
</div>

در یک صفحه RTL، مفهوم me با جهت سند سازگار می‌شود.

این یکی از مزایای استفاده از Logical Properties است.

به طور خلاصه:

مثال:

<button class="btn btn-primary me-2">
    ذخیره
</button>

<button class="btn btn-secondary">
    انصراف
</button>

تفاوت ms و me با Left و Right

کلاس‌های قدیمی‌تر یا CSS مستقیم ممکن است از مواردی مانند:

margin-left: 20px;
margin-right: 20px;

استفاده کنند.

اما در طراحی چندزبانه بهتر است تا حد امکان از مفاهیم منطقی استفاده شود:

Start
End

زیرا در حالت RTL و LTR می‌توانند مطابق جهت صفحه رفتار کنند.

به همین دلیل این روش برای پروژه‌هایی که احتمال پشتیبانی از چند زبان دارند نیز مناسب‌تر است.

تراز کردن متن در RTL

Bootstrap کلاس‌های زیر را برای تراز متن در اختیار ما قرار می‌دهد:

text-start
text-center
text-end

مثال:

<p class="text-start">
    این متن در ابتدای جهت نوشتار قرار می‌گیرد.
</p>

<p class="text-center">
    این متن وسط قرار می‌گیرد.
</p>

<p class="text-end">
    این متن در انتهای جهت نوشتار قرار می‌گیرد.
</p>

نکته مهم این است که start و end مفاهیم منطقی هستند.

بنابراین بهتر است به جای وابستگی غیرضروری به left و right از آن‌ها استفاده کنیم.

مثال کارت فارسی

<div class="card">
    <div class="card-body">
        <h5 class="card-title">عنوان محصول</h5>

        <p class="card-text">
            توضیحات محصول در این قسمت قرار می‌گیرد.
        </p>

        <button class="btn btn-primary">
            مشاهده محصول
        </button>
    </div>
</div>

در صفحه RTL، متن و بسیاری از رفتارهای Bootstrap مطابق جهت صفحه نمایش داده می‌شوند.

RTL و Grid

سیستم Grid یکی از مهم‌ترین قسمت‌های Bootstrap است.

برای مثال:

<div class="container">
    <div class="row">

        <div class="col-md-8">
            محتوای اصلی
        </div>

        <div class="col-md-4">
            ستون کناری
        </div>

    </div>
</div>

در یک صفحه RTL، Bootstrap از قواعد RTL برای جهت و چینش Grid استفاده می‌کند.

ساختار منطقی همچنان همان است:

Container
    |
    +-- Row
         |
         +-- Column
         +-- Column

نکته مهم این است که نباید صرفاً با تغییر نام کلاس‌ها انتظار داشته باشیم تمام طراحی RTL شود؛ dir="rtl" و فایل RTL Bootstrap باید به شکل صحیح در پروژه تنظیم شوند.

RTL و Navbar

Navbar یکی از قسمت‌هایی است که در سایت فارسی اهمیت زیادی دارد.

یک Navbar ساده:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">

        <a class="navbar-brand" href="#">
            فروشگاه من
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="نمایش منو">

            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <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>

استفاده از:

me-auto

در اینجا نکته مهمی دارد.

به جای وابستگی مستقیم به سمت چپ یا راست، از مفهوم margin-end استفاده شده است.

RTL و فرم‌ها

فرم‌های فارسی باید علاوه بر جهت صفحه، از نظر تجربه کاربری نیز با زبان فارسی هماهنگ باشند.

مثال:

<div class="container py-5">

    <h1 class="mb-4">
        ثبت نام
    </h1>

    <form>

        <div class="mb-3">
            <label for="firstName" class="form-label">
                نام
            </label>

            <input
                type="text"
                class="form-control"
                id="firstName"
                placeholder="نام خود را وارد کنید">
        </div>

        <div class="mb-3">
            <label for="lastName" class="form-label">
                نام خانوادگی
            </label>

            <input
                type="text"
                class="form-control"
                id="lastName"
                placeholder="نام خانوادگی خود را وارد کنید">
        </div>

        <div class="mb-3">
            <label for="email" class="form-label">
                ایمیل
            </label>

            <input
                type="email"
                class="form-control"
                id="email"
                placeholder="example@example.com">
        </div>

        <button type="submit" class="btn btn-primary">
            ثبت نام
        </button>

    </form>

</div>

متن فارسی و اطلاعات انگلیسی

در سایت‌های فارسی معمولاً ترکیبی از محتوای فارسی و انگلیسی داریم.

برای مثال:

ایمیل:
example@gmail.com

یا:

Website:
https://example.com

در چنین شرایطی ممکن است بخواهیم یک بخش خاص را LTR کنیم.

می‌توانیم از:

dir="ltr"

استفاده کنیم.

مثال:

<p>
    آدرس سایت:

    <span dir="ltr">
        https://example.com
    </span>
</p>

این روش برای موارد زیر بسیار کاربردی است:

• URL

• Email

• کد برنامه‌نویسی

• نام فایل

• برخی شماره‌ها

• متن انگلیسی طولانی

استفاده از dir="auto"

گاهی زبان محتوا از قبل مشخص نیست.

در این حالت می‌توان از:

dir="auto"

استفاده کرد.

مثال:

<div dir="auto">
    متن این قسمت ممکن است فارسی یا انگلیسی باشد.
</div>

مرورگر بر اساس محتوای موجود جهت مناسب را تشخیص می‌دهد.

البته برای صفحات کاملاً فارسی، بهتر است جهت اصلی سند را به شکل واضح مشخص کنیم:

<html lang="fa" dir="rtl">

RTL و Input Group

Bootstrap برای ساخت Input Group نیز امکانات مناسبی دارد.

مثال:

<div class="input-group mb-3">

    <span class="input-group-text">
        +98
    </span>

    <input
        type="tel"
        class="form-control"
        placeholder="شماره تلفن">

</div>

در طراحی فرم‌های فارسی باید توجه کنیم که متن، شماره و عناصر ورودی ممکن است جهت‌های متفاوتی داشته باشند.

برای شماره تلفن یا محتوای انگلیسی می‌توان در صورت نیاز جهت را مشخص کرد:

<input
    type="tel"
    class="form-control"
    dir="ltr"
    placeholder="09123456789">

RTL و جدول‌ها

جدول‌ها نیز می‌توانند در صفحه RTL استفاده شوند.

<div class="table-responsive">

    <table class="table table-striped">

        <thead>
            <tr>
                <th>نام</th>
                <th>ایمیل</th>
                <th>وضعیت</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td>علی رضایی</td>
                <td dir="ltr">ali@example.com</td>
                <td>
                    <span class="badge text-bg-success">
                        فعال
                    </span>
                </td>
            </tr>

        </tbody>

    </table>

</div>

برای ایمیل بهتر است در صورت نیاز جهت LTR مشخص شود.

RTL و آیکون‌ها

یکی از نکاتی که هنگام طراحی سایت فارسی باید به آن توجه کنیم، آیکون‌های جهت‌دار است.

برای مثال:

→

و:

←

ممکن است در رابط RTL نیاز به بررسی داشته باشند.

تغییر جهت صفحه به صورت خودکار به این معنا نیست که مفهوم همه آیکون‌ها باید برعکس شود.

مثلاً یک آیکون فلش که مفهوم «ادامه» دارد ممکن است در رابط RTL بهتر باشد جهت متناسب با تجربه کاربر داشته باشد.

بنابراین هنگام استفاده از آیکون‌های زیر دقت بیشتری لازم است:

• فلش

• Back

• Forward

• Next

• Previous

• Chevron

• Direction indicators

فونت فارسی در Bootstrap

Bootstrap به صورت پیش‌فرض یک فونت اختصاصی فارسی ارائه نمی‌کند.

بنابراین اگر بخواهیم ظاهر حرفه‌ای‌تری داشته باشیم، می‌توانیم فونت مناسب فارسی را به پروژه اضافه کنیم.

برای مثال:

body {
    font-family: Tahoma, Arial, sans-serif;
}

یا در پروژه واقعی می‌توان یک فونت وب مناسب را با @font-face تعریف کرد.

نکته مهم این است که Bootstrap مسئول انتخاب فونت فارسی پروژه شما نیست.

Bootstrap بیشتر روی ساختار و ظاهر رابط کاربری تمرکز دارد.

ترکیب Bootstrap RTL با CSS سفارشی

ممکن است بعد از فعال کردن RTL هنوز به تغییرات خاصی نیاز داشته باشیم.

در این شرایط می‌توانیم CSS اختصاصی خودمان را بعد از فایل Bootstrap قرار دهیم.

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet">

<link
    href="css/site.css"
    rel="stylesheet">

سپس:

body {
    font-family: Tahoma, Arial, sans-serif;
}

یا:

.hero-title {
    font-weight: 700;
}

بهتر است CSS سفارشی را فقط برای مواردی استفاده کنیم که Bootstrap کلاس یا راهکار مناسبی برای آن ندارد.

یک صفحه کامل فارسی با Bootstrap RTL

در این قسمت یک صفحه نسبتاً واقعی ایجاد می‌کنیم.

این صفحه شامل موارد زیر است:

• Navbar

• Hero

• کارت‌های خدمات

• فرم تماس

• Footer

• طراحی Responsive

• RTL

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>وب‌سایت فارسی با Bootstrap</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet">

    <style>

        body {
            font-family: Tahoma, Arial, sans-serif;
        }

        .hero {
            padding: 80px 0;
        }

    </style>

</head>

<body>

    <!-- Navbar -->

    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">

        <div class="container">

            <a class="navbar-brand" href="#">
                برند من
            </a>

            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#mainNavbar"
                aria-controls="mainNavbar"
                aria-expanded="false"
                aria-label="نمایش منو">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div
                class="collapse navbar-collapse"
                id="mainNavbar">

                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                    <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>

        </div>

    </nav>


    <!-- Hero -->

    <section class="hero bg-light">

        <div class="container">

            <div class="row align-items-center">

                <div class="col-lg-7">

                    <h1 class="display-5 fw-bold mb-3">
                        طراحی سایت حرفه‌ای
                    </h1>

                    <p class="lead mb-4">
                        با استفاده از Bootstrap می‌توانید
                        صفحات فارسی و Responsive ایجاد کنید.
                    </p>

                    <a href="#" class="btn btn-primary btn-lg">
                        شروع کنید
                    </a>

                </div>

                <div class="col-lg-5 mt-4 mt-lg-0">

                    <div class="card shadow">

                        <div class="card-body p-4">

                            <h2 class="h4 mb-3">
                                درخواست مشاوره
                            </h2>

                            <form>

                                <div class="mb-3">

                                    <label
                                        for="name"
                                        class="form-label">

                                        نام

                                    </label>

                                    <input
                                        type="text"
                                        id="name"
                                        class="form-control"
                                        placeholder="نام شما">

                                </div>

                                <div class="mb-3">

                                    <label
                                        for="phone"
                                        class="form-label">

                                        شماره تماس

                                    </label>

                                    <input
                                        type="tel"
                                        id="phone"
                                        class="form-control"
                                        dir="ltr"
                                        placeholder="09123456789">

                                </div>

                                <button
                                    type="submit"
                                    class="btn btn-success w-100">

                                    ارسال درخواست

                                </button>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- Services -->

    <section class="py-5">

        <div class="container">

            <div class="text-center mb-5">

                <h2 class="fw-bold">
                    خدمات ما
                </h2>

                <p class="text-body-secondary">
                    برخی از خدمات ارائه‌شده توسط مجموعه
                </p>

            </div>

            <div class="row g-4">

                <div class="col-md-4">

                    <div class="card h-100">

                        <div class="card-body">

                            <h3 class="h5">
                                طراحی سایت
                            </h3>

                            <p>
                                طراحی وب‌سایت‌های مدرن و Responsive
                                برای کسب‌وکارها.
                            </p>

                            <a href="#" class="btn btn-outline-primary">
                                بیشتر بدانید
                            </a>

                        </div>

                    </div>

                </div>


                <div class="col-md-4">

                    <div class="card h-100">

                        <div class="card-body">

                            <h3 class="h5">
                                طراحی اپلیکیشن
                            </h3>

                            <p>
                                ایجاد اپلیکیشن‌های کاربردی
                                برای پلتفرم‌های مختلف.
                            </p>

                            <a href="#" class="btn btn-outline-primary">
                                بیشتر بدانید
                            </a>

                        </div>

                    </div>

                </div>


                <div class="col-md-4">

                    <div class="card h-100">

                        <div class="card-body">

                            <h3 class="h5">
                                بهینه‌سازی سایت
                            </h3>

                            <p>
                                بهبود ساختار و عملکرد وب‌سایت
                                برای تجربه بهتر کاربران.
                            </p>

                            <a href="#" class="btn btn-outline-primary">
                                بیشتر بدانید
                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- Footer -->

    <footer class="bg-dark text-white py-4">

        <div class="container">

            <div class="row">

                <div class="col-md-6">

                    <h2 class="h5">
                        برند من
                    </h2>

                    <p class="mb-0">
                        یک وب‌سایت فارسی ساخته‌شده با Bootstrap.
                    </p>

                </div>

                <div class="col-md-6 text-md-end mt-3 mt-md-0">

                    <span>
                        تمامی حقوق محفوظ است.
                    </span>

                </div>

            </div>

        </div>

    </footer>


    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
    </script>

</body>

</html>

بررسی ساختار صفحه

ساختار کلی پروژه ما به صورت زیر است:

HTML Document
    |
    +-- Navbar
    |
    +-- Hero
    |    |
    |    +-- Content
    |    +-- Form
    |
    +-- Services
    |    |
    |    +-- Card
    |    +-- Card
    |    +-- Card
    |
    +-- Footer

تمام این ساختار در یک صفحه فارسی RTL قرار گرفته است.

اشتباه رایج: استفاده بیش از حد از Left و Right

یکی از اشتباهات رایج در پروژه‌های فارسی این است که در CSS مرتباً از:

margin-left
margin-right
padding-left
padding-right
left
right

استفاده کنیم.

در بسیاری از موارد بهتر است از مفاهیم منطقی استفاده شود.

برای مثال در Bootstrap:

ms-3
me-3
ps-3
pe-3

این روش کد را برای RTL و LTR انعطاف‌پذیرتر می‌کند.

اشتباه رایج: استفاده از Bootstrap معمولی برای پروژه RTL

اگر پروژه کاملاً فارسی است، بهتر است هنگام استفاده از Bootstrap RTL از فایل RTL استفاده کنیم:

bootstrap.rtl.min.css

و جهت سند را نیز مشخص کنیم:

<html lang="fa" dir="rtl">

ترکیب این دو باعث می‌شود Bootstrap و HTML از نظر جهت نوشتار هماهنگ باشند.

اشتباه رایج: RTL کردن همه چیز

RTL بودن صفحه به این معنا نیست که تمام محتوای آن باید RTL باشد.

برای مثال:

Email
URL
Code
File path
Some English content

ممکن است بهتر باشد LTR نمایش داده شوند.

مثال:

<div dir="ltr">
    https://example.com
</div>

بنابراین باید جهت هر بخش را بر اساس نوع محتوا انتخاب کنیم.

اشتباه رایج: فراموش کردن Mobile

RTL بودن هیچ ارتباطی با Responsive بودن ندارد.

یک سایت فارسی باید همچنان روی:

• Mobile

• Tablet

• Laptop

• Desktop

به درستی نمایش داده شود.

بنابراین همچنان باید از Grid و Breakpointهای Bootstrap استفاده کنیم:

<div class="col-12 col-md-6 col-lg-4">

RTL و Responsive دو موضوع متفاوت اما مکمل یکدیگر هستند.

نکات مهم برای پروژه‌های فارسی Bootstrap

هنگام ساخت یک پروژه واقعی این موارد را در نظر داشته باشید:

۱. زبان صفحه را مشخص کنید

<html lang="fa">

۲. جهت صفحه را مشخص کنید

<html lang="fa" dir="rtl">

۳. فایل RTL Bootstrap را استفاده کنید

bootstrap.rtl.min.css

۴. از کلاس‌های منطقی استفاده کنید

ms
me
ps
pe
start
end

۵. محتوای انگلیسی را در صورت نیاز LTR کنید

dir="ltr"

۶. برای URL، Email و Code جهت مناسب را بررسی کنید.

۷. روی موبایل و دسکتاپ تست کنید.

۸. از CSS سفارشی فقط در موارد لازم استفاده کنید.

۹. فونت فارسی مناسب برای پروژه انتخاب کنید.

۱۰. دسترس‌پذیری را فراموش نکنید.

تمرین عملی

یک صفحه فارسی برای یک فروشگاه اینترنتی ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

1. Navbar فارسی

2. لوگوی متنی

3. منوی خانه، محصولات، درباره ما و تماس با ما

4. یک Hero Section

5. سه کارت محصول

6. قیمت هر محصول

7. دکمه مشاهده محصول

8. فرم جستجو

9. شماره تلفن با dir="ltr"

10. Footer

صفحه باید با:

<html lang="fa" dir="rtl">

شروع شود و از:

bootstrap.rtl.min.css

استفاده کند.

تمرین پیشرفته

یک Dashboard فارسی طراحی کنید که شامل موارد زیر باشد:

Dashboard
    |
    +-- Navbar
    |
    +-- Sidebar
    |
    +-- Statistics
    |     +-- Users
    |     +-- Orders
    |     +-- Revenue
    |
    +-- Recent Orders
    |
    +-- User Form
    |
    +-- Footer

در این تمرین باید موارد زیر را نیز رعایت کنید:

• RTL کامل

• Responsive Design

• Grid

• Cards

• Table

• Forms

• Buttons

• Badge

• Logical spacing utilities

• محتوای LTR برای Email و URL

جمع‌بندی

در این مقاله یاد گرفتیم چگونه یک پروژه Bootstrap را برای زبان فارسی و محیط RTL آماده کنیم. با lang="fa" زبان صفحه را مشخص کردیم و با dir="rtl" جهت سند را تعیین کردیم. سپس با استفاده از bootstrap.rtl.min.css قابلیت‌های RTL Bootstrap را فعال کردیم. همچنین با کلاس‌های منطقی مانند ms-*، me-*، ps-* و pe-* آشنا شدیم و یاد گرفتیم چرا استفاده از مفاهیم start و end می‌تواند نسبت به وابستگی مستقیم به left و right مناسب‌تر باشد. نحوه ساخت Navbar، فرم، Grid، جدول و صفحه Responsive فارسی را بررسی کردیم و یاد گرفتیم که محتوایی مانند URL، Email و کد برنامه‌نویسی ممکن است به جهت LTR نیاز داشته باشد. با این مفاهیم اکنون می‌توانیم رابط‌های کاربری فارسی و Responsive را با Bootstrap ایجاد کنیم.