RTL

Lär dig hur du aktiverar stöd för text från höger till vänster i Bootstrap i vår layout, komponenter och verktyg.

På den här sidan

Bli bekant

Vi rekommenderar att du först bekantar dig med Bootstrap genom att läsa igenom vår Introduktionssida för Komma igång . När du har gått igenom det, fortsätt att läsa här för hur du aktiverar RTL.

Du kanske också vill läsa om RTLCSS-projektet , eftersom det driver vår inställning till RTL.

Experimentell funktion

RTL-funktionen är fortfarande experimentell och kommer troligen att utvecklas enligt feedback från användare. Har du upptäckt något eller har du en förbättring att föreslå? Öppna ett problem , vi vill gärna ha dina insikter.

Obligatorisk HTML

Det finns två strikta krav för att aktivera RTL på Bootstrap-drivna sidor.

Ställ dir="rtl"in på <html>elementet.
Lägg till ett lämpligt langattribut, som lang="ar", på <html>elementet.

Därifrån måste du inkludera en RTL-version av vår CSS. Här är till exempel stilmallen för vår kompilerade och minifierade CSS med RTL aktiverat:

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

Förrättsmall

Du kan se ovanstående krav återspeglas i den här modifierade RTL-startmallen.

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

Kom igång med ett av våra flera RTL-exempel .

Närma sig

Vår metod för att bygga in RTL-stöd i Bootstrap kommer med två viktiga beslut som påverkar hur vi skriver och använder vår CSS:

Först bestämde vi oss för att bygga den med RTLCSS- projektet. Detta ger oss några kraftfulla funktioner för att hantera ändringar och åsidosättningar vid övergång från LTR till RTL. Det låter oss också bygga två versioner av Bootstrap från en kodbas.
För det andra har vi döpt om en handfull riktningsklasser för att anta en logisk egenskapsmetod. De flesta av er har redan interagerat med logiska egenskaper tack vare våra flexverktyg – de ersätter riktningsegenskaper som leftoch rightför startoch end. Det gör klassnamnen och -värdena lämpliga för LTR och RTL utan någon overhead.

Använd till exempel istället för .ml-3för .margin-left.ms-3

Att arbeta med RTL, genom vår käll-Sass eller kompilerade CSS, borde dock inte skilja sig mycket från vår standard-LTR.

Anpassa från källan

När det gäller anpassning är det föredragna sättet att dra fördel av variabler, kartor och mixins. Detta tillvägagångssätt fungerar på samma sätt för RTL, även om det efterbehandlas från de kompilerade filerna, tack vare hur RTLCSS fungerar .

Anpassade RTL-värden

Med hjälp av RTLCSS-värdedirektiv kan du göra en variabelutmatning till ett annat värde för RTL. Till exempel, för att minska vikten för $font-weight-boldhela kodbasen, kan du använda /*rtl: {value}*/syntaxen:

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

Vilket skulle matas ut till följande för vår standard CSS och RTL CSS:

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

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

Alternativ teckensnittsstapel

Om du använder ett anpassat teckensnitt, var medveten om att inte alla teckensnitt stöder det icke-latinska alfabetet. För att byta från paneuropeisk till arabisk familj kan du behöva använda /*rtl:insert: {value}*/i din teckensnittsstack för att ändra namnen på teckensnittsfamiljer.

Till exempel, för att byta från Helvetica Neueteckensnitt för LTR till Helvetica Neue Arabicför RTL, kan din Sass-kod se ut så här:

$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 och RTL samtidigt

Behöver du både LTR och RTL på samma sida? Tack vare RTLCSS String Maps är detta ganska enkelt. Slå in dina @imports med en klass och ställ in en anpassad regel för byte av namn för 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*/

Efter att ha kört Sass och sedan RTLCSS, kommer varje väljare i dina CSS-filer att läggas före av .ltr, och .rtlför RTL-filer. Nu kan du använda båda filerna på samma sida och helt enkelt använda .ltreller .rtlpå dina komponenters omslag för att använda den ena eller andra riktningen.

Kantfall och kända begränsningar

Även om detta tillvägagångssätt är förståeligt, var uppmärksam på följande:

När du byter .ltroch .rtl, se till att du lägger till diroch langattribut i enlighet med detta.
Att ladda båda filerna kan vara en verklig prestandaflaskhals: överväg lite optimering och försök kanske att ladda en av dessa filer asynkront .
Att bygga in stilar på det här sättet kommer att förhindra att vår form-validation-state()mixin fungerar som det är tänkt, vilket kräver att du justerar det lite själv. Se #31223 .

Brödsmulseparatorn är det enda fallet som kräver sin egen helt nya variabel – nämligen $breadcrumb-divider-flipped– som förinställs till $breadcrumb-divider.

RTL