آموزش راست چین کردن بوت استرپ

0 دیدگاه

در این بخش به آموزش راست چین کردن بوت استرپ می پردازیم. این ویژگی به شما امکان می‌دهد تا قالب‌ها، اجزا و کلاس‌های کاربردی (utilities) را به‌گونه‌ای تنظیم کنید که متن و عناصر صفحه مطابق زبان‌هایی مانند فارسی و عربی نمایش داده شوند.

پیش‌نیازهای فعال‌سازی پشتیبانی از راست چین در بوت استرپ

برای فعال کردن حالت راست به چپ در صفحات طراحی‌شده با Bootstrap، باید دو شرط اصلی را رعایت کنید:

افزودن ویژگی dir="rtl" به تگ <html>
این ویژگی به مرورگر می‌گوید که جهت متن و عناصر صفحه باید از راست به چپ باشد.
تعیین زبان مناسب با ویژگی lang
مثلاً اگر زبان صفحه فارسی است، باید بنویسید:

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

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

استفاده از نسخه RTL فایل CSS بوت استرپ
برای اعمال صحیح تغییرات ظاهری، لازم است فایل CSS مخصوص حالت RTL را در صفحه خود بارگذاری کنید. به‌عنوان نمونه:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" crossorigin="anonymous">

قالب ابتدایی برای شروع با RTL

در ادامه، یک نمونه ساده از قالب HTML را می‌بینید که تمام شرایط لازم برای فعال‌سازی پشتیبانی از راست چین را داراست:

<!DOCTYPE html>
<html lang="fa" 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/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" 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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <!--
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
   -->
</body>
</html>

<!DOCTYPE html>

<head>

<title> صفحه نمونه</title>

</head>

<body>

<h1> سلام بوت استرپ! </h1>

<!--

-->

</body>

</html>

شخصی‌سازی از سورس

برای اهداف شخصی‌سازی، می‌توانید از متغیرها، نقشه‌ها (maps) و میکسین‌ها استفاده کنید. این روش دقیقا مشابه حالت LTR (چپ‌به‌راست) عمل می‌کند، اما برای RTL (راست‌به‌چپ) استفاده می‌شود.

مقادیر سفارشی راست چین در بوت استرپ

برخی دستورات ویژه برای مقادیر CSS در حالت RTL وجود دارد که از طریق آن‌ها می‌توانید خروجی یک متغیر را در حالت راست چین متفاوت تنظیم کنید.
برای مثال، اگر بخواهید وزن فونت را در سراسر کدهای خود در حالت RTL کاهش دهید، می‌توانید از دستور زیر استفاده کنید:

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

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

این دستور در خروجی، فایل‌های CSS را به شکل زیر تولید خواهد کرد:

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

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

/* bootstrap.css */

dt {

font-weight: 600 /* rtl:500 */;

}

/* bootstrap.rtl.css */

dt {

font-weight: 500;

}

فونت جایگزین برای زبان‌های غیرلاتین

همه الفباهای غیرلاتین پشتیبانی نمی‌شوند. بنابراین اگر بخواهید از خانواده فونت‌های اروپایی به فونت‌های عربی تغییر دهید، باید از دستور زیر استفاده کنید:

/*rtl:insert: {value}*/

1	/rtl:insert: {value}/

برای مثال، اگر بخواهید فونت LTR را از “Helvetica Neue” به فونت RTL “Helvetica Neue Arabic” تغییر دهید، کد 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;

$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 (راست‌به‌چپ) را همزمان استفاده کنید؟ این کار کاملاً ممکن است. فقط کافی است 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*/

/* 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 در بوت استرپ:

مطمئن شوید که هنگام تغییر کلاس‌های .ltr و .rtl، ویژگی‌های dir و lang را نیز به‌درستی تنظیم کرده‌اید.
بهتر است یکی از فایل‌های LTR یا RTL را به‌صورت غیربلاک (asynchronously) بارگذاری کنید، چون بارگذاری هر دو فایل به‌صورت همزمان ممکن است باعث افت عملکرد شود.
استفاده از استایل‌های تو در تو می‌تواند عملکرد mixin مربوط به form-validation-state() را مختل کند.

مورد خاص Breadcrumb

تنها موردی که نیاز به متغیر جدید دارد، جداکننده breadcrumb است. این متغیر با نام $breadcrumb-divider-flipped تعریف می‌شود و مقدار پیش‌فرض آن، همان $breadcrumb-divider است.

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی

انتشار: ۲۲ اردیبهشت ۱۴۰۴

آموزش راست چین کردن بوت استرپ

پیش‌نیازهای فعال‌سازی پشتیبانی از راست چین در بوت استرپ

قالب ابتدایی برای شروع با RTL

شخصی‌سازی از سورس

مقادیر سفارشی راست چین در بوت استرپ

فونت جایگزین برای زبان‌های غیرلاتین

استفاده همزمان از چپ چین و راست چین در بوت استرپ

نکاتی برای استفاده همزمان از LTR و RTL در بوت استرپ:

مورد خاص Breadcrumb

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط