RTL
ನಮ್ಮ ಲೇಔಟ್, ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳಾದ್ಯಂತ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಠ್ಯಕ್ಕೆ ಬೆಂಬಲವನ್ನು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.
ಪರಿಚಯ ಮಾಡಿಕೊಳ್ಳಿ
ನಮ್ಮ ಪ್ರಾರಂಭದ ಪರಿಚಯ ಪುಟದ ಮೂಲಕ ಓದುವ ಮೂಲಕ ಮೊದಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ಪರಿಚಿತರಾಗಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ . ಒಮ್ಮೆ ನೀವು ಅದರ ಮೂಲಕ ಓಡಿದ ನಂತರ, RTL ಅನ್ನು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ಇಲ್ಲಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
ನೀವು RTLCSS ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಓದಲು ಬಯಸಬಹುದು , ಏಕೆಂದರೆ ಇದು RTL ಗೆ ನಮ್ಮ ವಿಧಾನಕ್ಕೆ ಶಕ್ತಿ ನೀಡುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯ
RTL ವೈಶಿಷ್ಟ್ಯವು ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯ ಪ್ರಕಾರ ಬಹುಶಃ ವಿಕಸನಗೊಳ್ಳುತ್ತದೆ. ಏನನ್ನಾದರೂ ಗುರುತಿಸಲಾಗಿದೆಯೇ ಅಥವಾ ಸೂಚಿಸಲು ಸುಧಾರಣೆ ಇದೆಯೇ? ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ , ನಿಮ್ಮ ಒಳನೋಟಗಳನ್ನು ಪಡೆಯಲು ನಾವು ಬಯಸುತ್ತೇವೆ.
ಅಗತ್ಯವಿರುವ HTML
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್-ಚಾಲಿತ ಪುಟಗಳಲ್ಲಿ RTL ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಎರಡು ಕಟ್ಟುನಿಟ್ಟಾದ ಅವಶ್ಯಕತೆಗಳಿವೆ.
- ಅಂಶದ
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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 ಉದಾಹರಣೆಗಳು
ನಮ್ಮ ಹಲವಾರು RTL ಉದಾಹರಣೆಗಳಲ್ಲಿ ಒಂದನ್ನು ಪ್ರಾರಂಭಿಸಿ .
ಅಪ್ರೋಚ್
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಆರ್ಟಿಎಲ್ ಬೆಂಬಲವನ್ನು ನಿರ್ಮಿಸುವ ನಮ್ಮ ವಿಧಾನವು ಎರಡು ಪ್ರಮುಖ ನಿರ್ಧಾರಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ ಅದು ನಾವು ನಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಹೇಗೆ ಬರೆಯುತ್ತೇವೆ ಮತ್ತು ಬಳಸುತ್ತೇವೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ:
-
ಮೊದಲಿಗೆ, ನಾವು ಅದನ್ನು RTLCSS ಯೋಜನೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸಲು ನಿರ್ಧರಿಸಿದ್ದೇವೆ . LTR ನಿಂದ RTL ಗೆ ಚಲಿಸುವಾಗ ಬದಲಾವಣೆಗಳನ್ನು ಮತ್ತು ಅತಿಕ್ರಮಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ನಮಗೆ ಕೆಲವು ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ. ಒಂದು ಕೋಡ್ಬೇಸ್ನಿಂದ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಎರಡು ಆವೃತ್ತಿಗಳನ್ನು ನಿರ್ಮಿಸಲು ಇದು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
-
ಎರಡನೆಯದಾಗಿ, ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳ ವಿಧಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಕೆಲವು ದಿಕ್ಕಿನ ತರಗತಿಗಳನ್ನು ಮರುಹೆಸರಿಸಿದ್ದೇವೆ. ನಿಮ್ಮಲ್ಲಿ ಹೆಚ್ಚಿನವರು ಈಗಾಗಲೇ ನಮ್ಮ ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಧನ್ಯವಾದಗಳು ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದ್ದೀರಿ-ಅವರು ನಿರ್ದೇಶನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತಾರೆ
left
ಮತ್ತುright
ಪರವಾಗಿstart
ಮತ್ತುend
. ಯಾವುದೇ ಓವರ್ಹೆಡ್ ಇಲ್ಲದೆಯೇ LTR ಮತ್ತು RTL ಗೆ ವರ್ಗದ ಹೆಸರುಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಸೂಕ್ತವಾಗಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, ಫಾರ್ ಬದಲಿಗೆ .ml-3
, margin-left
ಬಳಸಿ .ms-3
.
ನಮ್ಮ ಮೂಲ Sass ಅಥವಾ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಮೂಲಕ RTL ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ನಮ್ಮ ಡೀಫಾಲ್ಟ್ 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
ಗಳನ್ನು ವರ್ಗದೊಂದಿಗೆ ಸುತ್ತಿಕೊಳ್ಳಿ ಮತ್ತು 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
.