স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

আরটিএল

আমাদের লেআউট, উপাদান এবং ইউটিলিটি জুড়ে বুটস্ট্র্যাপে ডান-থেকে-বামে পাঠ্যের জন্য কীভাবে সমর্থন সক্ষম করবেন তা শিখুন।

এই পৃষ্ঠায়

পরিচিত

আমরা আমাদের শুরু করা ভূমিকা পৃষ্ঠাটি পড়ে প্রথমে বুটস্ট্র্যাপের সাথে পরিচিত হওয়ার পরামর্শ দিই । একবার আপনি এটি চালানোর পরে, কীভাবে আরটিএল সক্ষম করবেন তা এখানে পড়া চালিয়ে যান।

আপনি RTLCSS প্রকল্পটিও পড়তে চাইতে পারেন , কারণ এটি RTL-এর প্রতি আমাদের দৃষ্টিভঙ্গিকে শক্তি দেয়।

পরীক্ষামূলক বৈশিষ্ট্য

RTL বৈশিষ্ট্যটি এখনও পরীক্ষামূলক এবং সম্ভবত ব্যবহারকারীর প্রতিক্রিয়া অনুযায়ী বিকশিত হবে। কিছু খুঁজে পেয়েছেন বা সুপারিশ করার জন্য একটি উন্নতি আছে? একটি সমস্যা খুলুন , আমরা আপনার অন্তর্দৃষ্টি পেতে চাই।

প্রয়োজনীয় HTML

বুটস্ট্র্যাপ-চালিত পৃষ্ঠাগুলিতে RTL সক্ষম করার জন্য দুটি কঠোর প্রয়োজনীয়তা রয়েছে।

  1. উপাদান উপর সেট dir="rtl"করুন .<html>
  2. উপাদানটিতে একটি উপযুক্ত langবৈশিষ্ট্য যোগ করুন, যেমন lang="ar", ।<html>

সেখান থেকে, আপনাকে আমাদের CSS এর একটি RTL সংস্করণ অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ, এখানে RTL সক্ষম সহ আমাদের সংকলিত এবং ছোট CSS-এর স্টাইলশীট রয়েছে:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL উদাহরণ

আমাদের বেশ কয়েকটি RTL উদাহরণের একটি দিয়ে শুরু করুন ।

এপ্রোচ

বুটস্ট্র্যাপে আরটিএল সমর্থন তৈরি করার জন্য আমাদের দৃষ্টিভঙ্গি দুটি গুরুত্বপূর্ণ সিদ্ধান্ত নিয়ে আসে যা আমরা কীভাবে আমাদের সিএসএস লিখি এবং ব্যবহার করি তা প্রভাবিত করে:

  1. প্রথমে, আমরা RTLCSS প্রকল্পের সাথে এটি তৈরি করার সিদ্ধান্ত নিয়েছি । এটি LTR থেকে RTL এ যাওয়ার সময় পরিবর্তন এবং ওভাররাইড পরিচালনা করার জন্য আমাদের কিছু শক্তিশালী বৈশিষ্ট্য দেয়। এটি আমাদের একটি কোডবেস থেকে বুটস্ট্র্যাপের দুটি সংস্করণ তৈরি করতে দেয়।

  2. দ্বিতীয়ত, আমরা একটি লজিক্যাল বৈশিষ্ট্য পদ্ধতি অবলম্বন করার জন্য মুষ্টিমেয় দিকনির্দেশক ক্লাসের নাম পরিবর্তন করেছি। আমাদের ফ্লেক্স ইউটিলিটিগুলির জন্য আপনার বেশিরভাগই ইতিমধ্যে যৌক্তিক বৈশিষ্ট্যগুলির সাথে ইন্টারঅ্যাক্ট করেছেন - তারা দিকনির্দেশ বৈশিষ্ট্যগুলি যেমন leftএবং rightঅনুকূলে প্রতিস্থাপন startকরে end। এটি কোনো ওভারহেড ছাড়াই LTR এবং RTL-এর জন্য ক্লাসের নাম এবং মানগুলিকে উপযুক্ত করে তোলে।

উদাহরণস্বরূপ, for এর পরিবর্তে .ml-3ব্যবহার 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}*/ফন্ট পরিবারের নাম পরিবর্তন করতে আপনার ফন্ট স্ট্যাকে ব্যবহার করতে হতে পারে।

উদাহরণস্বরূপ, 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;

একই সময়ে LTR এবং RTL

একই পৃষ্ঠায় LTR এবং RTL উভয়ই প্রয়োজন? RTLCSS স্ট্রিং মানচিত্রকে ধন্যবাদ , এটি বেশ সহজবোধ্য। আপনার গুলিকে একটি ক্লাস দিয়ে মোড়ানো @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, এবং .rtlRTL ফাইলের জন্য প্রিপেন্ড করা হবে। এখন আপনি একই পৃষ্ঠায় উভয় ফাইল ব্যবহার করতে পারবেন, এবং একটি বা অন্য দিক ব্যবহার করতে আপনার উপাদানগুলির মোড়কে বা ব্যবহার করতে পারবেন .ltr।.rtl

এজ কেস এবং পরিচিত সীমাবদ্ধতা

যদিও এই পদ্ধতিটি বোধগম্য, অনুগ্রহ করে নিম্নলিখিতগুলিতে মনোযোগ দিন:

  1. স্যুইচ করার সময় .ltrএবং .rtl, নিশ্চিত করুন যে আপনি যোগ করেছেন dirএবং langসেই অনুযায়ী গুণাবলী।
  2. উভয় ফাইল লোড করা একটি বাস্তব কর্মক্ষমতা বাধা হতে পারে: কিছু অপ্টিমাইজেশান বিবেচনা করুন , এবং হয়ত সেই ফাইলগুলির মধ্যে একটিকে অ্যাসিঙ্ক্রোনাসভাবে লোড করার চেষ্টা করুন ৷
  3. এইভাবে নেস্টিং শৈলী আমাদের form-validation-state()মিক্সিনকে উদ্দেশ্য অনুযায়ী কাজ করা থেকে বিরত রাখবে, তাই আপনার নিজের থেকে এটিকে কিছুটা পরিবর্তন করতে হবে। #31223 দেখুন ।

ব্রেডক্রাম্ব কেস

ব্রেডক্রাম্ব বিভাজক হল একমাত্র কেস যার জন্য নিজস্ব নতুন ভেরিয়েবল প্রয়োজন—যেমন $breadcrumb-divider-flipped—-এ ডিফল্ট $breadcrumb-divider।

অতিরিক্ত সম্পদ