RTL
Uzziniet, kā iespējot atbalstu tekstam no labās puses uz kreiso programmā Bootstrap mūsu izkārtojumā, komponentos un utilītprogrammās.
Iepazīstieties
Mēs iesakām vispirms iepazīties ar Bootstrap, izlasot mūsu darba sākšanas ievada lapu . Kad esat to paveicis, turpiniet lasīt šeit, lai uzzinātu, kā iespējot RTL.
Varat arī izlasīt par RTLCSS projektu , jo tas nodrošina mūsu pieeju RTL.
Eksperimentāla iezīme
RTL funkcija joprojām ir eksperimentāla un, iespējams, attīstīsies saskaņā ar lietotāju atsauksmēm. Vai esat kaut ko pamanījuši vai ieteikt kādu uzlabojumu? Atklājiet problēmu , mēs labprāt saņemtu jūsu ieskatu.
Nepieciešams HTML
Ir divas stingras prasības, lai iespējotu RTL ar Bootstrap darbināmās lapās.
- Uzstādiet
dir="rtl"
uz<html>
elementa. - Pievienojiet elementam atbilstošu
lang
atribūtu, piemēramlang="ar"
, .<html>
Tālāk jums būs jāiekļauj mūsu CSS RTL versija. Piemēram, šeit ir stila lapa mūsu apkopotajam un samazinātajam CSS ar iespējotu RTL:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Startera veidne
Iepriekš minētās prasības ir atspoguļotas šajā modificētajā RTL sākuma veidnē.
<!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 piemēri
Sāciet darbu ar kādu no mūsu vairākiem RTL piemēriem .
Pieeja
Mūsu pieeja RTL atbalsta izveidei Bootstrap ietver divus svarīgus lēmumus, kas ietekmē to, kā mēs rakstām un lietojam CSS:
-
Pirmkārt, mēs nolēmām to izveidot, izmantojot RTLCSS projektu. Tas sniedz mums dažas jaudīgas funkcijas izmaiņu un ignorēšanas pārvaldībai, pārejot no LTR uz RTL. Tas arī ļauj mums izveidot divas Bootstrap versijas no vienas kodu bāzes.
-
Otrkārt, mēs esam pārdēvējuši dažas virzienu klases, lai pieņemtu loģisko īpašību pieeju. Lielākā daļa no jums jau ir izmantojuši loģiskās īpašības, pateicoties mūsu elastīgajām utilītprogrammām — tās aizstāj virziena īpašības, piemēram ,
left
unright
par labustart
unend
. Tas padara klašu nosaukumus un vērtības piemērotus LTR un RTL bez papildu izmaksām.
Piemēram, vārda vietā .ml-3
izmantojiet .margin-left
.ms-3
Tomēr darbam ar RTL, izmantojot mūsu avotu Sass vai kompilēto CSS, nevajadzētu daudz atšķirties no mūsu noklusējuma LTR.
Pielāgot no avota
Runājot par pielāgošanu , vēlamais veids ir izmantot mainīgo, karšu un kombināciju priekšrocības. Pateicoties tam, kā darbojas RTLCSS , šī pieeja darbojas tāpat kā RTL, pat ja tā ir pēcapstrāde no apkopotajiem failiem .
Pielāgotas RTL vērtības
Izmantojot RTLCSS vērtību direktīvas , varat iestatīt mainīgā izvadei atšķirīgu RTL vērtību. Piemēram, lai samazinātu svaru $font-weight-bold
visā kodu bāzē, varat izmantot /*rtl: {value}*/
sintaksi:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Kas mūsu noklusējuma CSS un RTL CSS izvadīs tālāk norādīto:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternatīva fontu kaudze
Ja izmantojat pielāgotu fontu, ņemiet vērā, ka ne visi fonti atbalsta alfabētu, kas nav latīņu alfabēts. Lai pārslēgtos no visas Eiropas uz arābu saimi, iespējams /*rtl:insert: {value}*/
, fontu kaudzē būs jāizmanto fontu saimes nosaukumi.
Piemēram, lai pārslēgtos no Helvetica Neue Webfont
LTR uz Helvetica Neue Arabic
RTL, jūsu Sass kods izskatās šādi:
$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 un RTL vienlaikus
Nepieciešams gan LTR, gan RTL vienā lapā? Pateicoties RTLCSS String Maps , tas ir diezgan vienkārši. Aptiniet savu @import
s ar klasi un iestatiet pielāgotu pārdēvēšanas kārtulu 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*/
Pēc Sass, pēc tam RTLCSS palaišanas katram atlasītājam jūsu CSS failos tiks pievienots .ltr
, un .rtl
RTL failiem. Tagad jūs varat izmantot abus failus vienā lapā un vienkārši izmantot .ltr
vai .rtl
uz komponentu iesaiņojumiem, lai izmantotu vienu vai otru virzienu.
Malu gadījumi un zināmie ierobežojumi
Lai gan šī pieeja ir saprotama, lūdzu, pievērsiet uzmanību šādiem aspektiem:
- Pārslēdzot
.ltr
un.rtl
, noteikti pievienojietdir
unlang
attiecīgi atribūtus. - Abu failu ielāde var būt reāls veiktspējas vājais kakls: apsveriet optimizāciju un, iespējams, mēģiniet ielādēt kādu no šiem failiem asinhroni .
- Šādā veidā ligzdošanas stili neļaus mūsu
form-validation-state()
miksam darboties, kā paredzēts, tāpēc jums tas būs nedaudz jāpielāgo pašam. Skatiet #31223 .
Maizes drupatas lieta
Hierarhiskās navigācijas atdalītājs ir vienīgais gadījums, kad ir nepieciešams savs pilnīgi jauns mainīgais, proti $breadcrumb-divider-flipped
, pēc noklusējuma ir $breadcrumb-divider
.