Bootstrap Sık Kullanılan CSS Class ve Anlamları

Bootstrap Classları ve Anlamları:

justify-content-center içeriği ortalamak için
no-gutters : sütunlar arası boşluk olmaması için
mb-5 : margin-bottom:5px anlamına gelir alttan 5px boşluk bırakır.
mb-lg-0 : büyük ekranlarda margin bottom 0 yapar.
col-md-6 : 6 sütunluk alan oluşturmak
img-fluid : görseli responsive yapmak için mutlaka img etiketleri içinde kullanılmalıdır.
h-100 : içerik yükseklik olarak tamamını kapsaması için
my-auto : y ekseninde margin’i otomatik olarak ayarlasın. (ortalamak)
mx-auto : x ekseni üzerinde ortalamak
rounded-circle : görseli yuvarlak yapmak
text-muted : yazıyı biraz gri yapmak
social-buttons : sosyal medyaları tanımlarken
list-inline-item : li etiketine tanımlanır, elemanları yanyana dizer.

— Harici CSS Özellikleri:

border-radius:100% : kenarlık çizgisinizi yuvarlak yapmak

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

Şık Tasarımlar için CSS ile Parallax Efekt Vermek

Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂

HTML Kodları:

    <section id="statement" class="section-box">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4>
                </div>
            </div>
            </div>
    </section>

Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)

#statement {
	background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)),
    url("../img/ornekbg.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

Örnek Görünüm:

CSS Hover İşlemine Slow Efekti Vermek

Bootstrap ile yapılan yada diğer projelerde mutlaka bir linke yada dive hover uygularız. Hover işleminin tasarımda şık durması için slow efekti ile yani yavaşça gerçekleşmesi gerekir.
Bunun için hover tanımladığımız nesnenin direk kendisine css transition uygulamamız gerekir

Örnek CSS Transition kullanımı;

div:hover {
  width: 300px;
/*Yazılacak standar diğer kodlar*/
}
div {
 transition: all .5s ease-in-out;
}

Diğer transition efektleri:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Resimleri Responsive Yapmak (BOOTSRAP)

Webtasarım yapıyorsanız ve HTML CSS kodu yazıyorsanız Ekran çözünürlüğü değiştiğinde resimlerin ekrana göre tekrar boyutlanması sizin için önemli bir detaydır. Görsellerin otomatik boyutlanması için ekstradan css kodu yazmanıza gerek yok bootsrap kütüphanesini projenize dahil ettiyseniz kullanmanız gereken class img-fluid

örnek kod:

<img src="..." class="img-fluid" alt="Responsive image">