فارسی سازی Bootstrap 4

بوت استرپ بصورت پیش فرض تنظیماتی برای استفاده از زبان های راست به چپ مانند فارسی و عربی ندارد و اگر قصد داشته باشید خودتان این تنظیمات را به bootstrap تزریق کنید، با مشکلات بسیار زیادی مواجه خواهید شد. یکی از هموطنان عزیزمان آقای مهدی مجیدزاده نسخه راست به چپ بوت استرپ 4 را ایجاد و در گیت هاب منتشر کرده اند که در این بخش آموزشی قصد داریم از فایل های ایجاد جهت ساخت یک پروژه مبتنی بر بوت استرپ برای وب سایت های فارسی زبان استفاده نماییم.

نحوه استفاده

جهت سهولت کار، فایل ها در سرور بنو آپلود گریده اند و شما می توانید آنها را از اینجا دانلود کنید. پس از دانلود و خارج کردن فایل ها از حالت فشرده، دو پوشه با نام های css و js مشاهده خواهید نمود. این دو پوشه را به پوشه پروژه خود منتقل کنید.

فارسی سازی بوت استرپ

در ادامه پوشه پروژه خود را در برنامه Visual Studio Code باز کرده و یک فایل با نام index.html نیز درون آن )در روت پروژه) بسازید و لینک زیر را در بخش head اضافه کنید.

<link rel="stylesheet" href="css/bootstrap-rtl.css" />

در انتهای body نیز لینک های جاوا اسکریپتی زیر را اضافه کنید.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>

به تگ body کلاس rtl اختصاص داده و محتوای زیر را به آن اضافه کنید.

<body class="rtl">
    <div class="container border">
        <h1>به بوت استرپ خوش آمدید</h1>
    </div>
</body>

کد کلی صفحه به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="css/bootstrap-rtl.css" />
  </head>
  <body class="rtl">
    <div class="container border">
      <h1>به بوت استرپ خوش آمدید</h1>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
  </body>
</html>

پس از ذخیره سازی می توانید صفحه را اجرا کنید.

فارسی سازی بوت استرپ نسخه 4

در مستندات ارائه شده توسط آقای مجیدزاده نیازی به لینک کردن فایل اصلی bootstrap نیست و با اضافه کردن نسخه rtl صفحه به راحتی راست به چپ می شود فقط باید مد نظر داشته باشید که به تگ body نیز کلاس rtl را اختصاص دهید تا عملکرد صحیحی داشته باشد.

نکته دیگر آنکه راست به چپ کردن نسخه 3 و 4 با یکدیگر متفاوت هستند، در نسخه 3 اگر قصد داشتید فایل rtl را اضافه کنید، لینک بودن فایل اصلی bootstrap نیز الزامی بود اما همانطورکه گفت شد در نسخه 4 اینگونه نیست.

همواره پیشنهاد می شود قبل از شروع به کدنویسی تست اولیه از صحت عملکرد فایلهای bootstrap گرفته شود و در صورتیکه بدون مشکل صفحه اجرا شد، اقدام به تکمیل آن نمایید.

در صورت بروز مشکل می توانید از طریق تلگرام با ما در ارتباط باشید.