v2.5.2
Giriş yap

Bootstrap 5 RTL desteği ile özelleştirme yapamıyorum

ugurozgen
630 defa görüntülendi

Bir projemde Bootstrap 5 kullanılıyorum. BS'nin varsayılan özelliklerini değiştirerek temayı özelleştiriyorum. Aynı özelleştirmeyi RTL sürümünde de yapmak istiyorum ama BS kendi sayfasında bize derlenmiş dosya veriyor.

https://getbootstrap.com/docs/5.0/getting-started/rtl/

Burada RTL sürümünün nasıl aktif edileceği yazıyor ama SASS desteği yok ve ben bu özelleştirmeleri yapamayacağım. Benim yapmak istediğim hem RTL sürümünü kullanıp hemde aşağıda paylaştığım dosyadaki özelleştirmeleri yapmak.

Öncelikle Bootstrap'i kendime göre özelleştirdiğim dosyam:

// Bootstrap colors
$primary: #ff6e40;
$secondary: #9932e7;
$success: #05b171;
$info: #25c2e3;
$warning: #faae42;
$danger: #ea4444;
$light: #ededed;
$dark: #293134;

$border-radius: .50rem; // Custom border radius

$dropdown-border-radius: $border-radius;

$font-size-base: 0.875rem;

$display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3.5rem,
    5: 3rem,
    6: 2.5rem,
    7: 2rem,
    8: 1.8rem,
);
$display-font-weight: 400;

$utilities: (
    "opacity": (
        property: opacity,
        values: (
            0: 0,
            25: .25,
            50: .5,
            75: .75,
            100: 1,
        )
    )
);

$enable-smooth-scroll: false;
CSS

Not: BS Rtl ve Ltr dosyaları sayfaya ayrı ayrı dahil edilir. Her iki dosyayı da çağırın demeyin lütfen olmuyor çünkü. Eksik kalıyor. Örnek:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" >
HTML

veya

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css">
HTML

bu iki dosyayı aynı anda sayfaya çağıramam. Daha bozuluyor işler.

Yardımlarınızı bekliyorum.

onlywhatchess
1380 gün önce

CDN ile yapmak yerine dosyaları indirip, indirilen dosyalar üzerinde düzenleme yapmak daha basit olur.
Burada açıklamışlar.
https://getbootstrap.com/docs/5.0/customize/sass/