Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

Bootstrap 4 Cyan vb Renk paletlerini ve Gradyan renkleri kullanmak.

merhaba arkadaşlar bu bootstrap renklerini nasıl kullanabiliriz ?


https://getbootstrap.com/docs/4.1/getting-started/theming/#all-colors


Linkteki bir çok renk aktif değil sass vb kullanmadan bunların kullanım yöntemi var mı ?


Kendim projelerimde genelde bootstrap.min.css ve bootstrap.min.map i birlikte alıp kullanıyorum aynı şekilde bootstrap.bundle.min.js ve bootstrap.bundle.map


İçerisindeki renklere ulaşamıyorum acaba min.css kullandığımdan mı diyeceğim de zannetmiyorum sonuçta min.css bir slim dosya değil aynı bileşenleri barındırıyor.


Bu diğer renklerle de işlem yapmak istiyorum var mı kullanmasını bilen acaba? Dökümantasyonunu okuyorum fakat nasıl aktif edeceğimi anlamadım halen.


Yardımcı olan herkese teşekkür ederim.

5

Cevaplar (5)

İşlem devam ediyor, lütfen bekleyin..
Burhan Cansız
Doğru Cevap
@Burhan
2 ay önce [Güncellendi]

Hocam extra bişey kullanmana gerek yok değişken olarak tanımla istediğin yerede kullan kendi sitemde kullanıyorum custom css dosyasına göz atarsan ne demek istediğimi anlayacaksın

http://garantililezzetler.com/







********* yeni cevap*************************************


https://getbootstrap.com/docs/4.1/utilities/colors/


yazı rengi değiştiren klas olarak linkeki klaslarvarr özelbir renk istiyorsan yukardaki yöntemi kullanarak kendin oluşturman lazım hocam


ayrıca bootstrapmin.css dosyasında tanımlamalar zaten yapılmış durumda sen sadece yukardaki gibi tanımlama yapıp istediğin yerde kullanacaksın


örn


.ciyanRenkliYazi{color: var(--cyan)}



<p class="ciyanRenkliYazi">Burada cıyan renli yazı var vs </p>






Cevapla @adorratm2 ay önce
Hocam öncelikle şunu belirtmek isterim ki önceki attığınız mesajda terslemişim gibi bir durum oluşuyor fakat amacım böyle bir şey yapmak değildi. Özür dilerim böyle bir durum için.

Fakat demek istediğinizi anladım hatta sitenizde de css dosyanızı inceledim kullanım biçimini de öğrenmiş oldum fakat benim öğrenmek istediğim şuydu ;

Mümkünse ki değil bunu anladım bunca yorumdan ötürü öğrenmek istediğim şey eğer yapılabiliyorsa text-cyan text-teal text-purple gibi class yapısı varsa bootstrap ın kendisine ait bunlar deaktifse bunları nasıl aktifleştirebilirim şeklinde bir soru yönelttim ki verdiğiniz cevaplarla böyle bir class ın olmadığını anladım.

Olsaydı halihazırda o renkleri de diğer varsayılan renklerin yanında kullanmaktı amacım sadece.

Kısacası kendim css de class oluşturup onu kullanmaktansa bu renkleri aktif edeceğim bir class yapısı varsa onu aktif edeyim ve o şekilde kullanayım istemiştim. Teşekkür ederim yine de cevaplarınız için.Tekrar belirtiyorum yanlış anlaşıldıysam özür dilerim.
Cevapla @Burhan2 ay önce
@adorratm, hocam demek istediğini şimdi anladım (Galiba)

https://getbootstrap.com/docs/4.1/utilities/colors/

Şunumu kasdettin
Cevapla @Burhan2 ay önce
https://getbootstrap.com/docs/4.1/utilities/colors/


yazı rengi değiştiren klas olarak bunları var başka istiyorsan yukardaki yöntemi kullanarak kendin oluşturman lazım



bootstrapmin.css dosyasında tanımlamalar zaten yapılmış durumda sen sadece yukardaki gibi tanımlama yapıp istediğin yerde kullanacaksın hocam



.ciyanRenkliYazi{color: var(--cyan)}

<p class="ciyanRenkliYazi">Burada cıyan renli yazı var vs vs</p>
Cevapla @Burhan2 ay önce
görselleri güncelledim yukarı bakınız
İşlem devam ediyor, lütfen bekleyin..
Burhan Cansız
@Burhan
3 ay önce

https://fatihhayrioglu.com/css-degiskenleri-custom-properties/

Cevapla @adorratm3 ay önce
@Burhan, verdiğiniz cevap ile sorduğum sorunun arasında fark var. En ufak bir bağlantısı yok daha doğrusu.

