Ana içeriğe geç

v5

v5.0.0​

CSS değişkenleri​

  • Medya sorgularımızda kullanılmadıkları için CSS değişkenleri için kesme noktalarını geri getirir, ancak bunlar JS özel bağlamlarında yararlı olabilir.

  • Renk modları güncellemesi çerçevesinde, yeni Sass CSS değişkenleri secondary ve tertiary metin ve arka plan renkleri için yeni yardımcı araçlar ekledik; ayrıca {color}-bg-subtle, {color}-border-subtle ve {color}-text-emphasis tema renkleri için eklenmiştir. Bu yeni renkler, özelleştirmeyi kolaylaştırmak amacıyla, ışık ve karanlık gibi birden fazla renk modunda kullanılmak üzere Sass ve CSS değişkenleri aracılığıyla mevcuttur (ancak renk haritalarımızla değil).

ipucu

Uyarılar, .btn-close ve .offcanvas için ek değişkenler eklenmiştir.

  • --cui-heading-color değişkeni güncellenmiş ve karanlık mod desteği ile geri dönmüştür. İlk olarak, CSS değişkenini çıkarmadan önce ilişkili Sass değişkeni için null değerini kontrol ediyoruz; bu nedenle varsayılan olarak, derlenmiş CSS'imizde mevcut değildir. İkinci olarak, orijinal davranışın devam etmesini sağlamak için inherit değerine sahip bir yedek değerle birlikte CSS değişkenini kullanıyoruz.

  • Bağlantıların stilini color için CSS değişkenleri kullanacak şekilde dönüştürdük, ancak text-decoration için değil. Renkler artık --cui-link-color-rgb ve --cui-link-opacity olarak ayarlanıyor; böylece saydamlığı kolayca özelleştirebilirsiniz. a:hover psödo-sınıfı artık color özelliğini açıkça ayarlamak yerine --cui-link-color-rgb'yi geçersiz kılmaktadır.

  • --cui-border-width, varsayılan küresel stil üzerinde daha fazla kontrol sağlamak için daha fazla bileşende artık kullanılmaktadır.

  • box-shadow'larımız için yeni kök CSS değişkenleri eklenmiştir; bunlar arasında --cui-box-shadow, --cui-box-shadow-sm, --cui-box-shadow-lg ve --cui-box-shadow-inset bulunmaktadır.

  • Birkaç tekrar eden ve kullanılmayan kök CSS değişkeni kaldırılmıştır.

Renk modları​

Yeni renk modları dokümantasyonu okuyarak daha fazla bilgi edinin.

  • Işık (varsayılan) ve karanlık renk modları için küresel destek. Renk modunu küresel olarak :root elemanında, bir sarıcı sınıfa sahip eleman ve bileşen gruplarında veya bileşenlerin üzerinde data-coreui-theme="light|dark" ile doğrudan ayarlayın. Ayrıca, data-coreui-theme seçicisi veya tercihlerinize bağlı olarak bir medya sorgusu ile bir kural kümesi ortaya çıkarabilen yeni color-mode() mixin'i de dahildir.

