RTL

Pagkat-on unsaon pag-enable ang suporta para sa right-to-left text sa Bootstrap sa among layout, component, ug utilities.

Niini nga panid

Pagpamilyar

Among girekomendar nga pamilyar una sa Bootstrap pinaagi sa pagbasa sa among panid sa Pagsugod sa Pasiuna . Kung nahuman na nimo kini, ipadayon ang pagbasa dinhi kung giunsa pag-enable ang RTL.

Mahimo usab nimong basahon ang bahin sa proyekto sa RTLCSS , tungod kay kini naghatag gahum sa among pamaagi sa RTL.

Eksperimental nga bahin

Ang bahin sa RTL kay eksperimento pa ug lagmit molambo sumala sa feedback sa user. Nakita ba nimo ang usa ka butang o adunay pag-uswag nga isugyot? Ablihi ang usa ka isyu , gusto namon makuha ang imong mga panabut.

Gikinahanglan HTML

Adunay duha ka higpit nga mga kinahanglanon alang sa pagpagana sa RTL sa mga panid nga gipadagan sa Bootstrap.

Ibutang dir="rtl"sa <html>elemento.
Pagdugang ug angay langnga attribute, sama sa lang="ar", sa <html>elemento.

Gikan didto, kinahanglan nimong iapil ang RTL nga bersyon sa among CSS. Pananglitan, ania ang stylesheet alang sa among gihugpong ug gimino nga CSS nga adunay RTL nga gipagana:

<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

Imong makita ang mga kinahanglanon sa ibabaw nga makita niining giusab nga RTL starter template.

<!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 pananglitan sa RTL

Pagsugod sa usa sa among daghang mga pananglitan sa RTL .

Pagduol

Ang among pamaagi sa pagtukod og suporta sa RTL ngadto sa Bootstrap adunay duha ka importanteng desisyon nga makaapekto kung giunsa namo pagsulat ug paggamit ang among CSS:

Una, nakahukom kami nga tukuron kini gamit ang proyekto sa RTLCSS . Naghatag kini kanamo pipila ka kusgan nga mga bahin alang sa pagdumala sa mga pagbag-o ug pag-override kung mobalhin gikan sa LTR hangtod sa RTL. Gitugotan usab kami niini sa paghimo og duha ka bersyon sa Bootstrap gikan sa usa ka codebase.
Ikaduha, gibag-o namon ang ngalan sa pipila ka mga direksyon nga klase aron magamit ang usa ka pamaagi nga lohikal nga kabtangan. Kadaghanan kaninyo nakig-interact na sa lohikal nga mga kabtangan salamat sa among mga flex utilities—gipuli nila ang mga kabtangan sa direksyon sama sa leftug rightpabor startug end. Kana naghimo sa mga ngalan sa klase ug mga kantidad nga angay alang sa LTR ug RTL nga walay bisan unsang overhead.

Pananglitan, imbes nga .ml-3para sa margin-left, gamita ang .ms-3.

Ang pagtrabaho kauban ang RTL, pinaagi sa among gigikanan nga Sass o giipon nga CSS, dili kinahanglan nga lahi kaayo sa among default nga LTR bisan pa.

Ipasibo gikan sa tinubdan

Kung bahin sa pag- customize , ang gipalabi nga paagi mao ang pagpahimulos sa mga variable, mapa, ug mixin. Ang kini nga pamaagi parehas nga molihok alang sa RTL, bisan kung kini giproseso sa post gikan sa naipon nga mga file, salamat kung giunsa ang RTLCSS nagtrabaho .

Pasadya nga mga kantidad sa RTL

Gamit ang mga direktiba sa bili sa RTLCSS , mahimo nimo ang usa ka variable nga output nga lahi nga kantidad alang sa RTL. Pananglitan, aron makunhuran ang gibug-aton sa $font-weight-boldtibuok codebase, mahimo nimong gamiton ang /*rtl: {value}*/syntax:

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

Nga magpagawas sa mosunod para sa among default nga CSS ug RTL CSS:

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

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

Alternatibong font stack

Sa kaso nga naggamit ka ug custom nga font, hibaloi nga dili tanang font nagsuporta sa dili Latin nga alpabeto. Aron mabalhin gikan sa Pan-European ngadto sa Arabic nga pamilya, kinahanglan nimo nga gamiton /*rtl:insert: {value}*/sa imong font stack aron usbon ang mga ngalan sa mga pamilya sa font.

Pananglitan, sa pagbalhin gikan sa Helvetica Neuefont para sa LTR ngadto sa Helvetica Neue Arabicpara sa RTL, ang imong Sass code mahimong sama niini:

$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 ug RTL sa samang higayon

Kinahanglan ang LTR ug RTL sa parehas nga panid? Salamat sa RTLCSS String Maps , medyo prangka kini. I-wrap ang imong @imports sa usa ka klase, ug pagtakda og custom rename nga lagda alang 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*/

Human sa pagpadagan sa Sass dayon sa RTLCSS, ang matag tigpili sa imong CSS nga mga payl i-prepend sa .ltr, ug .rtlalang sa RTL files. Karon mahimo nimong gamiton ang duha ka mga file sa parehas nga panid, ug gamiton lang .ltro .rtlsa imong mga sangkap nga wrapper aron magamit ang usa o ang lain nga direksyon.

Mga kaso sa Edge ug nahibal-an nga mga limitasyon

Samtang kini nga pamaagi masabtan, palihug pagtagad sa mosunod:

Sa diha nga nagbalhin .ltrug .rtl, siguroha nga ikaw makadugang dirug langmga hiyas sumala niana.
Ang pagkarga sa duha ka mga file mahimong usa ka tinuod nga performance bottleneck: ikonsiderar ang pipila ka pag-optimize , ug tingali sulayi ang pagkarga sa usa sa mga file nga asynchronously .
Ang mga istilo sa nesting niining paagiha makapugong sa among form-validation-state()mixin nga molihok sama sa gituyo, busa kinahanglan nimo nga usbon kini sa imong kaugalingon. Tan-awa ang #31223 .

Ang breadcrumb separator mao ra ang kaso nga nanginahanglan sa kaugalingon nga bag-o nga variable- nga mao ang $breadcrumb-divider-flippedpag-default sa $breadcrumb-divider.

RTL