RTL
Lærðu hvernig á að virkja stuðning fyrir texta sem er frá hægri til vinstri í Bootstrap yfir útliti okkar, íhlutum og tólum.
Kynntu þér
Við mælum með því að kynna þér Bootstrap fyrst með því að lesa í gegnum kynningarsíðuna okkar fyrir að byrja . Þegar þú hefur keyrt í gegnum það skaltu halda áfram að lesa hér um hvernig á að virkja RTL.
Þú gætir líka viljað lesa þér til um RTLCSS verkefnið þar sem það knýr nálgun okkar á RTL.
Tilraunaeiginleiki
RTL eiginleikinn er enn tilraunakenndur og mun líklega þróast í samræmi við endurgjöf notenda. Komstu auga á eitthvað eða hefurðu til að bæta úr? Opnaðu mál , við viljum gjarnan fá innsýn þína.
Áskilið HTML
Það eru tvær strangar kröfur til að virkja RTL á síðum sem knúnar eru af Bootstrap.
- Stillt
dir="rtl"
á<html>
þáttinn. - Bættu við viðeigandi
lang
eigind, eins oglang="ar"
, á<html>
frumefninu.
Þaðan þarftu að láta fylgja með RTL útgáfu af CSS okkar. Til dæmis, hér er stílblaðið fyrir samansetta og minnkaða CSS okkar með RTL virkt:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Sniðmát fyrir byrjendur
Þú getur séð ofangreindar kröfur endurspeglast í þessu breytta RTL byrjunarsniðmáti.
<!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 dæmi
Byrjaðu með einu af nokkrum RTL dæmum okkar .
Nálgun
Nálgun okkar til að byggja upp RTL stuðning í Bootstrap kemur með tveimur mikilvægum ákvörðunum sem hafa áhrif á hvernig við skrifum og notum CSS okkar:
-
Í fyrsta lagi ákváðum við að byggja það með RTLCSS verkefninu. Þetta gefur okkur nokkra öfluga eiginleika til að stjórna breytingum og hnekkja þegar farið er frá LTR til RTL. Það gerir okkur einnig kleift að smíða tvær útgáfur af Bootstrap úr einum kóðagrunni.
-
Í öðru lagi höfum við endurnefnt handfylli stefnubundinna flokka til að taka upp rökræna eiginleika nálgun. Flest ykkar hafa þegar haft samskipti við rökræna eiginleika þökk sé sveigjanlegu tólunum okkar - þær koma í stað stefnueiginleika eins
left
og ogright
í þágustart
ogend
. Það gerir flokkanöfnin og gildin viðeigandi fyrir LTR og RTL án nokkurs kostnaðar.
Notaðu til dæmis í stað .ml-3
fyrir .margin-left
.ms-3
Að vinna með RTL, í gegnum uppruna Sass eða samsett CSS, ætti þó ekki að vera mikið frábrugðið sjálfgefna LTR okkar.
Sérsníða frá uppruna
Þegar kemur að sérstillingu er ákjósanlegasta leiðin að nýta sér breytur, kort og blöndun. Þessi nálgun virkar á sama hátt fyrir RTL, jafnvel þótt hún sé eftirvinnsla úr samsettum skrám, þökk sé því hvernig RTLCSS virkar .
Sérsniðin RTL gildi
Með því að nota RTLCSS gildi tilskipanir geturðu gert breytuúttak að öðru gildi fyrir RTL. Til dæmis, til að minnka þyngd fyrir $font-weight-bold
allan kóðagrunninn, geturðu notað /*rtl: {value}*/
setningafræðina:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Sem myndi gefa út í eftirfarandi fyrir sjálfgefna CSS og RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Annar leturstafla
Ef þú ert að nota sérsniðna leturgerð skaltu hafa í huga að ekki öll leturgerðir styðja latneska stafrófið. Til að skipta úr samevrópskri fjölskyldu yfir í arabíska fjölskyldu gætirðu þurft að nota /*rtl:insert: {value}*/
í leturstaflanum þínum til að breyta nöfnum leturfjölskyldna.
Til dæmis, til að skipta úr Helvetica Neue Webfont
fyrir LTR í Helvetica Neue Arabic
fyrir RTL, lítur Sass kóðinn þinn svona út:
$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 og RTL á sama tíma
Þarftu bæði LTR og RTL á sömu síðu? Þökk sé RTLCSS String Maps er þetta frekar einfalt. Vefðu @import
s þínum með bekk og settu sérsniðna endurnefnareglu fyrir 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*/
Eftir að Sass hefur verið keyrt og síðan RTLCSS, verður hver veljara í CSS skránum þínum settur á undan .ltr
, og .rtl
fyrir RTL skrár. Nú geturðu notað báðar skrárnar á sömu síðu og einfaldlega notað .ltr
eða .rtl
á umbúðir íhluta þinna til að nota eina eða hina áttina.
Jaðartilfelli og þekktar takmarkanir
Þó að þessi nálgun sé skiljanleg, vinsamlegast gaum að eftirfarandi:
- Þegar skipt er yfir
.ltr
og.rtl
, vertu viss um að þú bætir viðdir
oglang
eiginleikum í samræmi við það. - Að hlaða báðar skrárnar getur verið raunverulegur flöskuháls á frammistöðu: íhugaðu smá fínstillingu og reyndu kannski að hlaða einni af þessum skrám ósamstilltur .
- Hreiðurstíll á þennan hátt kemur í veg fyrir að blandan okkar
form-validation-state()
virki eins og til er ætlast, þannig að þú þarft að fínstilla það aðeins sjálfur. Sjá #31223 .
Brauðmolamálið
Brauðmolaskiljan er eina tilvikið sem krefst eigin glænýju breytu — nefnilega $breadcrumb-divider-flipped
— sjálfgefið $breadcrumb-divider
.