RTL
Opi ottamaan käyttöön oikealta vasemmalle luettavan tekstin tuki Bootstrapissa asettelussamme, osissamme ja apuohjelmissamme.
Tutustua
Suosittelemme tutustumaan Bootstrapiin ensin lukemalla Aloitusopas -sivumme . Kun olet käynyt sen läpi, jatka lukemista tästä, kuinka voit ottaa RTL:n käyttöön.
Haluat ehkä myös lukea RTLCSS-projektista , koska se vahvistaa lähestymistapaamme RTL:ään.
Kokeellinen ominaisuus
RTL-ominaisuus on vielä kokeellinen ja todennäköisesti kehittyy käyttäjien palautteen mukaan. Huomasitko jotain tai onko sinulla parannusehdotuksia? Avaa ongelma , haluaisimme mielellämme näkemyksiäsi.
Pakollinen HTML
RTL:n sallimiselle Bootstrap-pohjaisilla sivuilla on kaksi tiukkaa vaatimusta.
- Aseta
dir="rtl"
elementtiin<html>
. - Lisää elementtiin sopiva
lang
attribuutti,lang="ar"
kuten<html>
.
Sieltä sinun on sisällytettävä RTL-versio CSS:stämme. Tässä on esimerkiksi tyylitaulukko käännetylle ja pienennetylle CSS:lle, jossa RTL on käytössä:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Aloitusmalli
Yllä olevat vaatimukset näkyvät tässä muokatussa RTL-aloitusmallissa.
<!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-esimerkkejä
Aloita yhdellä useista RTL-esimerkeistämme .
Lähestyä
Lähestymistapamme RTL-tuen rakentamisessa Bootstrapiin sisältää kaksi tärkeää päätöstä, jotka vaikuttavat siihen, miten kirjoitamme ja käytämme CSS:ää:
-
Ensin päätimme rakentaa sen RTLCSS- projektin avulla. Tämä antaa meille tehokkaita ominaisuuksia muutosten ja ohitusten hallintaan siirryttäessä LTR:stä RTL:ään. Sen avulla voimme myös rakentaa kaksi versiota Bootstrapista yhdestä koodikannasta.
-
Toiseksi olemme nimenneet uudelleen kourallisen suuntaluokkia omaksuksemme loogisten ominaisuuksien lähestymistavan. Useimmat teistä ovat jo käyttäneet loogisia ominaisuuksia flex-apuohjelmiemme ansiosta – ne korvaavat suuntaominaisuudet, kuten
left
jaright
puolestastart
jaend
. Tämä tekee luokkien nimet ja arvot sopivia LTR:lle ja RTL:lle ilman lisäkustannuksia.
Käytä .ml-3
esimerkiksi merkin sijaan .margin-left
.ms-3
RTL:n kanssa työskentely Sass-lähdekoodin tai käännetyn CSS:n kautta ei kuitenkaan saisi poiketa paljon oletus-LTR:stämme.
Mukauta lähteestä
Mitä tulee räätälöintiin , suositeltava tapa on hyödyntää muuttujia, karttoja ja sekoituksia. Tämä lähestymistapa toimii samoin RTL:lle, vaikka se olisi jälkikäsitelty käännetyistä tiedostoista RTLCSS :n toiminnan ansiosta .
Mukautetut RTL-arvot
Käyttämällä RTLCSS-arvodirektiivejä voit tehdä muuttujan ulostulosta erilaisen arvon RTL:lle. Voit esimerkiksi vähentää painoa $font-weight-bold
koko koodikannassa käyttämällä /*rtl: {value}*/
syntaksia:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Joka tuottaisi seuraavat oletus-CSS- ja RTL-CSS:mme:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Vaihtoehtoinen fonttipino
Jos käytät mukautettua kirjasinta, ota huomioon, että kaikki kirjasimet eivät tue ei-latinalaisia aakkosia. Jos haluat vaihtaa yleiseurooppalaisesta arabialaiseen perheeseen, sinun on ehkä käytettävä /*rtl:insert: {value}*/
fonttipinossasi kirjasinperheiden nimien muokkaamiseen.
Jos esimerkiksi haluat vaihtaa Helvetica Neue Webfont
LTR:stä Helvetica Neue Arabic
RTL:ään, Sass-koodisi näyttää tältä:
$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 ja RTL samaan aikaan
Tarvitsetko sekä LTR:n että RTL:n samalla sivulla? RTLCSS String Mapsin ansiosta tämä on melko yksinkertaista. Kääri @import
s:si luokalle ja aseta mukautettu uudelleennimeämissääntö RTLCSS:lle:
/* 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*/
Kun Sass ja sitten RTLCSS on suoritettu, jokaisen CSS-tiedostosi valitsimen eteen lisätään .ltr
, ja .rtl
RTL-tiedostoille. Nyt voit käyttää molempia tiedostoja samalla sivulla ja yksinkertaisesti käyttää .ltr
tai .rtl
komponenttien kääreitä käyttääksesi jompaankumpaan suuntaan.
Reunatapaukset ja tunnetut rajoitukset
Vaikka tämä lähestymistapa on ymmärrettävä, kiinnitä huomiota seuraaviin seikkoihin:
- Kun vaihdat
.ltr
ja.rtl
, varmista, että lisäätdir
jalang
määritteet vastaavasti. - Molempien tiedostojen lataaminen voi olla todellinen suorituskyvyn pullonkaula: harkitse optimointia ja yritä ehkä ladata jokin näistä tiedostoista asynkronisesti .
- Sisäkkäiset tyylit tällä tavalla estävät
form-validation-state()
mixiniämme toimimasta tarkoitetulla tavalla, joten sinun on säädettävä sitä hieman itse. Katso #31223 .
Leivänmuru tapaus
Painepolun erotin on ainoa tapaus, joka vaatii oman upouuden muuttujan, nimittäin $breadcrumb-divider-flipped
oletuksena $breadcrumb-divider
.