RTL

ഞങ്ങളുടെ ലേഔട്ട്, ഘടകങ്ങൾ, യൂട്ടിലിറ്റികൾ എന്നിവയിലുടനീളം ബൂട്ട്‌സ്‌ട്രാപ്പിൽ വലത്തുനിന്നും ഇടത്തേക്കുള്ള ടെക്‌സ്‌റ്റിന് പിന്തുണ എങ്ങനെ പ്രവർത്തനക്ഷമമാക്കാമെന്ന് മനസിലാക്കുക.

ഈ പേജിൽ

പരിചയപ്പെടുക

ഞങ്ങളുടെ ആരംഭ ആമുഖ പേജിലൂടെ വായിച്ചുകൊണ്ട് ആദ്യം ബൂട്ട്സ്ട്രാപ്പുമായി പരിചയപ്പെടാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു . നിങ്ങൾ അതിലൂടെ ഓടിക്കഴിഞ്ഞാൽ, 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-ലേക്ക് മാറുമ്പോൾ മാറ്റങ്ങളും അസാധുവാക്കലും നിയന്ത്രിക്കുന്നതിന് ഇത് ഞങ്ങൾക്ക് ചില ശക്തമായ സവിശേഷതകൾ നൽകുന്നു. ഒരു കോഡ്‌ബേസിൽ നിന്ന് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ രണ്ട് പതിപ്പുകൾ നിർമ്മിക്കാനും ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു.
രണ്ടാമതായി, ഒരു ലോജിക്കൽ പ്രോപ്പർട്ടീസ് സമീപനം സ്വീകരിക്കുന്നതിന് ഞങ്ങൾ ഒരുപിടി ദിശാസൂചന ക്ലാസുകളുടെ പേര് മാറ്റി. ഞങ്ങളുടെ ഫ്ലെക്‌സ് യൂട്ടിലിറ്റികൾക്ക് നന്ദി പറഞ്ഞ് നിങ്ങളിൽ ഭൂരിഭാഗവും ലോജിക്കൽ പ്രോപ്പർട്ടികളുമായി ഇടപഴകിയിട്ടുണ്ട്-അവർ ദിശാ leftഗുണങ്ങളെ മാറ്റിസ്ഥാപിക്കുന്നു . ഇത് ക്ലാസ് പേരുകളും മൂല്യങ്ങളും LTR, RTL എന്നിവയ്ക്ക് ഓവർഹെഡ് ഇല്ലാതെ അനുയോജ്യമാക്കുന്നു.rightstartend

ഉദാഹരണത്തിന്, for എന്നതിനുപകരം .ml-3, margin-leftഉപയോഗിക്കുക .ms-3.

ഞങ്ങളുടെ ഉറവിടമായ സാസ് അല്ലെങ്കിൽ കംപൈൽ ചെയ്ത CSS വഴി RTL-ൽ പ്രവർത്തിക്കുന്നത്, ഞങ്ങളുടെ സ്ഥിരസ്ഥിതി 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-ൽ നിന്ന് 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 ഫയലുകളിലെ ഓരോ സെലക്ടറും .ltrRTL .rtlഫയലുകൾക്കായി മുൻകൂട്ടി നിശ്ചയിക്കും. ഇപ്പോൾ നിങ്ങൾക്ക് രണ്ട് ഫയലുകളും ഒരേ പേജിൽ ഉപയോഗിക്കാൻ കഴിയും, കൂടാതെ ഒന്നോ അല്ലെങ്കിൽ മറ്റൊരു ദിശയോ ഉപയോഗിക്കുന്നതിന് നിങ്ങളുടെ ഘടക റാപ്പറുകൾ ഉപയോഗിക്കുക .ltr..rtl

എഡ്ജ് കേസുകളും അറിയപ്പെടുന്ന പരിമിതികളും

ഈ സമീപനം മനസ്സിലാക്കാവുന്നതാണെങ്കിലും, ദയവായി ഇനിപ്പറയുന്നവ ശ്രദ്ധിക്കുക:

സ്വിച്ചുചെയ്യുമ്പോൾ .ltrഒപ്പം , അതിനനുസരിച്ച് ചേർക്കുന്നതും ആട്രിബ്യൂട്ടുകളും .rtlഉറപ്പാക്കുക .dirlang
രണ്ട് ഫയലുകളും ലോഡുചെയ്യുന്നത് ഒരു യഥാർത്ഥ പ്രകടന തടസ്സമാകാം: കുറച്ച് ഒപ്റ്റിമൈസേഷൻ പരിഗണിക്കുക , ആ ഫയലുകളിലൊന്ന് അസമന്വിതമായി ലോഡുചെയ്യാൻ ശ്രമിക്കുക .
form-validation-state()ഈ രീതിയിലുള്ള നെസ്റ്റിംഗ് ശൈലികൾ ഞങ്ങളുടെ മിക്‌സിൻ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നതിൽ നിന്ന് തടയും , അതിനാൽ നിങ്ങൾ സ്വയം ഇത് അൽപ്പം മാറ്റേണ്ടതുണ്ട്. #31223 കാണുക .

ബ്രെഡ്ക്രംബ് സെപ്പറേറ്ററിന് അതിന്റേതായ പുതിയ വേരിയബിൾ ആവശ്യമുള്ള ഒരേയൊരു സാഹചര്യമാണ് - അതായത് - $breadcrumb-divider-flippedഡിഫോൾട്ടിംഗ് $breadcrumb-divider.

RTL