Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

RTL a ni

Kan layout, component leh utilities zawng zawngah Bootstrap-a right-to-left text support enable dan zir rawh.

He page ah hian

Hriat tawn rawh

Bootstrap hi kan Getting Started Introduction page chhiar la , hriat chian hmasak phawt kan rawt a ni . I tlan pelh zawh chuan RTL enable dan tur chu hetah hian chhiar chhunzawm rawh.

RTLCSS project chungchang pawh i chhiar duh mai thei , RTL chungchanga kan kalphung a tichak avangin.

Experimental feature a ni

RTL feature hi experimental a la ni a, user feedback ang zelin a inthlak danglam ngei ang. Thil i hmu a, hmasawnna tur i nei em? Open an issue , i hriatna te kan dawng thei ang.

HTML mamawh a ni

Bootstrap hmanga page-a RTL enable tur hian thil tih tur khauh tak pahnih a awm a.

  1. Element dir="rtl"ah chuan set rawh .<html>
  2. Element -ah hian langattribute dik tak, , ang chi dah belh rawh .lang="ar"<html>

Chuta tang chuan kan CSS RTL version i dah tel a ngai ang. Entirnan, RTL enabled-a kan compiled leh minified CSS stylesheet chu hetiang hi a ni:

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

Starter template a ni

A chunga thil mamawh te hi he RTL starter template siam danglam takah hian a lang tih i hmu thei ang.

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

Kan RTL entirnan engemaw zat zinga pakhat hmangin tan la rawh .

Hmachhawn

Bootstrap-a RTL support kan siam dan tur hian thutlukna pawimawh pahnih a keng tel a, chu chuan kan CSS kan ziah leh hman dan a nghawng a ni:

  1. A hmasa berin RTLCSS project hmanga sak kan tum a . Hei hian LTR atanga RTL a kan kal hunah inthlak danglamna leh override enkawl dan tur feature chak tak tak min pe a ni. Codebase pakhat atanga Bootstrap version pahnih siam theihna a siam bawk.

  2. Pahnihnaah chuan, logical properties approach hmang turin directional class tlemte hming kan thlak a. A tam zawk chuan kan flex utilities avang hian logical property te nen in inzawm tawh a—anmahni hian direction property ang chi leftleh rightin favour startleh end. Chu chuan class hming leh value te chu LTR leh RTL tan overhead awm lovin a inmil tir a ni.

Entirnan, .ml-3for tih ai margin-leftchuan .ms-3.

RTL hmanga hnathawh, kan source Sass emaw compiled CSS kaltlangin, kan default LTR nen chuan a danglam vak tur a ni lo nain.

Source atanga customize theih a ni

Customization -ah chuan a duh ber chu variable, map, leh mixin te hman tangkai hi a ni. Hetiang approach hian RTL tan pawh a thawk ve tho a, compiled files atanga post-processed pawh nise, RTLCSS hnathawh dan avang hian .

RTL value siam dan tur

RTLCSS value directives hmangin variable output chu RTL tan value danglam takah i siam thei ang. Entirnan, $font-weight-boldcodebase chhung zawnga weight tihtlem tur chuan /*rtl: {value}*/syntax hi i hmang thei ang:

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

Chu chuan kan default CSS leh RTL CSS atan a hnuaia mi ang hian a output ang:

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

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

Font stack dang a awm bawk

Custom font i hman chuan font zawng zawng hian Latin ni lo alphabet an support vek lo tih hre reng ang che. Pan-European atanga Arabic chhungkaw a inthlak tur chuan /*rtl:insert: {value}*/i font stack ah font chhungkaw hming siamthat nan i hmang a ngai mai thei.

Entirnan, Helvetica NeueLTR tan font atanga Helvetica Neue ArabicRTL tan a inthlak tur chuan i Sass code chu hetiang hian a awm thei ang:

$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 leh RTL te a rualin

Page khatah LTR leh RTL pahnih i mamawh em? RTLCSS String Maps vang hian hei hi a awlsam khawp mai. I @imports chu class hmangin wrap la, RTLCSS atan custom rename rule set rawh:

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

Sass then RTLCSS i run zawh chuan i CSS files a selector tinte chu .ltr, leh .rtlRTL files tan prepend a ni ang. Tunah chuan file pahnih chu page khatah i hmang thei tawh a, i components wrappers-ah emaw hmangin kawng khat emaw, kawng dang emaw hmangin i .ltrhmang mai thei tawh bawk..rtl

Edge case leh tihkhawtlai hriat tawhte

Hetiang kalphung hi hriatthiam theih a nih laiin, a hnuaia mite hi ngaihven hle ang che:

  1. .ltrleh , i switch dawnin a duh angin .rtladd dirleh langattribute te i siam ngei ngei tur a ni.
  2. File pahnih load hi performance bottleneck tak tak a ni thei: optimization engemaw zat ngaihtuah la, chutiang file pakhat chu asynchronous- a load tum mai thei .
  3. Hetianga nesting styles hian kan form-validation-state()mixin chu a tum angin a thawk thei lo ang a, chuvangin nangmah ngeiin tlem tal i tweak a ngai ang. #31223 ah hian en rawh .

Chhangphut case chu

Breadcrumb separator hi a brand thar variable mamawhna case awmchhun a ni— chu chu $breadcrumb-divider-flipped—defaulting to $breadcrumb-divider.

Resources dangte pawh a awm bawk