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.
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
lang
attribut, somlang="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-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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-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>
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
left
ochright
förstart
ochend
. 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-3
fö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-bold
hela 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 Neue Webfont
för LTR till Helvetica Neue Arabic
för RTL, ser din Sass-kod 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 @import
s 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 .rtl
för RTL-filer. Nu kan du använda båda filerna på samma sida och helt enkelt använda .ltr
eller .rtl
på 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
.ltr
och.rtl
, se till att du lägger tilldir
ochlang
attribut 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ödsmulefallet
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
.