RTL jedhamuun beekama

Akkaataa deeggarsa barruu mirgaa gara bitaatti Bootstrap keessatti haalata, qaamolee, fi faayidaa keenya hunda keessatti dandeessiftu baradhu.

Fuula kana irratti

Wal baradhaa

Fuula Seensa Jalqabuu keenyaa dubbisuudhaan jalqaba Bootstrap waliin wal baruuf gorsina . Erga keessa fiigdee booda, akkaataa RTL dandeessiftu as dubbisuu itti fufi.

You may also want to read up on the RTLCSS project , sababiin isaas inni mala keenya RTL irratti humna waan kennuuf.

Amala yaalii

Amalli RTL ammallee yaalii waan ta’eef akkaataa yaada fayyadamtootaatiin guddachuun isaa hin oolu. Waan tokko argite moo fooyya'iinsa yaada kennuu qabdaa? Open an issue , hubannoo keessan argachuu ni jaallanna.

HTML barbaachisu

Fuulota Bootstrap-powered keessatti RTL dandeessisuuf ulaagaalee ciccimoon lamatu jira.

Elementii dir="rtl"irratti saagi .<html>
langAmala sirrii , akka lang="ar", qaama irratti dabali <html>.

Achi irraa, CSS keenyaa RTL version dabaluu si barbaachisa. Fakkeenyaaf, kunoo akkaataa CSS keenya qindaa'ee fi xiqqaatee RTL dandeessifame:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

Unka jalqabaa

Ulaagaawwan armaan olii unkaa jalqabaa RTL fooyya'e kana keessatti calaqqisan arguu dandeessa.

<!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>

Fakkeenyota RTL

Fakkeenya RTL keenya hedduu keessaa tokkoon jalqabi .

Akkaataa

Deeggarsa RTL gara Bootstrap tti ijaaruuf mala keenya murtoowwan barbaachisoo lama kanneen akkaataa CSS keenya itti barreessinu fi itti fayyadamnu irratti dhiibbaa qaban waliin dhufa:

Jalqaba pirojektii RTLCSS waliin ijaaruuf murteessine . Kunis yeroo LTR irraa gara RTLtti ce'an jijjiirama fi irra darbuu bulchuuf amaloota humna qaban tokko tokko nuuf kenna. Akkasumas Bootstrap version lama codebase tokko irraa ijaaruuf nu dandeessisa.
Lammaffaa, mala qabeentota loojikii fudhachuuf gita kallattii muraasa maqaa jijjiirreerra. Irra caalaan keessan duraan dursitanii amaloota loojikii wajjin walqunnamtaniittu galata faayidaa flex keenyaa-isaan amaloota kallattii akka leftfi rightfayyadu bakka bu'u startfi end. Sunis maqaa fi gatiiwwan gitaa baasii ol'aanaa tokko malee LTR fi RTL'f mijatoo taasisa.

Fakkeenyaaf, bakka .ml-3for margin-left, fayyadami .ms-3.

RTL waliin hojjechuun, karaa madda keenya Sass ykn CSS qindaa'e, LTR keenya durtii irraa baay'ee adda ta'uu hin qabu haa ta'u malee.

Madda irraa dhuunfachiisi

When it comes to customization , karaan filatamaan jijjiiramoota, kaartaa, fi mixins fayyadamuudha. Malli kun RTL'f walfakkaataa hojjeta, yoo faayiloota qindaa'an irraa booda-adeemsifamellee, galata akkaataa RTLCSS itti hojjetu .

Gatii RTL amala

Qajeelfamoota gatii RTLCSS fayyadamuun , firii jijjiiramaa RTL'f gatii adda ta'e gochuu dandeessa. Fakkeenyaaf, ulfaatina $font-weight-boldguutuu kuusaa koodii keessatti hir'isuuf, gingilchaa fayyadamuu dandeessa /*rtl: {value}*/:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Kan CSS fi RTL CSS durtii keenyaaf gara armaan gadiitti baasa:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Tuullaa qubee filannoo

Haala qubee amala fayyadamaa jirtu keessatti, qubeen hundi qubee Laatiin hin taane akka hin deeggarre beekaa. /*rtl:insert: {value}*/Maatii Paan-Awurooppaa irraa gara Arabaa jijjiiruuf, maqaa maatii qubee fooyyessuuf tuullaa qubee kee keessatti fayyadamuu si barbaachisuu danda'a .

Fakkeenyaaf, Helvetica Neue Webfontfor LTR irraa gara Helvetica Neue Arabicfor RTL tti jijjiiruuf, koodii Sass kee akkas fakkaata:

$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 fi RTL yeroo tokkotti

LTR fi RTL lamaan isaanii fuula tokko irratti barbaadduu? Galata RTLCSS String Maps , kun baayyee qajeelaa dha. s kee @importgita tokkoon marsi, fi seera maqaa jijjiirraa amala RTLCSS saagi:

/* 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*/

Erga Sass sana booda RTLCSS hojjettee booda, tokkoon tokkoon filannoo faayilii CSS kee keessaa dursee .ltr, fi .rtlfaayilii RTL tiif. Amma faayilii lamaan fuula tokko irratti fayyadamuu dandeessa, fi salphaatti fayyadamuu .ltrykn .rtlmarfata qaamolee kee irratti kallattii tokko ykn isa kaan fayyadamuuf.

Keessoowwan qarqaraa fi daangaawwan beekamoo

Haalli kun hubatamaa ta’us, maaloo kanneen armaan gadii xiyyeeffannoo kennaa:

.ltrYeroo fi jijjiirtu , akkaataa kanaan dabaluu fi amaloota .rtlkee mirkaneessi .dirlang
Faayilota lamaan fe'uun rakkoo raawwii dhugaa ta'uu danda'a: fooyya'iinsa tokko tokko ilaali , fi tarii faayiloota sana keessaa tokko asynchronously fe'uuf yaali .
Nesting styles haala kanaan mixin keenya form-validation-state()akka yaadameetti akka hin hojjenne ni dhorka, kanaaf ofuma keessaniin xiqqoo akka tweak gootan isin gaafata. #31223 ilaali .

Addaan baastuu daabboo haala jijjiiramaa haaraa mataa isaa barbaadu qofaadha— jechuunis $breadcrumb-divider-flipped—durtii gara $breadcrumb-divider.