Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

RTL

Kawm paub yuav ua li cas pab txhawb rau txoj cai-rau-sab laug cov ntawv hauv Bootstrap thoob plaws peb cov txheej txheem, cov khoom siv, thiab cov khoom siv.

Ntawm nplooj ntawv no

Tau paub

Peb pom zoo kom paub txog Bootstrap ua ntej los ntawm kev nyeem ntawv los ntawm peb nplooj ntawv Pib Pib Qhia . Thaum koj tau khiav los ntawm nws, txuas ntxiv nyeem ntawm no rau yuav ua li cas pab RTL.

Tej zaum koj kuj xav nyeem txog qhov project RTLCSS , vim nws ua rau peb txoj hauv kev rau RTL.

Kev sim feature

RTL feature yog tseem sim thiab tej zaum yuav hloov zuj zus raws li cov neeg siv tswv yim. Pom ib yam dab tsi los yog muaj kev txhim kho los qhia? Qhib qhov teeb meem , peb xav tau koj qhov kev nkag siab.

Yuav tsum tau HTML

Muaj ob txoj cai nruj rau kev ua kom RTL hauv Bootstrap-powered nplooj ntawv.

  1. Teem caij dir="rtl"rau lub <html>caij.
  2. Ntxiv tus langcwj pwm tsim nyog, zoo li lang="ar", ntawm lub <html>caij.

Los ntawm qhov ntawd, koj yuav tsum suav nrog RTL version ntawm peb CSS. Piv txwv li, ntawm no yog daim ntawv teev npe rau peb muab tso ua ke thiab minified CSS nrog RTL enabled:

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

Pib template

Koj tuaj yeem pom cov kev xav tau saum toj no tshwm sim hauv qhov hloov kho RTL tus qauv pib.

<!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 cov piv txwv

Pib nrog ib qho ntawm peb ntau tus qauv RTL .

Mus kom ze

Peb txoj hauv kev los tsim RTL kev txhawb nqa rau hauv Bootstrap los nrog ob qhov kev txiav txim siab tseem ceeb uas cuam tshuam li cas peb sau thiab siv peb CSS:

  1. Ua ntej, peb txiav txim siab los tsim nws nrog RTLCSS qhov project. Qhov no muab peb qee qhov muaj zog rau kev tswj hwm kev hloov pauv thiab overrides thaum tsiv ntawm LTR rau RTL. Nws kuj tso cai rau peb tsim ob versions ntawm Bootstrap los ntawm ib tug codebase.

  2. Qhov thib ob, peb tau hloov npe rau ib qho kev qhia ntawm cov chav kawm coj los siv txoj hauv kev kom muaj txiaj ntsig zoo. Feem ntau ntawm koj twb tau cuam tshuam nrog cov khoom muaj txiaj ntsig ua tsaug rau peb cov khoom siv hluav taws xob flex - lawv hloov cov kev taw qhia cov khoom nyiam leftthiab rightnyiam startthiab end. Qhov ntawd ua rau cov npe thiab cov nqi tsim nyog rau LTR thiab RTL yam tsis muaj nyiaj siv ua haujlwm.

Piv txwv li, siv .ml-3rau margin-left, siv .ms-3.

Ua hauj lwm nrog RTL, los ntawm peb qhov chaw Sass los yog muab tso ua ke CSS, yuav tsum tsis txhob ntau txawv ntawm peb LTR default ho.

Customize los ntawm qhov chaw

Thaum nws los txog rau customization , txoj kev nyiam yog coj kom zoo dua ntawm qhov sib txawv, daim duab qhia chaw, thiab mixins. Txoj hauv kev no ua haujlwm zoo ib yam rau RTL, txawm tias nws tau ua tiav los ntawm cov ntaub ntawv muab tso ua ke, ua tsaug rau RTLCSS ua haujlwm li cas .

Kev cai RTL tus nqi

Siv RTLCSS cov lus qhia tus nqi , koj tuaj yeem ua qhov sib txawv ntawm cov txiaj ntsig sib txawv rau RTL. Piv txwv li, txhawm rau txo qhov hnyav rau $font-weight-boldthoob plaws hauv codebase, koj tuaj yeem siv cov /*rtl: {value}*/syntax:

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

Uas yuav tso tawm rau cov hauv qab no rau peb lub neej ntawd CSS thiab RTL CSS:

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

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

Alternative font stack

Nyob rau hauv rooj plaub uas koj tab tom siv cov font kev cai, nco ntsoov tias tsis yog txhua tus fonts txhawb cov ntawv tsis yog Latin. Txhawm rau hloov los ntawm Pan-European rau tsev neeg Arabic, koj yuav tsum tau siv /*rtl:insert: {value}*/hauv koj pawg font los hloov cov npe ntawm tsev neeg font.

Piv txwv li, hloov los ntawm Helvetica Neuefont rau LTR Helvetica Neue Arabicrau RTL, koj tus lej Sass tuaj yeem zoo li no:

$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 thiab RTL tib lub sijhawm

Xav tau ob qho tib si LTR thiab RTL ntawm tib nplooj ntawv? Ua tsaug rau RTLCSS String Maps , qhov no yog qhov yooj yim heev. Qhwv koj @imports nrog chav kawm, thiab teeb tsa txoj cai hloov npe rau 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*/

Tom qab khiav Sass ces RTLCSS, txhua tus xaiv hauv koj cov ntaub ntawv CSS yuav raug prepended los ntawm .ltr, thiab .rtlrau RTL cov ntaub ntawv. Tam sim no koj tuaj yeem siv ob cov ntaub ntawv ntawm tib nplooj ntawv, thiab tsuas yog siv .ltrlos yog .rtlntawm koj cov khoom siv wrappers siv ib lossis lwm qhov kev taw qhia.

Ntug rooj plaub thiab paub cov kev txwv

Txawm hais tias txoj hauv kev no nkag siab, thov ua tib zoo mloog cov hauv qab no:

  1. Thaum hloov .ltrthiab .rtl, xyuas kom tseeb tias koj ntxiv dirthiab langcwj pwm raws li.
  2. Loading ob cov ntaub ntawv tuaj yeem yog qhov kev ua haujlwm tiag tiag: xav txog qee qhov kev ua kom zoo , thiab tej zaum sim thauj ib qho ntawm cov ntaub ntawv asynchronously .
  3. Nesting styles txoj kev no yuav tiv thaiv peb cov form-validation-state()mixin los ntawm kev ua haujlwm raws li qhov xav tau, yog li xav kom koj tweak nws me ntsis ntawm koj tus kheej. Saib #31223 .

Cov ntaub ntawv breadcrumb

Lub breadcrumb separator yog tib qho xwm txheej uas xav tau nws tus kheej lub npe tshiab hloov pauv-uas yog $breadcrumb-divider-flipped-defaulting rau $breadcrumb-divider.

Cov peev txheej ntxiv