Sorduğum soru ben bootstrap 4 kullanırken atıyorum verdiğim linkte background-teal veya background-purple yazınca herhangi bir etkisini göremiyorum.

Çünkü boostrap tarafında bu class lar ya aktif değil ya da erişilebilir değil.

Var olan danger primary vb renkleri değiştirmekten bahsetmiyorum aynı zamanda.

Sadece varolan renklerin yanında bootstrap içindeki gösterdiğim linkteki renklere erişemiyorum bu ya min.css de kapalı gelmesinden dolayı kaynaklanan bir durum veya renk paletlerini sadece sass veya less üzerinde kullanabiliyoruz galiba bunu çözemedim sadece.
İşlem devam ediyor, lütfen bekleyin..
Ali ÇAKIR
@ikinciadam
3 ay önce

Merhaba, aslında sorunun biraz daha detaya ihtiyacı var. (nerede kullanacaksınız vs gibi)

Bootstrap renkleri css dosyasının içinde kodlanmış şekilde geliyor aslında. Sizin sadece hangi class olduğunu bulup onu ilgili yerde kullanmanız lazım.


Örneğin:

Bir yazının rengini değiştirmekk istiyorsanız "text-danger" gibi bir class var bu yazınızı kırmızı yapacaktır.

veya herhangi bir div/span vs nin bg sini değiştirecekseniz yine ilgili class ı.


gönderdiğiniz linkte sayfa kaynağını (daha doğrusu ilgili renklerin olduğu alanı) incelerseniz hangi class ın neye yaradığını görürsünüz.


burada "swatch-pink" gibi classlar kullanılmış. Arkaplanın rengini değişmek için o class ları kullanmalısınız.


Bunun haricinde sizin kullanmak istediğiniz bir ek renk varsa yine bootstrap.min.css nin en sonuna kendi vereceğiniz class isimleri ile bunları ekleyip projenizde o class ları kullanabilirsiniz.


Örn:


.kendimdenSiyah {

background: #000;

}


bu kodu bootstrap css nin en sonuna ekleyin, sonra projenizde ilgili div/span/vs ye class="kendimdenSiyah" verin. beklediğiniz değişikliği görürsünüz.

Tarayıcı cache lemesini göz önünde bulundurun hemen bir etki göstermeyebilir... ctrl+f5 veya koddaki bootstrap.min.css?v=2 gibi bir düzenleme anlık görüntü almanızı sağlayabilir.


Ayrıca soru başlığında belirtilen ve sonrasında hiç ifade edilmeyen gradyan renkler için (ben geçişli renk olarak algılıyorum bunu) online gradyan css oluşturucular var. Bunlardan bir gradyan oluşturup ilgili classta o kodu kullanırsanız, o classı projenizde çağırdığınızda seçtiğiniz graident rengi alırsınız.. Şurada güzel bir örnek var mesela..





Cevapla @ikinciadam3 ay önce
@ikinciadam, cevabı düzenleyemedim, linki almamış lik şudur: http://www.colorzilla.com/gradient-editor/
İşlem devam ediyor, lütfen bekleyin..
Serdar Güler
@gulers
3 ay önce

Aslında doğru cevabı kısaca @Burhan belirtmeye çalışmış. Css'ini scss olarak yazarsan bu değerleri projene dahil edebilirsin. Onun haricinde bootstrap.min.css dosyası sadece projeye ekliyse @ikinciadam arkadaşımızın dediği gibi "swatch-pink" orada gördüğünüz class'ları yazmanız işe yaramıyor. Hatta soru soranlara yardımcı olurken bu yöntemin işe yarayıp yaramadığını önce kendimiz test edelim. Ben kontrol ettiğimde class'ı verdiğimizde işe yaramıyor. Yani css dosyasını açtığınızda bu class'ı aratın hiçbir sonuç bulamayacaksınız. Aşağıdaki şekilde kendi css dosyanıza bu class'ı oluşturursanız. Css3 ün yeni özelliği ile Fatih Hayrioğlunun da anlattığı gibi root'tan çekip renk adını verdiğimizde istediğimiz özellik sağlanmış oluyor.



.swatch-purple {

background: var(--purple); // Burada purple yerine aşağıdakileri kullanabilirsin

}


--blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40;


İşlem devam ediyor, lütfen bekleyin..
Mehmet Özdemir
@pcmemo
2 ay önce

http://uzmancevap.org/soru/234/bootstrapta-sinirli-renkler

İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın

Yabancı Dizi Arşivi