RTL
በBootstrap ውስጥ ለቀኝ-ወደ-ግራ ጽሑፍ ድጋፍን እንዴት ማንቃት እንደሚቻል በአቀማመጥ፣ ክፍሎች እና መገልገያዎች ላይ ይማሩ።
ይተዋወቁ
በመጀመሪያ የመግቢያ ገጻችንን በማንበብ ከ Bootstrap ጋር ለመተዋወቅ እንመክራለን ። አንዴ ካለፉ በኋላ፣ RTLን እንዴት ማንቃት እንደሚቻል እዚህ ማንበብ ይቀጥሉ።
የ RTL አቀራረባችንን ስለሚያበረታታ ስለ RTLCSS ፕሮጀክት ማንበብ ሊፈልጉ ይችላሉ ።
የሙከራ ባህሪ
የRTL ባህሪው አሁንም የሙከራ ነው እና በተጠቃሚ ግብረመልስ መሰረት ሊዳብር ይችላል። የሆነ ነገር ተመልክተዋል ወይም ለመጠቆም ማሻሻያ አለዎት? ችግር ይክፈቱ ፣ ግንዛቤዎችዎን ቢያገኝልን ደስ ይለናል።
አስፈላጊ HTML
RTL በBootstrap-powered pages ውስጥ ለማንቃት ሁለት ጥብቅ መስፈርቶች አሉ።
- ኤለመንት
dir="rtl"
ላይ አዘጋጅ .<html>
- በንጥሉ ላይ ተገቢውን
lang
ባህሪ፣ እንደlang="ar"
፣ ያክሉ<html>
።
ከዚያ ሆነው የእኛን CSS የ RTL ስሪት ማካተት ያስፈልግዎታል። ለምሳሌ፣ RTL ከነቃው ጋር ለተቀናበረ እና ለተቀነሰው CSS የቅጥ ሉህ ይኸውና፡
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
የጀማሪ አብነት
በዚህ የተሻሻለው የ RTL ማስጀመሪያ አብነት ውስጥ ከላይ የተጠቀሱትን መስፈርቶች ተንጸባርቀዋል።
<!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 ምሳሌዎች
ከብዙ የ RTL ምሳሌዎች ውስጥ በአንዱ ይጀምሩ ።
አቀራረብ
የ RTL ድጋፍን ወደ Bootstrap የመገንባት አካሄዳችን የእኛን CSS እንዴት እንደምንጽፍ እና እንደምንጠቀምበት ከሚወስኑ ሁለት አስፈላጊ ውሳኔዎች ጋር አብሮ ይመጣል።
-
በመጀመሪያ, በ RTLCSS ፕሮጀክት ለመገንባት ወሰንን. ይህ ከLTR ወደ RTL ስንንቀሳቀስ ለውጦችን ለመቆጣጠር እና ለመሻር አንዳንድ ኃይለኛ ባህሪያትን ይሰጠናል። እንዲሁም ከአንድ ኮድ ቤዝ ሁለት የBootstrap ስሪቶችን እንድንገነባ ያስችለናል።
-
ሁለተኛ፣ አመክንዮአዊ ባህሪያት አቀራረብን ለመቀበል ጥቂት የአቅጣጫ ክፍሎችን ሰይመናል። አብዛኞቻችሁ ቀደም ሲል ከሎጂካዊ ንብረቶች ጋር መስተጋብር ፈጥረዋል ለተለዋዋጭ መገልገያዎቻችን - እነሱ የአቅጣጫ ባህሪያትን እንደ
left
እናright
ሞገስ ይተካሉstart
እናend
. ያ የክፍል ስሞችን እና እሴቶችን ያለምንም ክፍያ ለ LTR እና RTL ተገቢ ያደርገዋል።
ለምሳሌ፣ .ml-3
ለ ሳይሆን margin-left
ተጠቀም .ms-3
።
ከRTL ጋር መስራት በምንጫችን Sass ወይም በተጠናቀረ CSS በኩል ከነባሪው LTR ብዙም የተለየ መሆን የለበትም።
ከምንጩ ያብጁ
ወደ ማበጀት ሲመጣ የሚመረጠው መንገድ ተለዋዋጮችን፣ ካርታዎችን እና ድብልቅ ነገሮችን መጠቀም ነው። ይህ አካሄድ ለ RTL ተመሳሳይ ነው የሚሰራው፣ ምንም እንኳን ከተቀናጁ ፋይሎች ድህረ-ተሰራ ቢሆንም፣ RTLCSS እንዴት እንደሚሰራ እናመሰግናለን ።
ብጁ RTL እሴቶች
የ RTLCSS እሴት መመሪያዎችን በመጠቀም ፣ ተለዋዋጭ ውፅዓት ለ RTL የተለየ እሴት ማድረግ ይችላሉ። ለምሳሌ፣ በመላው የኮድ ቤዝ ክብደት ለመቀነስ ፣ አገባብ $font-weight-bold
መጠቀም ትችላለህ ፡-/*rtl: {value}*/
$font-weight-bold: 700 #{/* rtl:600 */} !default;
ለነባሪያችን CSS እና RTL CSS የትኛው ወደሚከተለው ይወጣል፡
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
ተለዋጭ የቅርጸ-ቁምፊ ቁልል
ብጁ ቅርጸ-ቁምፊን እየተጠቀሙ ከሆነ፣ ሁሉም ቅርጸ-ቁምፊዎች የላቲን ያልሆኑትን ፊደላት እንደማይደግፉ ይወቁ። /*rtl:insert: {value}*/
ከፓን-አውሮፓውያን ወደ አረብኛ ቤተሰብ ለመቀየር፣ የቅርጸ-ቁምፊ ቤተሰቦችን ስም ለመቀየር በፎንት ቁልልዎ ውስጥ መጠቀም ሊኖርብዎ ይችላል ።
ለምሳሌ፣ ከ Helvetica Neue Webfont
LTR ወደ Helvetica Neue Arabic
RTL ለመቀየር፣ የእርስዎ Sass ኮድ ይህን ይመስላል።
$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 እና RTL በተመሳሳይ ጊዜ
ሁለቱም LTR እና RTL በተመሳሳይ ገጽ ይፈልጋሉ? ለ RTLCSS ሕብረቁምፊ ካርታዎች ምስጋና ይግባውና ይህ በጣም ቀጥተኛ ነው። የእርስዎን @import
s በክፍል ይሸፍኑ እና ለ 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*/
Sass ን ከዚያ RTLCSS ን ካሄዱ በኋላ በ CSS ፋይሎችዎ ውስጥ ያለው እያንዳንዱ መራጭ በ .ltr
እና .rtl
ለ RTL ፋይሎች ይዘጋጃል። አሁን ሁለቱንም ፋይሎች በአንድ ገጽ ላይ መጠቀም ይችላሉ፣ እና አንዱን ወይም ሌላ አቅጣጫ ለመጠቀም በቀላሉ ይጠቀሙ .ltr
ወይም .rtl
በመሳሪያዎችዎ መጠቅለያዎች ላይ።
የጠርዝ ጉዳዮች እና የታወቁ ገደቦች
ይህ አካሄድ ለመረዳት የሚቻል ቢሆንም፣ እባክዎን ለሚከተሉት ትኩረት ይስጡ።
- በሚቀይሩበት ጊዜ እና በዛው መሰረት ማከልዎን እና
.ltr
ባህሪዎን.rtl
ያረጋግጡ ።dir
lang
- ሁለቱንም ፋይሎች መጫን እውነተኛ የአፈጻጸም ማነቆ ሊሆን ይችላል፡ አንዳንድ ማመቻቸትን አስቡበት እና ምናልባት ከነዚህ ፋይሎች ውስጥ አንዱን በተመሳሰል መልኩ ለመጫን ይሞክሩ ።
- በዚህ መንገድ መክተቻ ቅጦች የእኛ
form-validation-state()
ድብልቅ እንደታሰበው እንዳይሰራ ይከለክላል፣ ስለዚህ በእራስዎ ትንሽ እንዲያስተካክሉት ይፈልጋሉ። #31223 ይመልከቱ ።
የዳቦ ፍርፋሪ መያዣ
የዳቦ ፍርፋሪ መለያ የራሱ የሆነ አዲስ ተለዋዋጭ - ማለትም - $breadcrumb-divider-flipped
ነባሪ የሚያስፈልገው ብቸኛው ጉዳይ $breadcrumb-divider
ነው ።