Kaldırıldı Renk modları, bileşenler için karanlık varyantları değiştirmektedir; dolayısıyla .btn-close-white, .carousel-dark, .dropdown-menu-dark, ve .navbar-dark artık geçerli değildir.

  • Yeni genişletilmiş renk sistemi. Daha ince, sistem genelinde bir renk paleti oluşturmak için yeni tema renkleri (ancak $theme-colors'ta değil) eklendi. Yeni secondary, tertiary ve vurgu renkleri ile color ve background-color için daha fazla renk sunulmaktadır. Bu yeni renkler Sass değişkenleri, CSS değişkenleri ve yardımcı araçlar olarak mevcuttur.
bilgi

Tema renkleri Sass değişkenleri, CSS değişkenleri ve yardımcı araçlarımızı metin vurgusu, ince arka plan renkleri ve ince kenar renkleri de dahil etmek için genişlettik. Bunlar Sass değişkenleri, CSS değişkenleri ve yardımcı araçlar olarak mevcuttur.

  • Karanlık mod özel geçersiz kılmaları barındırmak üzere yeni bir _variables-dark.scss stil sayfası eklendi. Bu stil sayfası, mevcut _variables.scss dosyasından hemen sonra dahil edilmelidir.

     // Konfigürasyon
     @import "functions";
     @import "variables";
    +@import "variables-dark";
     @import "maps";
     @import "mixins";
     @import "utilities";

  • Karanlık mod renkleri artık Sass'ta tema renklerimizden (örneğin, $primary) türetilmiştir; bu da özelleştirilebilir varsayılan tema renklerinde daha otomatik bir karanlık mod yapılmasına olanak tanır.

  • Karanlık mod metni, ince arka plan ve ince kenarlar için tema renklerini oluşturmak üzere Sass haritaları eklenmiştir.

  • Karanlık mod CSS'ye color-scheme: dark eklendi; böylece işletim sistemi düzeyindeki kontrol tarafları gibi kaydırıcılar değiştirilecektir.

  • Form doğrulama border-color ve metin color durumları artık yeni Sass ve CSS değişkenlerine dayalı olarak karanlık moda yanıt vermektedir.

  • Kısa süre önce eklenen form kontrol arka plan CSS değişkenleri kaldırıldı ve Sass değişkenleri yerine CSS değişkenleri kullanılarak yeniden atandı. Bu, renk modları arasındaki stil vermeyi basitleştirir ve karanlık modda form kontrollerinin düzgün bir şekilde güncellenmediği bir durumu önler.

  • box-shadow'larımız artık karanlık modda her zaman karanlık kalacak ve beyaza dönüşmeyecektir.

tehlike

Renk modunu değiştiren JavaScript ve HTML kodu iyileştirildi. Aktif SVG'yi değiştiren seçici geliştirilmiş olup, işaretleme ARIA nitelikleriyle daha erişilebilir hale getirilmiştir.

  • Doküman kodu sözdizimi renkleri ve daha fazlası, ışık ve karanlık modda iyileştirilmiştir.

Tipografi​

  • Karanlık mod için $headings-color-dark ya da --cui-heading-color için bir renk ayarlamıyoruz. Bileşenler içinde başlıkların yanlış renk görünümüne neden olan sorunları önlemek için, Sass değişkenini null olarak ayarladık ve varsayılan ışık modunda kullandığımız gibi bir null kontrolü ekledik.

Bileşenler​

Uyarı​

  • Uyarı varyantları artık CSS değişkenleri aracılığıyla stil verilmektedir.

  • Kaldırıldı Artık .alert-variant() mixin'i kullanılmamaktadır. Bileşenin varsayılan CSS değişkenlerini her varyant için değiştirmek amacıyla doğrudan bir Sass döngüsü kullanıyoruz.

Kart​

  • Kartlar artık renk ayarlaması yapılarak renk modları boyunca daha iyi görüntülenmektedir.

Kapat düğmesi​

  • Kaldırıldı .btn-close-white sınıfı artık geçerliliğini yitirmiştir ve kapatma butonu veya herhangi bir ebeveyn element üzerinde data-coreui-theme="dark" ile değiştirilmiştir. Bir örnek için dokümanları görün.

Açıkgözler​

  • Kaldırıldı .dropdown-menu-dark sınıfı artık geçerliliğini yitirmiştir ve açılır menü veya herhangi bir ebeveyn element üzerinde data-coreui-theme="dark" ile değiştirilmiştir. Bir örnek için dokümanları görün.

Liste grubu​

  • Liste grubu öğe varyantları artık CSS değişkenleri aracılığıyla stil verilmektedir.

  • Kaldırıldı .list-group-variant() mixin'i artık kullanılmamakta olup, her varyant için bileşenin varsayılan CSS değişkenlerini değiştirmek amacıyla bir Sass döngüsü doğrudan kullanılmaktadır.

  • Kaldırıldı .navbar-dark sınıfı artık geçerliliğini yitirmiştir ve navigasyon çubuğu veya herhangi bir ebeveyn element üzerinde data-coreui-theme="dark" ile değiştirilmiştir. Güncelleme örnekleri için dokümana bakın.

  • Aktif nav linkinin altında daha basit bir alt kenar ile yeni .nav-underline varyantı eklendi. Bir örnek için dokümanları görün.

  • Navigasyonlar artık yeni :focus-visible stilleri ile birlikte gelir; bu stiller, özel buton odak stillerimizle daha iyi uyum sağlar.

İlerleme çubukları​

İlerleme çubukları için işaretleme, v5.0.0'da güncellenmiştir. İçerideki .progress-bar elemanındaki role ve çeşitli aria- niteliklerinin yerleştirilmesi nedeniyle, bazı ekran okuyucular sıfır değerli ilerleme çubuklarını tanımlayamıyordu. Artık role="progressbar" ve ilgili aria-* nitelikleri dışarıdaki .progress elemanında yer almakta; .progress-bar yalnızca çubuğun görsel sunumu ve isteğe bağlı etiket için geçerli kalmıştır.

Herkesin ekran okuyucularıyla daha iyi uyum sağlaması amacıyla yeni işaretlemeyi benimsemenizi öneriyoruz; ancak, eski ilerleme çubuğu yapısının eskisi gibi çalışmaya devam edeceğini unutmayın.

<!-- Eskiden kullanılan işaretleme -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Temel örnek" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Yeni işaretleme -->
<div class="progress" role="progressbar" aria-label="Temel örnek" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Ayrıca daha mantıklı bir şekilde birden fazla ilerleme çubuğunu tek bir yığılmış ilerleme çubuğuna saracak şekilde yeni bir .progress-stacked sınıfı da tanıtıldı.

<!-- Eskiden kullanılan işaretleme -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment bir" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment iki" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment üç" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Yeni işaretleme -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment bir" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment iki" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment üç" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Alt başlık​

Alt başlık bileşeni kaldırıldı.

Yan menü​

  • Kırıcı Yan menü varsayılan olarak açık bir renk düzenine sahiptir; karanlık yapmak için .sidebar-dark kullanın.

Formlar​

  • .form-control, renk modlarını desteklemek için artık CSS değişkenleri ile stillendirilmiştir. Bu, varsayılan ve devre dışı form kontrol arka planları için iki yeni kök CSS değişkeninin eklenmesini de içerir.

  • .form-check ve .form-switch bileşenleri artık background-image ayarlamak için CSS değişkenleri ile üretilmektedir. Buradaki kullanım, diğer bileşenlerden farklı olarak, her bileşenin farklı odak, aktif vb. durumları temel sınıfa ayarlanmamaktadır. Bunun yerine, durumlar bir değişkeni (örneğin, --cui-form-switch-bg) geçersiz kılmaktadır.

  • Yüzen form etiketleri artık `elemanları için desteği düzeltmek üzere birbackground-color`'a sahiptir. Devre dışı durumları desteklemek için ek değişiklikler de yapılmıştır.

  • WebKit tabanlı tarayıcılarda tarih ve saat girişlerinin görüntülenmesi düzeltildi.

Yardımcılar​

  • Bootstraps Icons ile birlikte metin bağlantılarının hızlı bir şekilde yerleştirilmesi ve hizalanması amacıyla yeni bir .icon-link yardımcı aracı eklendi. İkon bağlantıları, yeni bağlantı yardımcılarımızı da desteklemektedir.

  • Varsayılan outline'ı kaldırmak ve özel box-shadow odak halkası ayarlamak için yeni bir odak halkası yardımcı aracı eklendi.

  • Renkli bağlantılar bir kez daha !important ile güncellenerek yeni eklenen bağlantı yardımcılarıyla daha iyi çalışmasını sağladı.

Yardımcılar​

  • Kaldırıldı .text-muted, v6'daki .text-body-secondary ile değiştirilecektir.

    Genişletilmiş tema renkleri ve değişkenlerinin eklenmesiyle birlikte, .text-muted değişkenleri ve yardımcı aracı v5.0.0 ile kaldırılmıştır. Varsayılan değeri, renk modlarını daha iyi desteklemek amacıyla yeni --cui-secondary-color CSS değişkenine yeniden atanmıştır. v6.0.0'da kaldırılacaktır.

  • Yeni .overflow-x, .overflow-y ve birkaç .object-fit-* yardımcı aracı eklendi. Object-fit özelliği, bir veya öğesinin kabına tam uyması için nasıl yeniden boyutlandırılacağını belirtmek için kullanılır, bu da yeniden boyutlandırılabilir bir dolgu/uygulama resmi kullanmanın yanına etkileşimli bir alternatif sunar.

  • Yeni .fw-medium yardımcı aracı eklendi.

  • Yeni .z-* yardımcıları z-index` için eklendi.

  • Kutu gölgesi yardımcıları (ve Sass değişkenleri) karanlık mod için güncellenmiştir. Artık rgba() renk değerlerini üretmek için --cui-body-color-rgb kullanıyorlar; bu sayede belirtilen ön plan rengine dayalı olarak renk modlarına kolayca uyum sağlarlar.

  • Sass ve CSS değişkenleri ${color}-text adını ${color}-text-emphasis olarak değiştirildi; bu, ilgili yardımcılarıyla eşleşmektedir.

  • Yeni bir .link-body-emphasis yardımcı aracı, renkli bağlantılarımızla birlikte eklendi. Bu, renk modu duyarlı vurgulu rengimizi kullanarak bir bağlantı oluşturur.

  • Bağlantı rengi saydamlığı, alt kenar mesafesi, alt kenar rengi ve alt kenar saydamlığı için yeni bağlantı yardımcı araçları eklendi. Yeni bağlantı yardımcılarını keşfedin.

  • CSS değişkenine dayalı border-width yardımcı araçları, özelliklerini doğrudan ayarlamak için geri döndürüldü (v5.2.0'dan önce olduğu gibi). Bu, iç içe geçmiş elemanlar arasında (tablolar dahil) miras alma sorunlarını önlemektedir.

  • Yeni .border-black yardımcı aracı, .text-black ve .bg-black yardımcılarımıza eşit olacaktır.

  • Kaldırıldı .text-muted yardımcı ve $text-muted Sass değişkeni kaldırıldı. Artık .text-body-secondary ve $body-secondary-color ile değiştirilmiştir.

  • Kaldırıldı .text-high-emphasis yardımcı ve $high-emphasis Sass değişkeni kaldırıldı.

  • Kaldırıldı .text-medium-emphasis yardımcı ve $medium-emphasis Sass değişkeni kaldırıldı.

  • Kaldırıldı .text-disabled yardımcı ve $disabled Sass değişkeni kaldırıldı.

  • Kaldırıldı .text-high-emphasis-inverse yardımcı ve $high-emphasis-inverse Sass değişkeni kaldırıldı.

  • Kaldırıldı .text-medium-emphasis-inverse yardımcı ve $medium-emphasis-inverse Sass değişkeni kaldırıldı.

  • Kaldırıldı .text-disabled-inverse yardımcı ve $disabled-inverse Sass değişkeni kaldırıldı.

  • Yeni bir .d-inline-grid gösterim yardımcı aracı eklendi.