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-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 ਇੱਕੋ ਸਮੇਂ 'ਤੇ

ਇੱਕੋ ਪੰਨੇ 'ਤੇ 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, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਉਸ ਅਨੁਸਾਰ ਜੋੜਦੇ ਹੋ dirਅਤੇ langਗੁਣਾਂ ਨੂੰ ਜੋੜਦੇ ਹੋ।
ਦੋਵੇਂ ਫਾਈਲਾਂ ਨੂੰ ਲੋਡ ਕਰਨਾ ਇੱਕ ਅਸਲ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਰੁਕਾਵਟ ਹੋ ਸਕਦਾ ਹੈ: ਕੁਝ ਅਨੁਕੂਲਤਾ 'ਤੇ ਵਿਚਾਰ ਕਰੋ, ਅਤੇ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਫਾਈਲ ਨੂੰ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਲੋਡ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ।
ਇਸ ਤਰੀਕੇ ਨਾਲ ਨੈਸਟਿੰਗ ਸਟਾਈਲ ਸਾਡੇ form-validation-state()ਮਿਕਸੀਨ ਨੂੰ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਨ ਤੋਂ ਰੋਕੇਗੀ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਇਸ ਨੂੰ ਥੋੜਾ ਜਿਹਾ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ। ਵੇਖੋ #31223 .

ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਵੱਖਰਾ ਕਰਨ ਵਾਲਾ ਇਕੋ ਇਕ ਅਜਿਹਾ ਕੇਸ ਹੈ ਜਿਸ ਨੂੰ ਇਸਦੇ ਆਪਣੇ ਬਿਲਕੁਲ ਨਵੇਂ ਵੇਰੀਏਬਲ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ- ਅਰਥਾਤ $breadcrumb-divider-flipped- ਡਿਫਾਲਟ ਕਰਨ ਲਈ $breadcrumb-divider।

RTL