RTL a ni
Kan layout, component leh utilities zawng zawngah Bootstrap-a right-to-left text support enable dan zir rawh.
Hriat tawn rawh
Bootstrap hi kan Getting Started Introduction page chhiar la , hriat chian hmasak phawt kan rawt a ni . I tlan pelh zawh chuan RTL enable dan tur chu hetah hian chhiar chhunzawm rawh.
RTLCSS project chungchang pawh i chhiar duh mai thei , RTL chungchanga kan kalphung a tichak avangin.
Experimental feature a ni
RTL feature hi experimental a la ni a, user feedback ang zelin a inthlak danglam ngei ang. Thil i hmu a, hmasawnna tur i nei em? Open an issue , i hriatna te kan dawng thei ang.
HTML mamawh a ni
Bootstrap hmanga page-a RTL enable tur hian thil tih tur khauh tak pahnih a awm a.
- Element
dir="rtl"
ah chuan set rawh .<html>
- Element -ah hian
lang
attribute dik tak, , ang chi dah belh rawh .lang="ar"
<html>
Chuta tang chuan kan CSS RTL version i dah tel a ngai ang. Entirnan, RTL enabled-a kan compiled leh minified CSS stylesheet chu hetiang hi a ni:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Starter template a ni
A chunga thil mamawh te hi he RTL starter template siam danglam takah hian a lang tih i hmu thei ang.
<!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 entirnan
Kan RTL entirnan engemaw zat zinga pakhat hmangin tan la rawh .
Hmachhawn
Bootstrap-a RTL support kan siam dan tur hian thutlukna pawimawh pahnih a keng tel a, chu chuan kan CSS kan ziah leh hman dan a nghawng a ni:
-
A hmasain RTLCSS project hmanga sak kan tum a . Hei hian LTR atanga RTL a kan kal hunah inthlak danglamna leh override enkawl dan tur feature chak tak tak min pe a ni. Codebase pakhat atanga Bootstrap version pahnih siam theihna a siam bawk.
-
Pahnihnaah chuan, logical properties approach hmang turin directional class tlemte hming kan thlak a. A tam zawk chuan kan flex utilities avang hian logical property te nen in inzawm tawh a—anmahni hian direction property ang chi
left
lehright
in favourstart
lehend
. Chu chuan class hming leh value te chu LTR leh RTL tan overhead awm lovin a inmil tir a ni.
Entirnan, .ml-3
for tih ai margin-left
chuan .ms-3
.
RTL hmanga hnathawh, kan source Sass emaw compiled CSS kaltlangin, kan default LTR nen chuan a danglam vak tur a ni lo nain.
Source atanga customize theih a ni
Customization -ah chuan a duh ber chu variable, map, leh mixin te hman tangkai hi a ni. Hetiang approach hian RTL tan pawh a thawk ve tho a, compiled files atanga post-processed pawh nise, RTLCSS hnathawh dan avang hian .
RTL value siam dan tur
RTLCSS value directives hmangin variable output chu RTL tan value danglam takah i siam thei ang. Entirnan, $font-weight-bold
codebase chhung zawnga weight tihtlem tur chuan /*rtl: {value}*/
syntax hi i hmang thei ang:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Chu chuan kan default CSS leh RTL CSS atan a hnuaia mi ang hian a output ang:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Font stack dang a awm bawk
Custom font i hman chuan font zawng zawng hian Latin ni lo alphabet an support vek lo tih hre reng ang che. Pan-European atanga Arabic chhungkaw a inthlak tur chuan /*rtl:insert: {value}*/
i font stack ah font chhungkaw hming siamthat nan i hmang a ngai mai thei.
Entirnan, Helvetica Neue Webfont
for LTR atanga Helvetica Neue Arabic
for RTL a switch tur chuan i Sass code chu hetiang hian a lang ang:
$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 leh RTL te a rualin
Page khatah LTR leh RTL pahnih i mamawh em? RTLCSS String Maps vang hian hei hi a awlsam khawp mai. I @import
s chu class hmangin wrap la, RTLCSS atan custom rename rule set rawh:
/* 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*/
Sass then RTLCSS i run zawh chuan i CSS files a selector tinte chu .ltr
, leh .rtl
RTL files tan prepend a ni ang. Tunah chuan file pahnih chu page khatah i hmang thei tawh a, i components wrappers-ah emaw hmangin kawng khat emaw, kawng dang emaw hmang .ltr
mai rawh..rtl
Edge case leh tihkhawtlai hriat tawhte
Hetiang kalphung hi hriatthiam theih a nih laiin, a hnuaia mite hi ngaihven hle ang che:
.ltr
leh , i switch dawnin a duh angin.rtl
adddir
lehlang
attribute te i siam ngei ngei tur a ni.- File pahnih load hi performance bottleneck tak tak a ni thei: optimization engemaw zat ngaihtuah la , chutiang file pakhat chu asynchronous- a load tum pawh a ni mai thei .
- Hetianga nesting styles hian kan
form-validation-state()
mixin chu a tum angin a thawk thei lo ang a, chuvangin nangmah ngeiin tlem tal i tweak a ngai ang. #31223 ah hian en rawh .
Chhangphut case chu
Breadcrumb separator hi a variable thar tak tak mamawhna case awmchhun a ni— chu chu $breadcrumb-divider-flipped
—defaulting to $breadcrumb-divider
.