আৰ টি এল

আমাৰ পৰিকল্পনা, উপাদানসমূহ, আৰু সঁজুলিসমূহত Bootstrap ত সোঁ-ৰ পৰা বাওঁ লিখনীৰ বাবে সমৰ্থন কেনেকৈ সামৰ্থবান কৰিব লাগে শিকিব।

এই পৃষ্ঠাত

চিনাকি হওক

আমি আমাৰ আৰম্ভ কৰা পৰিচয় পৃষ্ঠা পঢ়ি প্ৰথমে Bootstrap ৰ সৈতে পৰিচিত হ'বলৈ পৰামৰ্শ দিওঁ । আপুনি এবাৰ ইয়াৰ মাজেৰে দৌৰিলে, RTL কেনেকৈ সামৰ্থবান কৰিব লাগে তাৰ বাবে ইয়াত পঢ়ি যাওক।

আপুনি RTLCSS প্ৰকল্পৰ ওপৰতো পঢ়িব পাৰে , কাৰণ ই RTL ৰ প্ৰতি আমাৰ পদ্ধতিক শক্তিশালী কৰে।

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

RTL বৈশিষ্ট্য এতিয়াও পৰীক্ষামূলক আৰু সম্ভৱতঃ ব্যৱহাৰকাৰীৰ মতামত অনুসৰি বিকশিত হ’ব। কিবা এটা দেখা পালে নে পৰামৰ্শ দিবলগীয়া উন্নতি আছেনে? এটা ইছ্যু খুলিব , আমি আপোনাৰ অন্তৰ্দৃষ্টি পালে ভাল পাম।

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

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

উপাদানটোৰ dir="rtl"ওপৰত ছেট কৰক ।<html>
উপাদানটোৰ ওপৰত এটা উপযুক্ত 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL উদাহৰণ

আমাৰ কেইবাটাও RTL উদাহৰণৰ এটাৰ সৈতে আৰম্ভ কৰক ।

পদ্ধতি

বুটষ্ট্ৰেপত RTL সমৰ্থন নিৰ্মাণ কৰাৰ আমাৰ পদ্ধতি দুটা গুৰুত্বপূৰ্ণ সিদ্ধান্তৰ সৈতে আহে যি আমি আমাৰ 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 দুয়োটা লাগেনে? 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, আৰু .rtlRTL নথিপত্ৰসমূহৰ বাবে পূৰ্বতে ৰখা হব । এতিয়া আপুনি একেটা পৃষ্ঠাত দুয়োটা নথিপত্ৰ ব্যৱহাৰ কৰিব পাৰিব, আৰু এটা বা আনটো দিশ ব্যৱহাৰ কৰিবলে কেৱল আপোনাৰ উপাদানসমূহৰ ৰেপাৰসমূহত বা ব্যৱহাৰ কৰক .ltr।.rtl

এজ কেছ আৰু জনা সীমাবদ্ধতা

এই পদ্ধতিটো বুজিব পৰা হ’লেও, অনুগ্ৰহ কৰি তলত দিয়া বিষয়বোৰৰ প্ৰতি গুৰুত্ব দিয়ক:

.ltrআৰু সলনি কৰাৰ সময়ত .rtl, নিশ্চিত কৰক যে আপুনি সেই অনুসৰি যোগ dirআৰু langবৈশিষ্ট্যসমূহ যোগ কৰে।
দুয়োটা নথিপত্ৰ তুলি লোৱাটো এটা প্ৰকৃত পৰিৱেশন বটলনেক হ'ব পাৰে: কিছুমান অনুকূলন বিবেচনা কৰক, আৰু হয়তো সেই নথিপত্ৰসমূহৰ এটা এচিনক্ৰ'নাছভাৱে তুলি ল'বলৈ চেষ্টা কৰক ।
এইদৰে নেষ্টিং শৈলীসমূহে আমাৰ form-validation-state()মিক্সিনক উদ্দেশ্য কৰা ধৰণে কাম কৰাত বাধা দিব, গতিকে আপুনি নিজেই ইয়াক অলপ টুইক কৰাৰ প্ৰয়োজন হ'ব। #৩১২২৩ চাওক ।

ব্ৰেডক্ৰাম বিভাজকটোৱেই একমাত্ৰ ক্ষেত্ৰ যাৰ নিজৰ একেবাৰে নতুন চলকৰ প্ৰয়োজন—যেনে $breadcrumb-divider-flipped—অবিকল্পিত কৰা $breadcrumb-divider।