RTL

మా లేఅవుట్, భాగాలు మరియు యుటిలిటీల అంతటా బూట్‌స్ట్రాప్‌లో కుడి-నుండి-ఎడమ వచనానికి మద్దతును ఎలా ప్రారంభించాలో తెలుసుకోండి.

ఈ పేజీలో

పరిచయం పొందండి

మా ప్రారంభ పరిచయ పేజీ ద్వారా చదవడం ద్వారా మొదట బూట్‌స్ట్రాప్‌తో పరిచయం పొందడానికి మేము సిఫార్సు చేస్తున్నాము . మీరు దాన్ని అమలు చేసిన తర్వాత, 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL ఉదాహరణలు

మా అనేక RTL ఉదాహరణలలో ఒకదానితో ప్రారంభించండి .

అప్రోచ్

బూట్‌స్ట్రాప్‌లో RTL మద్దతును రూపొందించడానికి మా విధానం రెండు ముఖ్యమైన నిర్ణయాలతో వస్తుంది, ఇది మేము మా CSSని ఎలా వ్రాస్తాము మరియు ఉపయోగిస్తామో ప్రభావితం చేస్తుంది:

మొదట, మేము దీనిని RTLCSS ప్రాజెక్ట్‌తో నిర్మించాలని నిర్ణయించుకున్నాము . LTR నుండి RTLకి మారేటప్పుడు మార్పులు మరియు ఓవర్‌రైడ్‌లను నిర్వహించడానికి ఇది మాకు కొన్ని శక్తివంతమైన ఫీచర్‌లను అందిస్తుంది. ఇది ఒక కోడ్‌బేస్ నుండి బూట్‌స్ట్రాప్ యొక్క రెండు వెర్షన్‌లను రూపొందించడానికి కూడా అనుమతిస్తుంది.
రెండవది, లాజికల్ ప్రాపర్టీస్ విధానాన్ని అవలంబించడానికి మేము కొన్ని దిశాత్మక తరగతులకు పేరు మార్చాము. మా ఫ్లెక్స్ యుటిలిటీల కారణంగా మీలో చాలా మంది ఇప్పటికే లాజికల్ ప్రాపర్టీస్‌తో ఇంటరాక్ట్ అయ్యారు-అవి డైరెక్షన్ ప్రాపర్టీస్ లాంటివి 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;
}

ప్రత్యామ్నాయ ఫాంట్ స్టాక్

మీరు కస్టమ్ ఫాంట్‌ని ఉపయోగిస్తున్నట్లయితే, అన్ని ఫాంట్‌లు లాటిన్ యేతర వర్ణమాలకి మద్దతు ఇవ్వవని గుర్తుంచుకోండి. పాన్-యూరోపియన్ నుండి అరబిక్ కుటుంబానికి మారడానికి, మీరు /*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 స్ట్రింగ్ మ్యాప్స్‌కి ధన్యవాదాలు , ఇది చాలా సూటిగా ఉంటుంది. మీ @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నిర్ధారించుకోండి .dirlang
రెండు ఫైల్‌లను లోడ్ చేయడం అనేది నిజమైన పనితీరు అడ్డంకి కావచ్చు: కొంత ఆప్టిమైజేషన్‌ను పరిగణించండి మరియు ఆ ఫైల్‌లలో ఒకదానిని అసమకాలికంగా లోడ్ చేయడానికి ప్రయత్నించవచ్చు .
ఈ విధంగా గూడు కట్టుకునే స్టైల్స్ మా form-validation-state()మిక్సిన్ అనుకున్న విధంగా పని చేయకుండా నిరోధిస్తుంది, కాబట్టి మీరు దానిని మీరే కొంచెం సర్దుబాటు చేసుకోవాలి. #31223 చూడండి .

బ్రెడ్‌క్రంబ్ సెపరేటర్ అనేది దాని స్వంత సరికొత్త వేరియబుల్-అంటే-డిఫాల్ట్‌కి అవసరమైన ఏకైక $breadcrumb-divider-flippedసందర్భం $breadcrumb-divider.

RTL