RTL
“Bootstrap” -da ýerleşişimiz, komponentlerimiz we kömekçi hyzmatlarymyzda sagdan çepe teksti nädip goldap boljakdygyny öwreniň.
Tanyşyň
Ilki bilen “ Başlangyç giriş” sahypamyzy okap, “Bootstrap” bilen tanyşmagy maslahat berýäris . Ony öwreneniňizden soň, RTL-i nädip işletmelidigini şu ýerde okaň.
Şeýle hem , RTLCSS taslamasy barada okamak isläp bilersiňiz , sebäbi bu RTL-e bolan garaýşymyzy güýçlendirýär.
Synag aýratynlygy
RTL aýratynlygy henizem eksperimental we ulanyjylaryň pikirlerine görä öser. Bir zady gördüňizmi ýa-da teklip etjek gowulaşmaňyz barmy? Bir mesele açyň , düşünjeleriňizi almak isleýäris.
Gerekli HTML
“Bootstrap” bilen işleýän sahypalarda RTL-i işletmek üçin iki sany berk talap bar.
- Elementi düzüň
dir="rtl"
.<html>
- Elemente meňzeş
lang
atribut goşuň .lang="ar"
<html>
Şol ýerden CSS-iň RTL wersiýasyny goşmaly bolarsyňyz. Mysal üçin, ine, RTL işledilen düzülen we kiçeldilen CSS-iň stil tablisasy:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
Başlangyç şablon
Üýtgedilen RTL başlangyç şablonynda görkezilen ýokardaky talaplary görüp bilersiňiz.
<!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 mysallary
Birnäçe RTL mysallarymyzyň biri bilen başlaň .
Çemeleşme
“Bootstrap” -a RTL goldawyny gurmak baradaky çemeleşmämiz, CSS-ni ýazmagymyza we ulanmagymyza täsir edýän iki möhüm karar bilen gelýär:
-
Ilki bilen ony RTLCSS taslamasy bilen gurmagy makul bildik . Bu, LTR-den RTL-e geçeniňizde üýtgeşmeleri dolandyrmak we üýtgetmek üçin käbir güýçli aýratynlyklary berýär. Şeýle hem, bir kod bazasyndan Bootstrap-yň iki wersiýasyny gurmaga mümkinçilik berýär.
-
Ikinjiden, logiki häsiýetlere çemeleşmek üçin birnäçe ugurly synpyň adyny üýtgetdik. Siziň köpüňiz, flex kömekçi enjamlarymyzyň kömegi bilen eýýäm logiki häsiýetler bilen aragatnaşyk sakladyňyz - olar ýaly ugurlary we
left
taraplaryright
çalyşýarlar . Bu, synp atlaryny we bahalaryny LTR we RTL üçin laýyk edýär.start
end
Mysal üçin, ýerine .ml-3
derek margin-left
ulanyň .ms-3
.
Çeşme Sass ýa-da düzülen CSS arkaly RTL bilen işlemek, adaty LTR-dan kän bir tapawutlanmaly däldir.
Çeşmeden düzüň
Düzeltmek barada aýdylanda , üýtgeýänlerden, kartalardan we garyndylardan peýdalanmak islenýär. Bu çemeleşme, RTLCSS-iň işleýşi sebäpli, düzülen faýllardan gaýtadan işlenen hem bolsa, RTL üçin birmeňzeş işleýär .
RTörite RTL bahalary
RTLCSS baha görkezmelerini ulanyp , üýtgeýän çykyşy RTL üçin başga bir baha edip bilersiňiz. Mysal üçin, kod bazasynyň hemme ýerinde agramy azaltmak üçin sintaksis $font-weight-bold
ulanyp bilersiňiz :/*rtl: {value}*/
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Adaty CSS we RTL CSS üçin aşakdakylara çykar:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Şriftiň alternatiw görnüşi
Adaty şrift ulanýan bolsaňyz, şriftleriň hemmesiniň latyn däl elipbiýini goldamaýandygyna üns beriň. Pan-Europeanewropadan arap maşgalasyna geçmek üçin /*rtl:insert: {value}*/
şrift maşgalalarynyň atlaryny üýtgetmek üçin şrift bukjasynda ulanmagyňyz zerur bolup biler.
Mysal üçin, Helvetica Neue Webfont
LTR-den Helvetica Neue Arabic
RTL-e geçmek üçin Sass koduňyz şeýle:
$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 we RTL bir wagtda
Bir sahypada LTR we RTL ikisi gerekmi? RTLCSS setir kartalarynyň kömegi bilen bu gaty gönümel. @import
S-laryňyzy synp bilen örtüň we RTLCSS üçin adyny üýtgetmek düzgünini düzüň :
/* 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-dan soň RTLCSS işledilenden soň, CSS faýllaryňyzdaky her bir saýlaýjy, .ltr
RTL .rtl
faýllary üçin öňünden taýýarlanar. Indi iki faýly hem bir sahypada ulanyp bilersiňiz, .ltr
ýa .rtl
-da bir ýa-da beýleki ugry ulanmak üçin diňe komponentleriň örtüklerini ulanyp bilersiňiz.
Gyradaky ýagdaýlar we belli çäklendirmeler
Bu çemeleşme düşnükli bolsa-da, aşakdakylara üns bermegiňizi haýyş edýäris:
- Çalyşanyňyzda
.ltr
we şoňa görä goşýandygyňyza we atributlaryňyza.rtl
göz ýetiriň .dir
lang
- Iki faýly ýüklemek hakyky öndürijilik päsgelçiligi bolup biler: käbir optimizasiýany göz öňünde tutuň we belki şol faýllaryň birini asynkron görnüşde ýüklemäge synanyşyň .
- Bu görnüşde höwürtgeleýiş stilleri,
form-validation-state()
garyndymyzyň niýetlenilişi ýaly işlemeginiň öňüni alar, şeýlelik bilen biraz özüňiz düzeltmegiňizi talap eder. # 31223 serediň .
Çörek gaby
Çörek döwüji bölüji , öz täze üýtgeýjisini talap edýän ýeke-täk ýagdaý .$breadcrumb-divider-flipped
$breadcrumb-divider