RTL we dɛn kɔl RTL
Lan aw fɔ ɛnabul sɔpɔt fɔ rayt-to-lɛft tɛks na Bootstrap akɔdin to wi layout, kɔmpɔnɛnt dɛn, ɛn yutiliti dɛn.
Mek yu no bɔt am
Wi kin advays yu fɔ no bɔt Bootstrap fɔs bay we yu rid wi Getting Started Introduction pej . We yu dɔn rɔn tru am, kɔntinyu fɔ rid ya fɔ aw fɔ ɛnabul RTL.
Yu kin want fɔ rid ɔp bak bɔt di RTLCSS prɔjek , as i de gi pawa to wi we fɔ du RTL.
Ekspirimɛnt ficha
Di RTL ficha stil de ɛkspirimɛnt ɛn i go mɔs bi se i go evolv akɔdin to di yuza fidbak. Yu dɔn si sɔntin ɔ yu gɛt impɔtant tin fɔ tɔk bɔt? Open an issue , wi go lɛk fɔ gɛt yu insayt dɛn.
HTML we dɛn nid
Tu strikt rikwaymɛnt dɛn de fɔ ɛnabul RTL insay Bootstrap-pawa pej dɛn.
- Set
dir="rtl"
pan di<html>
elemɛnt. - Ad wan
lang
atribyut we fit, lɛklang="ar"
, pan di<html>
ɛlimɛnt.
Frɔm de, yu go nid fɔ put wan RTL vɛshɔn fɔ wi CSS. Fɔ ɛgzampul, na di staylshit fɔ wi kɔmpilayt ɛn minifyed CSS wit RTL we dɛn dɔn ɛnabul:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Di tɛmplat fɔ stat
Yu kin si di rikwaymɛnt dɛn we de ɔp we de sho insay dis modifyed RTL stata tɛmplat.
<!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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
RTL ɛgzampul dɛn
Start wit wan pan wi sɔm RTL ɛgzampul dɛn .
Mit
Wi we fɔ bil RTL sɔpɔt insay Bootstrap kam wit tu impɔtant disizhɔn dɛn we de ambɔg aw wi de rayt ɛn yuz wi CSS:
-
Fɔs, wi disayd fɔ bil am wit di RTLCSS prɔjek. Dis de gi wi sɔm pawaful ficha dɛn fɔ manej chenj ɛn ɔvarayz we yu de muf frɔm LTR to RTL. I de alaw wi bak fɔ bil tu vɛshɔn dɛn fɔ Bootstrap frɔm wan kɔdbɛys.
-
Sɛkɔn, wi dɔn chenj di nem fɔ wan anful dairekshɔn klas dɛn fɔ adopt wan lɔjik prɔpati dɛn we dɛn de yuz. Bɔku pan una dɔn ɔlrɛdi intarakt wit lɔjik prɔpati dɛn tank to wi fleks yutiliti dɛn—dɛn de riples dairekshɔn prɔpati dɛn lɛk
left
ɛnright
in favɔritstart
ɛnend
. Dat de mek di klas nem ɛn valyu dɛn fit fɔ LTR ɛn RTL we nɔ gɛt ɛni ɔvahɛd.
Fɔ ɛgzampul, instead fɔ yuz .ml-3
fɔ margin-left
, yuz .ms-3
.
Wok wit RTL, tru wi sɔs Sass ɔ kɔmpilayt CSS, nɔ fɔ rili difrɛn frɔm wi difɔlt LTR pan ɔl we.
Kastamayz frɔm sɔs
We i kam pan kɔstɔmayshɔn , di we we dɛn kin lɛk fɔ du na fɔ tek advantej pan di vayriɔbul dɛn, map dɛn, ɛn miksin dɛn. Dis we fɔ du tin de wok di sem fɔ RTL, ivin if dɛn dɔn post-prosɛs am frɔm di fayl dɛn we dɛn dɔn kɔmpilayt, tank to aw RTLCSS de wok .
Kastom RTL valyu dɛn
Yuz RTLCSS valyu dairekt , yu kin mek wan vɛriɔbul autput wan difrɛn valyu fɔ RTL. Fɔ ɛgzampul, fɔ ridyus di wet fɔ $font-weight-bold
ɔlsay na di kɔdbɛs, yu kin yuz di /*rtl: {value}*/
sɛntaks:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
We go autput to di wan dɛn we de dɔŋ fɔ wi difɔlt CSS ɛn RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternativ font stak fɔ di wan dɛn we de yuz am
If yu de yuz kɔstɔm font, mɛmba se nɔto ɔl di font dɛn de sɔpɔt di alifbɛt we nɔto Latin. Fɔ chenj frɔm Pan-Yuropian to Arabik famili, yu go nid fɔ yuz /*rtl:insert: {value}*/
insay yu font stak fɔ chenj di nem dɛn fɔ di font famili dɛn.
Fɔ ɛgzampul, fɔ chenj frɔm Helvetica Neue Webfont
fɔ LTR to Helvetica Neue Arabic
fɔ RTL, yu Sass kɔd tan lɛk dis:
$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 ɛn RTL na di sem tɛm
Nid ɔl tu di LTR ɛn RTL na di sem pej? Tɛnki fɔ RTLCSS String Maps , dis na fayn fayn tin fɔ du. Rap yu @import
s wit wan klas, ɛn sɛt wan kɔstɔm rinem rul fɔ 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*/
Afta yu dɔn rɔn Sass den RTLCSS, ɛni sɛlɛktɔ na yu CSS fayl dɛn go de bifo bay .ltr
, ɛn .rtl
fɔ RTL fayl dɛn. Naw yu ebul fɔ yuz ɔl tu di fayl dɛn na di sem pej, ɛn jɔs yuz .ltr
ɔ .rtl
na yu kɔmpɔnɛnt wrap dɛn fɔ yuz wan ɔ di ɔda dairekshɔn.
Edj kes ɛn limiteshɔn dɛn we dɛn no
Pan ɔl we wi kin ɔndastand dis we fɔ du tin, duya pe atɛnshɔn to dɛn tin ya:
- We yu de chenj
.ltr
ɛn.rtl
, mek shɔ se yu addir
ɛnlang
atribyut dɛn akɔdin to am. - Fɔ lod ɔl tu di fayl dɛn kin bi rial pefɔmɛns bɔtulnɛk: tink bɔt sɔm ɔptimayzeshɔn , ɛn sɔntɛm tray fɔ lod wan pan dɛn fayl dɛn de asynchronously .
- Nesting stayl dis we go mek wi
form-validation-state()
mixin nɔ wok lɛk aw dɛn bin want am, so nid fɔ mek yu tweak am smɔl bay yusɛf. Si di #31223 .
Di kes we dɛn mek wit bred
Di breadcrumb separator na di onli kes we nid in yon brand nyu variebul— dat na $breadcrumb-divider-flipped
—difɔlt to $breadcrumb-divider
.