sağdan sola

Mizanpajımız, bileşenlerimiz ve yardımcı programlarımız genelinde Bootstrap'ta sağdan sola metin desteğini nasıl etkinleştireceğinizi öğrenin.

Bu sayfada

aşina olun

İlk olarak Başlarken Giriş sayfamızı okuyarak Bootstrap'ı tanımanızı öneririz . Üzerinden geçtikten sonra, RTL'nin nasıl etkinleştirileceğini öğrenmek için burayı okumaya devam edin.

Ayrıca, RTL'ye yaklaşımımızı güçlendirdiği için RTLCSS projesini de okumak isteyebilirsiniz .

deneysel özellik

RTL özelliği hala deneyseldir ve muhtemelen kullanıcı geri bildirimlerine göre gelişecektir. Bir şey mi gördünüz veya önereceğiniz bir gelişme var mı? Bir konu açın , görüşlerinizi almak isteriz.

Gerekli HTML

Bootstrap destekli sayfalarda RTL'yi etkinleştirmek için iki katı gereksinim vardır.

Öğe dir="rtl"üzerinde ayarlayın .<html>
langÖğeye gibi uygun lang="ar"bir öznitelik ekleyin <html>.

Oradan, CSS'mizin bir RTL sürümünü eklemeniz gerekecek. Örneğin, RTL'nin etkin olduğu derlenmiş ve küçültülmüş CSS'mizin stil sayfası:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" crossorigin="anonymous">

Başlangıç şablonu

Bu değiştirilmiş RTL başlangıç şablonunda yansıtılan yukarıdaki gereksinimleri görebilirsiniz.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL örnekleri

Birkaç RTL örneğimizden biriyle başlayın .

Yaklaşmak

Bootstrap'te RTL desteği oluşturma yaklaşımımız, CSS'mizi nasıl yazdığımızı ve kullandığımızı etkileyen iki önemli kararla birlikte gelir:

İlk olarak RTLCSS projesi ile kurmaya karar verdik . Bu bize, LTR'den RTL'ye geçerken değişiklikleri ve geçersiz kılmaları yönetmek için bazı güçlü özellikler sunar. Ayrıca, bir kod tabanından iki Bootstrap sürümü oluşturmamıza da olanak tanır.
İkinci olarak, mantıksal özellikler yaklaşımını benimsemek için bir avuç yönlü sınıfı yeniden adlandırdık. Çoğunuz, esnek yardımcı programlarımız sayesinde mantıksal özelliklerle zaten etkileşime girdiniz; bunlar, leftve rightlehinde startve gibi yön özelliklerinin yerini alıyor end. Bu, sınıf adlarını ve değerlerini herhangi bir ek yük olmadan LTR ve RTL için uygun hale getirir.

Örneğin, .ml-3for yerine margin-leftkullanın .ms-3.

Kaynak Sass veya derlenmiş CSS aracılığıyla RTL ile çalışmak, varsayılan LTR'mizden çok farklı olmamalıdır.

Kaynaktan özelleştir

Özelleştirme söz konusu olduğunda , tercih edilen yol değişkenlerden, haritalardan ve karışımlardan yararlanmaktır. Bu yaklaşım, RTLCSS'nin nasıl çalıştığı sayesinde derlenmiş dosyalardan sonradan işlenmiş olsa bile RTL için aynı şekilde çalışır .

Özel RTL değerleri

RTLCSS değer yönergelerini kullanarak bir değişken çıktısını RTL için farklı bir değer yapabilirsiniz. Örneğin, $font-weight-boldtüm kod tabanının ağırlığını azaltmak için /*rtl: {value}*/sözdizimini kullanabilirsiniz:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Bu, varsayılan CSS ve RTL CSS'miz için aşağıdakilere çıktı verir:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Alternatif yazı tipi yığını

Özel bir yazı tipi kullanıyorsanız, tüm yazı tiplerinin Latin olmayan alfabeyi desteklemediğini unutmayın. /*rtl:insert: {value}*/Pan-Avrupa'dan Arapça ailesine geçmek için, yazı tipi ailelerinin adlarını değiştirmek için yazı tipi yığınınızda kullanmanız gerekebilir .

Örneğin, Helvetica NeueLTR için yazı tipinden Helvetica Neue ArabicRTL için yazı tipine geçmek için Sass kodunuz şöyle görünebilir:

$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 ve RTL aynı anda

Aynı sayfada hem LTR hem de RTL'ye mi ihtiyacınız var? RTLCSS String Maps sayesinde bu oldukça basittir. s'nizi bir sınıfla sarın @importve RTLCSS için özel bir yeniden adlandırma kuralı ayarlayın:

/* 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'ı ve ardından RTLCSS'yi çalıştırdıktan sonra, CSS dosyalarınızdaki her seçicinin başına .ltrve .rtlRTL dosyaları için eklenir. Artık her iki dosyayı da aynı sayfada kullanabilirsiniz ve bir veya diğer yönü kullanmak için bileşen sarmalayıcılarınızda .ltrveya öğelerini kullanabilirsiniz..rtl

Edge vakaları ve bilinen sınırlamalar

Bu yaklaşım anlaşılabilir olmakla birlikte, lütfen aşağıdakilere dikkat edin:

.ltrve arasında geçiş yaparken , ve özelliklerini buna göre .rtleklediğinizden emin olun .dirlang
Her iki dosyayı da yüklemek gerçek bir performans darboğazı olabilir: biraz optimizasyon düşünün ve belki de bu dosyalardan birini eşzamansız olarak yüklemeyi deneyin .
Bu şekilde yerleştirme stilleri, form-validation-state()miksimizin amaçlandığı gibi çalışmasını engelleyecektir, bu nedenle biraz kendi başınıza ince ayar yapmanızı gerektirir. #31223'e bakın .

Ekmek kırıntısı ayırıcısı , kendi yepyeni değişkenini gerektiren tek durumdur - yani $breadcrumb-divider-flippedvarsayılan olarak $breadcrumb-divider.