Kategori: Bootstrap 4

bootstrap-popover

BOOTSTRAP 4 – POPOVER KULLANIMI

Bootstrap popover  da Bootstrap tooltip'lere benziyor. Bir Html öğesine tıklandığında istediğimiz metinlerin açılır kutuda görüntülenmesidir. Tooltip ile aralarındaki tek fark şudur; Popover'lar ile daha fazla içerik oluşturabiliyoruz. Örneğin metnin başlığı ve metnin içeriğini ayırabiliyoruz.
bootstrap-tooltip

BOOTSTRAP 4 – TOOLTIP (BOOTSTRAP ARAÇ İPUCU)

Bootstrap tooltip kullanarak çok kısa sürede sade ve şık araç ipuçları oluşturabiliriz. Tooltip, bir öğenin üzerine mouse ile gelindiğinde istediğimiz bilgilerin açılır bir kutu ile gösterilmesi diyebiliriz. Css kodları yazarak da istediğimiz araç ipuçlarını oluşturabiliriz ama …
bootstrap-pagination-class-kullanimi

BOOTSTRAP 4 – PAGINATION (SAYFALAMA BUTONLARI)

Öncelikle sayfalama butonlarına neden ihtiyaç duyuyoruz biraz ondan bahsedelim. Örneğin bir blog sitesi ve içerisinde yüzlerce yazı olduğunu düşünelim. Tüm bu yazıları anasayfada listelersek sayfa aşağı doğru baya uzayacaktır. Yada bir ETicaret sitesinde ürünlerin listelendiğini …
bootstrap-dersleri-progress-bar

BOOTSTRAP 4 – PROGRESS BAR (İLERLEME ÇUBUKLARI)

Bu yazımızda Bootstrap progress bar nedir, ne işe yarar, nasıl kullanılır gibi konuları öğreneceğiz. Progress bar yani ilerleme çubuklarını hepimiz görmüşüzdür. Örneğin bilgisayarımızda bir dosyayı kopyalarken, taşırken veya silerken işlemin toplamda ne kadar sürede tamamlanacağı veya …
bootstrap-badge

BOOTSTRAP 4 – BADGE (ROZETLER)

Bootstrap badge ile herhangi bir içeriğe ek bilgiler ekleyebiliriz veya içeriğin daha dikkat çekici olması için arkaplan rengi verebiliriz. Örneğin Facebook üzerinden örnek vereyim. Facebook'ta mesaj veya bildirim geldiğinde bunları gösteren link butonların üzerinde ek …
bootstrap-button-kullanimi

BOOTSTRAP 4 – BUTTONS (BUTONLAR)

Bootstrap button class'larını kullanarak çok kısa sürede sade ve şık butonlar yapabiliriz. Css kodu yazarak da istediğimiz butonları oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim. Bootstrap button class'larını <a>, <input> veya <button> …
bootstrap-alert-kullanimi

BOOTSTRAP 4 – ALERT (UYARI MESAJLARI)

Bootstrap alert class'ları ile istediğimiz amaca uygun uyarı mesajlarını gösterebilir, kullanıcıları bilgilendirebiliriz. Örneğin bir üyelik formu düşünelim. Üye olma işlemlerini gerçekleştirirken birçok durum meydana gelebilir. Eğer herhangi bir hata meydana gelmeden kayıt işlemi başarıyla gerçekleşirse, işlemin …
bootstrap-image-kullanimi

BOOTSTRAP 4 – IMAGES (RESİMLER)

Bootstrap 4 ile resimlerimize stil vermek artık çok kolay. Örneğin bir resmi responsive hale getirebilir, tam yuvarlak veya köşelerden yuvarlatılmış bir şekle dönüştürebiliriz. Hem de hiç Css kodu yazmadan. Yapmamız gereken tek şey, resmin src …
bootstrap-table-kullanimi

BOOTSTRAP 4 – TABLES (TABLOLAR)

Bootstrap 4 ile tablolarımıza stil vermek artık çok kolay. Yapmamız gereken tek şey, öncelikle tablomuzu Html ile yazmak. Daha sonra ise nasıl bir tasarım istiyorsak ona uygun bootstrap table class'larını kullanmak. Bu bootstrap table class'larının neler …
bootstrap-renk-kodlari

BOOTSTRAP 4’DE RENK KODLARI VE CLASS’LAR

Bootstrap kullanmanın birçok faydasını biliyoruz. Bunlardan biride hazır class'ları kullanarak hem arkaplan rengi hem de yazı rengini verebiliyor olmamız. Bu yazımızda arkaplan ve yazı renklerini verebilmek için hangi class'ları kullanmamız gerektiğinden bahsedeceğiz. Birde bu class'ların …