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-+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 жишээнүүдийн аль нэгийг ашиглан эхлээрэй .

Арга барил

Bootstrap-д RTL дэмжлэгийг бий болгох бидний хандлага нь бидний CSS-ээ хэрхэн бичиж, ашиглахад нөлөөлдөг хоёр чухал шийдвэртэй хамт ирдэг:

Эхлээд бид үүнийг RTLCSS төслөөр барихаар шийдсэн. Энэ нь LTR-ээс RTL руу шилжих үед өөрчлөлт, хүчингүйд тооцох зарим хүчирхэг функцуудыг бидэнд олгодог. Энэ нь бас нэг кодын сангаас Bootstrap-ийн хоёр хувилбарыг бүтээх боломжийг бидэнд олгодог.
Хоёрдугаарт, бид логик шинж чанарын хандлагыг хэрэгжүүлэхийн тулд цөөн хэдэн чиглэлийн ангиудын нэрийг өөрчилсөн. Та нарын ихэнх нь манай уян хатан хэрэгслүүдийн ачаар логик шинж чанаруудтай аль хэдийн харилцаж байсан—тэдгээр нь чиглэлийн шинж leftчанаруудыг rightорлуулдаг . Энэ нь ангийн нэр, утгыг LTR болон RTL-д ямар нэгэн нэмэлт зардалгүйгээр тохирох болгодог.startend

Жишээлбэл, .ml-3for -ийн оронд -г 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 WebfontLTR-ээс Helvetica Neue ArabicRTL руу шилжихийн тулд таны 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 -ийн ачаар энэ нь маш энгийн зүйл юм. Өөрийн @imports-ийг ангиар боож, 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 файл дахь сонгогч бүрийг .ltrRTL .rtlфайлуудын хувьд өмнө нь бичих болно. Одоо та хоёр файлыг нэг хуудсан дээр ашиглах боломжтой бөгөөд нэг .ltrюм .rtlуу өөр чиглэлийг ашиглахын тулд бүрэлдэхүүн хэсгүүдийн боодол дээр ашиглах боломжтой боллоо.

Ирмэгийн тохиолдол ба мэдэгдэж буй хязгаарлалт

Энэ арга нь ойлгомжтой хэдий ч дараах зүйлсийг анхаарна уу.

.ltrболон - г солихдоо тохирох шинж чанаруудыг .rtlнэмж оруулахаа мартуузай .dirlang
Хоёр файлыг ачаалах нь гүйцэтгэлд үнэхээр хүндрэл учруулж болзошгүй: зарим оновчлолыг анхаарч үзээрэй, магадгүй эдгээр файлуудын аль нэгийг асинхроноор ачаалж үзээрэй .
Ийм маягаар үүрлэх нь бидний form-validation-state()холигчийг зориулалтын дагуу ажиллахаас сэргийлж, та өөрөө үүнийг бага зэрэг өөрчлөхийг шаарддаг. #31223-ыг үзнэ үү .

Breadcrumb тусгаарлагч нь өөрийн гэсэн цоо шинэ хувьсагчийг анхдагчаар тохируулахыг шаарддаг цорын ганц тохиолдол $breadcrumb-divider-flippedюм $breadcrumb-divider.

RTL