RTL

අපගේ පිරිසැලසුම, සංරචක සහ උපයෝගිතා හරහා Bootstrap හි දකුණේ සිට වමට පෙළ සඳහා සහය සක්‍රීය කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

මෙම පිටුවේ

හුරුපුරුදු වෙන්න

අපගේ ආරම්භ කිරීම හඳුන්වාදීම පිටුව හරහා කියවීමෙන් මුලින්ම Bootstrap ගැන හුරුපුරුදු වීමට අපි නිර්දේශ කරමු . ඔබ එය හරහා ගිය පසු, RTL සබල කරන්නේ කෙසේද යන්න සඳහා මෙහි කියවීම දිගටම කරගෙන යන්න.

RTL වෙත අපගේ ප්‍රවේශය බලගන්වන බැවින් ඔබට RTLCSS ව්‍යාපෘතිය ගැන කියවීමටද අවශ්‍ය විය හැක .

පර්යේෂණාත්මක ලක්ෂණය

RTL විශේෂාංගය තවමත් පර්යේෂණාත්මක වන අතර බොහෝ විට පරිශීලක ප්‍රතිපෝෂණ අනුව පරිණාමය වනු ඇත. යමක් හඳුනාගෙන තිබේද නැතහොත් යෝජනා කිරීමට වැඩිදියුණු කිරීමක් තිබේද? ගැටලුවක් විවෘත කරන්න, අපි ඔබේ තීක්ෂ්ණ බුද්ධිය ලබා ගැනීමට කැමතියි.

අවශ්‍ය HTML

Bootstrap-බලය වන පිටු වල 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 සහය Bootstrap වෙත ගොඩනැගීම සඳහා අපගේ ප්‍රවේශය අපගේ CSS ලියන ආකාරය සහ භාවිතා කරන ආකාරය කෙරෙහි බලපාන වැදගත් තීරණ දෙකක් සමඟින් පැමිණේ:

පළමුව, අපි එය RTLCSS ව්යාපෘතිය සමඟ ගොඩනඟා ගැනීමට තීරණය කළා. LTR සිට RTL වෙත මාරු වන විට වෙනස්කම් සහ අභිබවා යාම කළමනාකරණය කිරීම සඳහා මෙය අපට ප්‍රබල විශේෂාංග කිහිපයක් ලබා දෙයි. එක codebase එකකින් Bootstrap අනුවාද දෙකක් හදන්නත් මේකෙන් පුළුවන්.
දෙවනුව, අපි තාර්කික ගුණාංග ප්‍රවේශයක් අනුගමනය කිරීම සඳහා දිශානුගත පන්ති අතලොස්සක් නැවත නම් කර ඇත. අපගේ නම්‍ය උපයෝගිතා වලට ස්තුති වන්නට ඔබගෙන් බොහෝ දෙනෙක් දැනටමත් තාර්කික ගුණාංග සමඟ අන්තර්ක්‍රියා කර ඇත-ඒවා දිශානති ගුණාංග ආදේශ කරයි වැනි leftසහ rightපක්ෂව startසහ end. එමගින් පන්ති නාම සහ අගයන් LTR සහ RTL සඳහා කිසිදු පොදු කාර්යක් නොමැතිව සුදුසු වේ.

උදාහරණයක් ලෙස, .ml-3සඳහා වෙනුවට margin-left, භාවිතා කරන්න .ms-3.

අපගේ මූලාශ්‍ර Sass හෝ සම්පාදනය කරන ලද 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;
}

විකල්ප අකුරු තොගය

ඔබ අභිරුචි අකුරු භාවිතා කරන්නේ නම්, සියලු අකුරු ලතින් නොවන හෝඩියට සහාය නොදක්වන බව මතක තබා ගන්න. Pan-European සිට අරාබි පවුලට මාරු වීමට, ඔබට /*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 වලට ස්තූතියි , මෙය ඉතා සරලයි. ඔබේ @imports පන්තියක් සමඟ ඔතා, 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කරන බවට වග බලා ගන්න .dirlang
ගොනු දෙකම පූරණය කිරීම සැබෑ කාර්ය සාධන බාධාවක් විය හැක: යම් ප්‍රශස්තකරණයක් සලකා බලන්න, සමහර විට එම ගොනු වලින් එකක් අසමමුහුර්තව පූරණය කිරීමට උත්සාහ කරන්න .
මේ ආකාරයෙන් කැදලි මෝස්තර අපගේ form-validation-state()මික්සින් අපේක්ෂිත පරිදි ක්‍රියා කිරීමෙන් වලක්වනු ඇත, එබැවින් ඔබ විසින්ම එය ටිකක් වෙනස් කිරීමට අවශ්‍ය වේ. #31223 බලන්න .

බ්‍රෙඩ්ක්‍රම්බ් බෙදුම්කරු යනු එහිම අලුත්ම විචල්‍යයක් අවශ්‍ය වන එකම අවස්ථාවයි—එනම් — $breadcrumb-divider-flippedපෙරනිමිය $breadcrumb-divider.

RTL