RTL

با نحوه فعال کردن پشتیبانی از متن راست به چپ در Bootstrap در طرح‌بندی، مؤلفه‌ها و برنامه‌های کاربردی خود بیاموزید.

در این صفحه

آشنا شدن

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

همچنین ممکن است بخواهید در مورد پروژه RTLCSS مطالعه کنید ، زیرا رویکرد ما به RTL را تقویت می کند.

ویژگی آزمایشی

ویژگی RTL هنوز آزمایشی است و احتمالاً با توجه به بازخورد کاربران تکامل خواهد یافت. چیزی را مشاهده کردید یا پیشرفتی برای پیشنهاد دارید؟ یک شماره را باز کنید ، ما دوست داریم اطلاعات شما را دریافت کنیم.

HTML مورد نیاز

دو شرط سخت برای فعال کردن RTL در صفحات بوت استرپ وجود دارد.

dir="rtl"روی <html>عنصر تنظیم کنید .
یک ویژگی مناسب lang، مانند lang="ar"، روی <html>عنصر اضافه کنید.

از آنجا، باید یک نسخه RTL از CSS ما را اضافه کنید. به عنوان مثال، در اینجا شیوه نامه CSS کامپایل شده و کوچک شده با RTL فعال است:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

قالب استارتر

می توانید الزامات فوق را در این الگوی استارت اصلاح شده RTL مشاهده کنید.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

نمونه های RTL

با یکی از چندین نمونه RTL ما شروع کنید.

رویکرد

رویکرد ما برای ایجاد پشتیبانی RTL در Bootstrap با دو تصمیم مهم همراه است که بر نحوه نوشتن و استفاده از CSS ما تأثیر می گذارد:

ابتدا تصمیم گرفتیم آن را با پروژه RTLCSS بسازیم . این ویژگی‌های قدرتمندی را برای مدیریت تغییرات و نادیده گرفتن هنگام انتقال از LTR به RTL به ما می‌دهد. همچنین به ما اجازه می دهد تا دو نسخه از Bootstrap را از یک پایگاه کد بسازیم.
دوم، ما تعدادی از کلاس های جهت دار را تغییر نام داده ایم تا رویکرد خواص منطقی را اتخاذ کنیم. بسیاری از شما قبلاً به لطف ابزارهای انعطاف پذیر ما با ویژگی های منطقی تعامل داشته اید - آنها جایگزین ویژگی های جهت مانند leftو rightبه نفع startو end. این باعث می شود که نام و مقادیر کلاس برای LTR و RTL بدون هیچ سرباری مناسب باشد.

به عنوان مثال، به جای .ml-3for margin-left، استفاده کنید .ms-3.

با این حال، کار با RTL، از طریق Sass منبع ما یا CSS کامپایل شده، نباید تفاوت زیادی با LTR پیش فرض ما داشته باشد.

سفارشی کردن از منبع

وقتی صحبت از سفارشی‌سازی به میان می‌آید ، بهترین راه استفاده از متغیرها، نقشه‌ها و ترکیب‌ها است. این رویکرد برای RTL یکسان عمل می کند، حتی اگر پس از پردازش از فایل های کامپایل شده، به لطف نحوه کار RTLCSS .

مقادیر سفارشی RTL

با استفاده از دستورالعمل های مقدار RTLCSS ، می توانید یک خروجی متغیر را مقدار متفاوتی برای RTL ایجاد کنید. به عنوان مثال، برای کاهش وزن برای $font-weight-boldکل پایگاه کد، می توانید از /*rtl: {value}*/نحو استفاده کنید:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

که برای CSS و RTL CSS پیش‌فرض ما به خروجی زیر می‌رسد:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

پشته فونت جایگزین

در صورتی که از فونت سفارشی استفاده می کنید، توجه داشته باشید که همه فونت ها از الفبای غیر لاتین پشتیبانی نمی کنند. برای تغییر از خانواده پان اروپایی به عربی، ممکن است لازم باشد /*rtl:insert: {value}*/در پشته قلم خود برای تغییر نام خانواده فونت ها استفاده کنید.

به عنوان مثال، برای تغییر از Helvetica Neue WebfontLTR به Helvetica Neue ArabicRTL، کد Sass شما به این صورت است:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTR و RTL به طور همزمان

به LTR و RTL در یک صفحه نیاز دارید؟ به لطف RTLCSS String Maps ، این بسیار ساده است. s خود را @importبا یک کلاس بپیچید و یک قانون تغییر نام سفارشی برای RTLCSS تنظیم کنید:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

پس از اجرای Sass و سپس RTLCSS، هر انتخابگر در فایل‌های CSS شما با .ltrو .rtlبرای فایل‌های RTL اضافه می‌شود. اکنون می‌توانید از هر دو فایل در یک صفحه استفاده کنید و به سادگی از بسته‌بندی‌های اجزای خود .ltrیا .rtlروی آنها برای استفاده از یک جهت یا جهت دیگر استفاده کنید.

موارد لبه و محدودیت های شناخته شده

در حالی که این رویکرد قابل درک است، لطفا به موارد زیر توجه کنید:

هنگام جابجایی .ltrو .rtl، مطمئن شوید که بر اساس آن ویژگی ها dirو langویژگی ها را اضافه کرده اید.
بارگیری هر دو فایل می تواند یک گلوگاه عملکرد واقعی باشد: بهینه سازی را در نظر بگیرید و شاید سعی کنید یکی از آن فایل ها را به صورت ناهمزمان بارگیری کنید .
سبک‌های تودرتو به این ترتیب مانع از form-validation-state()کارکرد میکس ما می‌شود، بنابراین باید خودتان آن را کمی تغییر دهید. به #31223 مراجعه کنید .

جداکننده پودر سوخاری تنها موردی است که به متغیر کاملاً جدید خود نیاز دارد - یعنی $breadcrumb-divider-flipped- پیش فرض به $breadcrumb-divider.

RTL