Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

RTL

Matutunan kung paano paganahin ang suporta para sa kanan-papuntang-kaliwang text sa Bootstrap sa aming layout, mga bahagi, at mga utility.

Sa pahinang ito

Maging pamilyar

Inirerekomenda naming maging pamilyar muna sa Bootstrap sa pamamagitan ng pagbabasa sa aming pahina ng Panimula sa Pagsisimula . Kapag natapos mo na ito, magpatuloy sa pagbabasa dito para sa kung paano paganahin ang RTL.

Baka gusto mo ring magbasa tungkol sa proyekto ng RTLCSS , dahil pinapagana nito ang aming diskarte sa RTL.

Pang-eksperimentong tampok

Ang tampok na RTL ay pang- eksperimento pa rin at malamang na magbabago ayon sa feedback ng user. May nakita o may iminumungkahi na pagpapabuti? Magbukas ng isyu , gusto naming makuha ang iyong mga insight.

Kinakailangang HTML

Mayroong dalawang mahigpit na kinakailangan para sa pagpapagana ng RTL sa mga pahinang pinapagana ng Bootstrap.

  1. Itakda dir="rtl"sa <html>elemento.
  2. Magdagdag ng naaangkop na langkatangian, tulad lang="ar"ng , sa <html>elemento.

Mula doon, kakailanganin mong magsama ng RTL na bersyon ng aming CSS. Halimbawa, narito ang stylesheet para sa aming pinagsama-sama at pinaliit na CSS na may pinaganang RTL:

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

Panimulang template

Makikita mo ang mga kinakailangan sa itaas na makikita sa binagong template ng starter ng 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-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>

Mga halimbawa ng RTL

Magsimula sa isa sa aming ilang mga halimbawa ng RTL .

Lapitan

Ang aming diskarte sa pagbuo ng suporta sa RTL sa Bootstrap ay may kasamang dalawang mahahalagang desisyon na nakakaapekto sa kung paano namin isinusulat at ginagamit ang aming CSS:

  1. Una, nagpasya kaming itayo ito gamit ang proyekto ng RTLCSS . Nagbibigay ito sa amin ng ilang makapangyarihang feature para sa pamamahala ng mga pagbabago at pag-override kapag lumilipat mula sa LTR patungo sa RTL. Nagbibigay-daan din ito sa amin na bumuo ng dalawang bersyon ng Bootstrap mula sa isang codebase.

  2. Pangalawa, pinalitan namin ang pangalan ng isang maliit na direksyon ng mga klase upang magpatibay ng isang lohikal na diskarte sa mga katangian. Karamihan sa inyo ay nakipag-ugnayan na sa mga lohikal na katangian salamat sa aming mga flex utility—pinapalitan nila ang mga katangian ng direksyon tulad ng leftat rightpabor startat end. Ginagawa nitong naaangkop ang mga pangalan at value ng klase para sa LTR at RTL nang walang anumang overhead.

Halimbawa, sa halip na .ml-3para sa margin-left, gamitin ang .ms-3.

Ang pagtatrabaho sa RTL, sa pamamagitan ng aming source na Sass o compiled CSS, ay hindi dapat magkaiba sa aming default na LTR.

I-customize mula sa pinagmulan

Pagdating sa pag- customize , ang gustong paraan ay ang samantalahin ang mga variable, mapa, at mixin. Parehong gumagana ang diskarteng ito para sa RTL, kahit na ito ay post-processed mula sa mga pinagsama-samang file, salamat sa kung paano gumagana ang RTLCSS .

Mga custom na halaga ng RTL

Gamit ang RTLCSS value directives , maaari kang gumawa ng variable na output ng ibang value para sa RTL. Halimbawa, upang bawasan ang bigat para sa $font-weight-boldbuong codebase, maaari mong gamitin ang /*rtl: {value}*/syntax:

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

Alin ang maglalabas sa sumusunod para sa aming default na CSS at RTL CSS:

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

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

Alternatibong font stack

Kung gumagamit ka ng custom na font, tandaan na hindi lahat ng font ay sumusuporta sa hindi Latin na alpabeto. Upang lumipat mula sa Pan-European patungo sa Arabic na pamilya, maaaring kailanganin mong gamitin /*rtl:insert: {value}*/sa iyong font stack upang baguhin ang mga pangalan ng mga pamilya ng font.

Halimbawa, upang lumipat mula sa Helvetica Neuefont para sa LTR patungo sa Helvetica Neue Arabicpara sa RTL, maaaring ganito ang hitsura ng iyong Sass code:

$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 at RTL sa parehong oras

Kailangan ng parehong LTR at RTL sa parehong pahina? Salamat sa RTLCSS String Maps , ito ay medyo diretso. I-wrap ang iyong @imports ng isang klase, at magtakda ng custom na panuntunan sa pagpapalit ng pangalan para sa 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*/

Pagkatapos patakbuhin ang Sass at pagkatapos ay RTLCSS, ang bawat tagapili sa iyong mga CSS file ay pasisimulan ng .ltr, at .rtlpara sa mga RTL file. Ngayon ay magagamit mo na ang parehong mga file sa parehong pahina, at gamitin lamang .ltro .rtlsa iyong mga bahagi ng wrapper upang magamit ang isa o ang iba pang direksyon.

Edge case at alam na limitasyon

Bagama't nauunawaan ang pamamaraang ito, mangyaring bigyang-pansin ang mga sumusunod:

  1. Kapag lumilipat .ltrat .rtl, tiyaking magdagdag ka dirat langmga attribute nang naaayon.
  2. Ang paglo-load ng parehong mga file ay maaaring maging isang tunay na bottleneck sa pagganap: isaalang-alang ang ilang pag- optimize , at maaaring subukang i- load ang isa sa mga file na iyon nang asynchronous .
  3. Pipigilan ng mga nesting style sa ganitong paraan ang aming form-validation-state()mixin na gumana ayon sa nilalayon, kaya kailangan mong mag-tweak ito nang kaunti nang mag-isa. Tingnan ang #31223 .

Yung breadcrumb case

Ang breadcrumb separator ay ang tanging kaso na nangangailangan ng sarili nitong bagong-bagong variable— ibig sabihin, ang $breadcrumb-divider-flippedpag-default sa $breadcrumb-divider.

Mga karagdagang mapagkukunan