Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

RTL

Ithute mokhoa oa ho thusa ho tšehetsa mongolo ho tloha ho le letona ho ea ho le letšehali ho Bootstrap ho pholletsa le sebopeho sa rona, likarolo le lisebelisoa.

Leqepheng lena

Itloaetse

Re khothaletsa ho tloaelana le Bootstrap pele ka ho bala leqephe la rona la Ho Qala Selelekela . Ha u se u qetile ho e bala, tsoela pele ho bala mona bakeng sa mokhoa oa ho nolofalletsa RTL.

U kanna ua batla ho bala ka projeke ea RTLCSS , kaha e matlafatsa mokhoa oa rona ho RTL.

Sebopeho sa liteko

Karolo ea RTL e ntse e lekoa 'me mohlomong e tla fetoha ho latela maikutlo a basebelisi. Na u bone ntho e itseng kapa u na le ntlafatso eo u ka e khothalletsang? Bula bothata , re ka thabela ho fumana lintlha tsa hau.

HTML e hlokahalang

Ho na le litlhokahalo tse peli tse tiileng tsa ho nolofalletsa RTL ho maqephe a tsamaisoang ke Bootstrap.

  1. Beha dir="rtl"holim'a <html>element.
  2. Kenya langtšobotsi e nepahetseng, joalo lang="ar"ka, ho <html>element.

Ho tloha moo, o tla hloka ho kenyelletsa mofuta oa RTL oa CSS ea rona. Mohlala, mona ke leqephe la setaele bakeng sa CSS ea rona e hlophisitsoeng le e ntlafalitsoeng e nang le RTL e lumelletsoeng:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

template ea ho qala

U ka bona litlhoko tse ka holimo tse hlahang templateng ena e fetotsoeng ea 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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Mehlala ea RTL

Qala ka e 'ngoe ea mehlala ea rona e mengata ea RTL .

Atamela

Mokhoa oa rona oa ho aha tšehetso ea RTL ho Bootstrap e tla le liqeto tse peli tsa bohlokoa tse amang tsela eo re ngolang le ho sebelisa CSS ea rona ka eona:

  1. Taba ea pele, re ile ra etsa qeto ea ho e haha ​​ka morero oa RTLCSS . Sena se re fa likarolo tse matla tsa ho laola liphetoho le ho feta ha re tloha LTR ho ea ho RTL. E boetse e re lumella ho theha mefuta e 'meli ea Bootstrap ho tsoa ho codebase e le' ngoe.

  2. Taba ea bobeli, re rehile lihlopha tse 'maloa tsa tataiso ho sebelisa mokhoa o hlakileng oa thepa. Bongata ba lona le se le ntse le sebelisana le thepa e utloahalang ka lebaka la lisebelisoa tsa rona tsa flex-li nka sebaka sa thepa ea tataiso e kang leftle rightmolemong startle end. Seo se etsa hore mabitso le litekanyetso tsa sehlopha li tšoanele LTR le RTL ntle le ho feta.

Ka mohlala, sebakeng sa .ml-3bakeng sa margin-left, sebelisa .ms-3.

Ho sebetsa le RTL, ka mohloli oa rona oa Sass kapa CSS e hlophisitsoeng, ha ea lokela ho fapana haholo le LTR ea rona ea kamehla.

Iketsetse ho tsoa mohloling

Ha ho tluoa tabeng ea ho iketsetsa , mokhoa o ratoang ke ho nka monyetla ka mefuta-futa, limmapa le li-mixins. Mokhoa ona o sebetsa ka mokhoa o ts'oanang ho RTL, leha e ka sebetsoa ka morao ho tsoa ho lifaele tse hlophisitsoeng, ka lebaka la hore na RTLCSS e sebetsa joang .

Maemo a tloaelehileng a RTL

U sebelisa litaelo tsa boleng ba RTLCSS , u ka etsa tlhahiso e fapaneng boleng bo fapaneng bakeng sa RTL. Mohlala, ho theola boima ba 'mele ho $font-weight-boldpholletsa le codebase, o ka sebelisa /*rtl: {value}*/syntax:

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

E ka hlahisang tse latelang bakeng sa CSS ea rona ea kamehla le RTL CSS:

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

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

Mofuta o mong oa melumo

Haeba u sebelisa fonte e tloaelehileng, hlokomela hore ha se lifonte tsohle tse tšehetsang alfabeta eo e seng ea Selatine. Ho tloha ho Pan-European ho ea lelapeng la Searabia, ho ka 'na ha hlokahala hore u sebelise /*rtl:insert: {value}*/ka har'a stack ea hau ea litlhaku ho fetola mabitso a malapa a litlhaku.

Mohlala, ho fetohela ho Helvetica Neue WebfontLTR ho Helvetica Neue Arabicea ho RTL, khoutu ea hau ea Sass e shebahala tjena:

$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 le RTL ka nako e le 'ngoe

U hloka LTR le RTL ka bobeli leqepheng le le leng? Ka lebaka la RTLCSS String Maps , sena se hlakile haholo. Qetella @imports ka sehlopha, 'me u behe molao oa ho reha lebitso bakeng 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*/

Kamora ho tsamaisa Sass ebe RTLCSS, sekhetho se seng le se seng ho lifaele tsa hau tsa CSS se tla hlophisoa pele ke .ltr, le .rtlbakeng sa lifaele tsa RTL. Hona joale o khona ho sebelisa lifaele ka bobeli leqepheng le le leng, 'me u sebelise feela .ltrkapa .rtlho li-wrappers tsa likarolo tsa hau ho sebelisa tsela e le' ngoe kapa e 'ngoe.

Linyeoe tsa Edge le mefokolo e tsebahalang

Le hoja mokhoa ona o utloahala, ka kopo ela hloko tse latelang:

  1. Ha u chencha .ltrle .rtl, etsa bonnete ba hore u eketsa dirle langlitšoaneleho ka tsela e nepahetseng.
  2. Ho kenya lifaele ka bobeli e ka ba bothata ba 'nete ba ts'ebetso: nahana ka ntlafatso e itseng , 'me mohlomong u leke ho kenya e' ngoe ea lifaele tseo ka mokhoa o tšoanang .
  3. Mekhoa ea ho etsa lihlaha ka tsela ena e tla thibela form-validation-state()mixin ea rona ho sebetsa kamoo e reriloeng kateng, kahoo e hloka hore u e lokise hanyane u le mong. Sheba #31223 .

Keke ea breadcrumb

Karohano ea breadcrumb ke eona feela nyeoe e hlokang mofuta oa eona o mocha - e leng $breadcrumb-divider-flipped-defaulting to $breadcrumb-divider.

Lisebelisoa tse ling