RTL

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

Niini nga panid

Pagpamilyar

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

Mahimo usab nimo nga 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 gipamubu 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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>

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 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 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 RTLCSS value directives , mahimo nimong himoon ang variable nga output nga lain nga value para 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 mogawas 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, aron mabalhin gikan Helvetica Neue Webfontsa LTR ngadto Helvetica Neue Arabicsa RTL, ang imong Sass code ingon 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-prepended 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 iyang kaugalingon nga bag-ong variable- nga mao ang $breadcrumb-divider-flippedpag-default sa $breadcrumb-divider.

RTL