Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
Check
in English

RTL

Akohia me pehea e taea ai te tautoko mo te kuputuhi matau-ki-maui ki Bootstrap puta noa i to maatau tahora, waahanga, me nga taputapu.

I tenei wharangi

Kia taunga

Ka tūtohu kia mohio koe ki a Bootstrap i te tuatahi ma te panui i ta maatau wharangi Whakataki Whakataki . Ina oti ana koe, haere tonu te panui ki konei me pehea e taea ai te RTL.

Ka hiahia pea koe ki te panui mo te kaupapa RTLCSS , na te mea e kaha ana to maatau huarahi ki te RTL.

Te waahanga whakamatautau

Ko te waahanga RTL kei te whakamatautau tonu , ka tipu pea i runga i nga urupare a nga kaiwhakamahi. I kitea tetahi mea, he whakapai ake ranei hei whakaaro? Whakatuwheratia tetahi take , ka hiahia matou ki te tiki i o maaramatanga.

HTML e hiahiatia ana

E rua nga tino whakaritenga mo te whakaahei i te RTL ki nga wharangi whai mana a Bootstrap.

  1. Tautuhi dir="rtl"ki te <html>huānga.
  2. Tāpirihia he langhuanga e tika ana, penei lang="ar"i te , ki te <html>huānga.

Mai i reira, me whakauru e koe he putanga RTL o to tatou CSS. Hei tauira, anei te pepa ahua mo ta matou CSS whakahiato me te whakaiti me te RTL kua whakahohea:

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

tauira timata

Ka taea e koe te kite i nga whakaritenga o runga ake nei e kitea ana i roto i tenei tauira whakaoho RTL kua whakarereketia.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL tauira

Me timata ki tetahi o a maatau tauira RTL maha .

Te huarahi

Ko ta matou huarahi ki te hanga tautoko RTL ki Bootstrap ka tae mai me nga whakatau nui e rua e pa ana ki te tuhi me te whakamahi i o maatau CSS:

  1. Tuatahi, i whakatau matou ki te hanga me te kaupapa RTLCSS . Ma tenei ka homai etahi ahuatanga kaha mo te whakahaere i nga huringa me te whakakore i te wa e neke ana mai i te LTR ki te RTL. Ka taea hoki e matou te hanga i nga putanga e rua o Bootstrap mai i tetahi turanga waehere.

  2. Tuarua, kua whakaingoatia e matou etahi o nga karaehe aronga ki te tango i te huarahi huanga arorau. Ko te nuinga o koutou kua pahekoheko me nga taonga arorau na o maatau taputapu ngawari—ka whakakapihia e raatau nga ahuatanga ahunga penei leftme rightte pai startme te end. Ma tena e tika ai nga ingoa o te akomanga me nga uara mo te LTR me te RTL kaore he utu.

Hei tauira, hei utu .ml-3mo te margin-left, whakamahia .ms-3.

Ma te mahi tahi me te RTL, na roto i ta maatau puna Sass, CSS whakahiato ranei, kaua e rereke mai i ta maatau LTR taunoa.

Whakaritea mai i te puna

Ina tae mai ki te whakaritenga , ko te huarahi pai ko te whakamahi i nga taurangi, mapi, me nga whakauru. He rite tonu te mahi o tenei huarahi mo te RTL, ahakoa he tukatuka i muri mai i nga konae kua whakahiato, he mihi ki te mahi a RTLCSS .

Nga uara RTL ritenga

Ma te whakamahi i nga tohutohu uara RTLCSS , ka taea e koe te whakaputa i tetahi putanga rereke hei uara rereke mo RTL. Hei tauira, hei whakaheke i te taumaha mo $font-weight-boldte puta noa i te turanga waehere, ka taea e koe te whakamahi i te /*rtl: {value}*/wetereo:

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

Ko tehea ka puta ki nga mea e whai ake nei mo taatau CSS taunoa me te RTL CSS:

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

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

Tāpae momotuhi kē

Mena kei te whakamahi koe i te momotuhi ritenga, kia mohio kaore nga momotuhi katoa e tautoko ana i te reta reta-Latin. Hei huri mai i te whanau Pan-European ki te whanau Arapi, ka hiahia pea koe ki te whakamahi /*rtl:insert: {value}*/i roto i to taapu momotuhi hei whakarereke i nga ingoa o nga whanau momotuhi.

Hei tauira, ki te huri mai i te Helvetica Neuemomotuhi mo te LTR ki Helvetica Neue Arabicte RTL, penei pea te ahua o to waehere 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 me RTL i te wa ano

Kei te hiahia te LTR me te RTL ki te wharangi kotahi? He mihi ki te RTLCSS String Maps , he tino maamaa tenei. Takaia o @imports ki te karaehe, ka whakatakoto ture whakaingoa ritenga mo 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*/

Whai muri i te whakahaeretanga o Sass ka RTLCSS, ka tohua ia kaiwhiriwhiri i o konae CSS e .ltr, me .rtlnga konae RTL. Inaianei ka taea e koe te whakamahi i nga konae e rua i runga i te wharangi kotahi, ka whakamahi noa , i runga .ltrranei .rtli o takai waahanga hei whakamahi i tetahi, i tetahi atu huarahi ranei.

Ko nga keehi taha me nga here e mohiotia ana

Ahakoa e marama ana tenei huarahi, kia whai whakaaro koe ki enei e whai ake nei:

  1. I te wa e huri ana .ltrme te .rtl, me whakarite e koe te taapiri dirme langnga huanga.
  2. Ko te utaina o nga konae e rua ka taea te mahi tino kaha: whakaarohia etahi arotautanga , ka ngana pea ki te uta i tetahi o aua konae ma te tukutahi .
  3. Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb case

The breadcrumb separator is the only case requiring its own brand-new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

Additional resources