RTL
Bootstrap дээрх баруунаас зүүн тийш текстийн дэмжлэгийг хэрхэн идэвхжүүлэх талаар манай байршил, бүрэлдэхүүн хэсэг болон хэрэглүүрүүдэд сурна уу.
Танилц
Бид эхлээд манай Эхлэх танилцуулга хуудсаар дамжуулан Bootstrap-тай танилцахыг зөвлөж байна . Үүнийг дуусгасны дараа RTL-г хэрхэн идэвхжүүлэх талаар эндээс үргэлжлүүлэн уншина уу.
Та мөн RTLCSS төслийн талаар уншиж болно , учир нь энэ нь RTL-д хандах бидний хандлагыг идэвхжүүлдэг.
Туршилтын онцлог
RTL функц нь туршилтын шинж чанартай хэвээр байгаа бөгөөд магадгүй хэрэглэгчийн санал хүсэлтийн дагуу хөгжих болно. Ямар нэг зүйл олж харав уу эсвэл санал болгох сайжруулалт байна уу? Асуудал нээ , бид таны ойлголтыг авахыг хүсэж байна.
Шаардлагатай HTML
Bootstrap-ээр ажилладаг хуудсуудад 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-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 жишээнүүдийн аль нэгийг ашиглан эхлээрэй .
Арга барил
Bootstrap-д RTL дэмжлэгийг бий болгох бидний хандлага нь бидний CSS-ээ хэрхэн бичиж, ашиглахад нөлөөлдөг хоёр чухал шийдвэртэй хамт ирдэг:
-
Эхлээд бид үүнийг RTLCSS төслөөр барихаар шийдсэн. Энэ нь LTR-ээс RTL руу шилжих үед өөрчлөлт, хүчингүйд тооцох зарим хүчирхэг функцуудыг бидэнд олгодог. Энэ нь бас нэг кодын сангаас Bootstrap-ийн хоёр хувилбарыг бүтээх боломжийг бидэнд олгодог.
-
Хоёрдугаарт, бид логик шинж чанарын хандлагыг хэрэгжүүлэхийн тулд цөөн хэдэн чиглэлийн ангиудын нэрийг өөрчилсөн. Та нарын ихэнх нь манай уян хатан хэрэгслүүдийн ачаар логик шинж чанаруудтай аль хэдийн харилцаж байсан—тэдгээр нь чиглэлийн шинж
left
чанаруудыгright
орлуулдаг . Энэ нь ангийн нэр, утгыг LTR болон RTL-д ямар нэгэн нэмэлт зардалгүйгээр тохирох болгодог.start
end
Жишээлбэл, .ml-3
for -ийн оронд -г margin-left
ашиглана .ms-3
.
Манай эх сурвалж Sass эсвэл эмхэтгэсэн CSS-ээр дамжуулан RTL-тэй ажиллах нь манай үндсэн LTR-ээс тийм ч их ялгаатай байх ёсгүй.
Эх сурвалжаас тохируулна уу
Өөрчлөлтийн тухайд хувьсагч, газрын зураг, хольцын давуу талыг ашиглах нь илүүд үздэг арга юм. Энэ арга нь RTLCSS хэрхэн ажилладагийн ачаар эмхэтгэсэн файлуудаас боловсруулагдсан байсан ч RTL-д адилхан ажиллана .
Захиалгат 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 String Maps -ийн ачаар энэ нь маш энгийн зүйл юм. Өөрийн @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 тусгаарлагч нь өөрийн гэсэн цоо шинэ хувьсагчийг анхдагчаар тохируулахыг шаарддаг цорын ганц тохиолдол $breadcrumb-divider-flipped
юм $breadcrumb-divider
.