Bootstrap
Bootstrap 5 Sınıf- Class İsmi Değişiklikleri
Bildiğimiz gibi 2021 başı ile artık bootstrap 4 yerini bootstrap 5 e bıraktı. Tabiki hala bootstrap 4 kullanabilirsiniz. Ancak yavaş yavaş bootstrap 5 e geçmeye başlamanızı tavsiye ederim. Bootstrap öğrenceklerin ise kesinlikle bootstrap 5 ile devam etmeleri gerekiyor. Peki biz bootstrap 4 ü boşuna mı öğrendik tabiki hayır bootstrap 3-4 arasındkai fark kadar bir fark yok temel farkları da bootstrap resmi sitesinden aldım ve sizler için listeledim. Aşağıdan değişen sınıfları inceleyebilirsiniz. .dropleft ve .dropright artık .dropstart ve .dropend. .dropdown-menu-*-left ve .dropdown-menu-*-right artık .dropdown-menu-*-start ve .dropdown-menu-*-end. .bs-popover-left ve .bs-popover-right artık .bs-popover-start ve .bs-popover-end. .bs-tooltip-left ve .bs-tooltip-right artık ....
Bootstrap Mobil Uyumlu Responsive Tablo Oluşturma
Tablolar responsive özellikler açısından en sıkıntılı elementlerden biridir çünkü tabloları dikey göstermek çok mümkün değildir. Bölmeninde mümkün olmadığını düşünürsek kaydırma yapmak en mantıklı yöntem olacaktır. Ancak tabloyu kaydırmalı yaparken layoutu ekranın dışına taşırmamız gerekmektedir. bunun için tablonun bulunduğu elemente table-responsive özelliği vermek bize yardımcı olacaktır. Tabiki bu class sadece bootstrap üzerinde çalışır. <div class="table-responsive"> <table> <tr> <th> Sutün</th> <th> Sutün</th> <th> Sutün</th> <th> Sutün</th> <th> Sutün</th> </tr> <table> </div>
Bootstrap Gerekli Mi ?
Bootstrap bir framework yapısıdır. CSS için twitter tarafından hazırlanmıştır. Bu önemsiz detayları geçip sorumuza cevap bulmaya çalışalım. Bootstrap web tasarımı yaparken html içerisinde kullanılan class yapılarıdır. CSS ile bunları hazırlamaya gerek yoktur. Kurumsal sitelerin dev firmaların bir çoğu bootstrap yapı kullanmaz. Çok kaliteli tasarımların bazı bootstrap kullanır ancak küçük bir kısmını oluşturur. Yani bu insanlar CSS kodları da yazmışlardır. Bootstrap mobil uyumlu sayfa tasarımında çok büyük kolaylıklar sağlar. Kusursuz bir responsive altyapısı vardır. Bootstrap kesinlikle zorunlu değildir. Ancak özellikle back-end çalışmak isteyenler için bulunmaz bir nimettir.
Bootstrap Üst-Alt-Sağ-Sol Yatay ve Dikey Padding
Bootstrap kütüphanesinde class kullanarak padding değerleri vermemiz mümkün padding dediğimiz yapı iç boşlukları temsil eder. Basit bir örnekle açıklamak istersek sizin odanızın bir div olduğunu düşünün odadaki yatak dolap gibi eşyalarınızın oda duvarına 20cm den fazla yaklaşmasını istemezseniz padding 20cm demelisiniz. Bootstrap yapılarda ise bunu üst alt sağ sol olarak verebildiğimiz gibi üst-alt ve sağ-sol olarak da yapabiliyoruz. Burada 0 ile 5 arasında birimler kullanıyoruz. p-0 , p-1, p-2 , p-3 , p-4 , p-5 Her yerden 0’dan 5’e kadar padding pt-0 , pt-1 , pt-2 , pt-3 , pt-4 , pt-5 Üstten 0’dan 5’e kadar padding pb-0 , pb-1 ,pb-2 ,pb-3 ,pb-4 ,pb-5 Alttan 0’dan 5’e kadar padding pr-0 , pr-1, pr-2 , pr-3 , pr-4 , pr-5 Sağdan 0’dan 5’e kadar...
Türkiye 81 il Şehirler Listesi Python , PHP , HTML , JS
Python öğrenirken ve kulanırken sık sık ihtiyaç duyduğumuz Türkiye şehirleri listesi python list formatında hazırlandı. Bu yapıyı direkt python kodarını yazdığınız editöre ekleyebilirsiniz. Şehirlerin listesi plaka numaralarına göre hazırlanmıştır. Python 81 il Plaka’ya Göre Sıralama Listesi sehirler=["Adana", "Adıyaman", "Afyon", "Ağrı", "Amasya", "Ankara", "Antalya", "Artvin", "Aydın", "Balıkesir", "Bilecik", "Bingöl", "Bitlis", "Bolu", "Burdur", "Bursa", "Çanakkale", "Çankırı", "Çorum", "Denizli", "Diyarbakır", "Edirne", "Elazığ", "Erzincan", "Erzurum", "Eskişehir", "Gaziantep", "Giresun", "Gümüşhane", "Hakkari", "Hatay", "Isparta", "İçel (Mersin)", "İstanbul", "İzmir", "Kars", "Kastamonu", "Kayseri", "Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya", "Malatya", "Manisa", "K...
30 DK’da Bootstrap Eğitimi
Bu eğitim oldukça hızlı ve html css altyapısı olanlar için hazırlanmıştır. Bootstrap 4 Eğitimi
Bootstrap Yazı Rengi Değiştirme
Bootstrap ile herhangi bir css koduna veya style yapısına ihtiyaç duymadan yazı rengini değiştirebiliriz. Bu bizim için oldukça avantaj sağlamaktadır. Burada dikkat etmemiz gereken husus ise belirleyebilecğeimiz yazı renkleri sadece bootstrap özel class yapıları için hazırlanmış yazı renkleridir. Onlarıda şöyle görebiliriz. <span class="text-warning"> Sarı Renkte Uyarı Amaçlı Yazı <span> Sarı Renkte Uyarı Amaçlı Yazı <span class="text-danger"> Kırmızı Renkte Hatalar ve Dikkat Çekmek İçin Kullanılan Yazı <span> Kırmızı Renkte Hatalar ve Dikkat Çekmek İçin Kullanılan Yazı <span class="text-success"> Yeşil Renkte Başarılı işlemleri için Kullanılan Yazı <span> Yeşil Renkte Başarılı işlemleri için Kullanılan Yazı <span class="text-prim...
Bootstrap Buton Ekleme
Bootstrap butonları oldukça işlevsel ve şık butonlardır ayrıca ok kolay stillendirmemiz bootstrap class yapıları ile oldukça pratiktir. Bootstrap butonları bizi satırlarca css kodu yazmaktan kurtarır. <button class="btn btn-danger"> Buton </button>
Bootstrap Arkaplan Rengi Değiştirme
Bootstrap renkleri bootstrap şablonu için hazırlanmış class yapıları içeriside kullanılmaktadır. Bootstrap renkleri hakkında daha detaylı bilgiyi bootstrap renkleri yazımı okuyarak elde edebilirsiniz. Bootstrap içerisinde arkaplan oluşturmak oldukça kolaydır. Öncelikle bootstrap arkaplan yapısının class içerisine yazıldığını bilmeliyiz. Arkaplan için kullanılan yapı ise bg-*renkismi* Bootstrap Arkaplan Örnekler: bg-dark bg-danger bg-light bg-success bg-info bg-warning bg-primary bg-secondary Bootstrap Arkaplan Renkleri HTML Kod İçerisinde Kullanımı <div class="bg-dark"> <p> Hasan Çağrı Güngör </p> </div>
Bootstrap Açılır Collapse Butonu
Sayfa tasarımımızda zaman zaman belli içerikleri gizlemek sadece istendiği zaman görünebilir yapmamız sayfa içerisindeki kullanıcı deneyimini arttırmak açısından oldukça avantajlıdır. Bu amaçla kullandığımız en önemli yapılardan birisi bootstrap collapse butonlardır. Collapse butonlar için kullanabilceğiniz etiketler aşağıdadır.<p> <a class="btn btn-outline-secondary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Tıklanacak Buton </a> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Burada buton tıklandıktan sonra çıkacak yazı bulunmalıdır. </div> </div>
WordPress Tema’da Bootstrap Kullanma
WordPress temaları ile oldukça geniş çaplı projeler sunmayı sağlıyor. Ancak her zaman bir eksik olabilir bu eksikler ile bir kaç kısa kod ile halledilebilir. Bootstrap kullananlar ve bir kaç parça kodu veya komple bir sayfayı wordpress içerisinde kullanmak isteyenler için bu yazıyı hazırladım. Bildiğiniz gibi Bootstrap bir framework’tür ve CSS kütüphanelerinde yaptığımız import olayını burada da kurgulamız gerekiyor. Yani bootstrap kodlarını yazmadan önce bootstrap i web sayfamıza entegre etmeliyiz. Bu olay temadan temaya farklılık göstermektedir. Genellikle Görünüm > Özelleştir > EK CSS kısmında bunu çözebilirsiniz.Dışarıdan css kodları çekebilceğiniz alanı kendi temanızda bulmanız gerekmektedir. Burada bulunan alana istediğimiz css kodunu yazabiliriz. Ancak biz bu alanı dış...
Bootstrap Renkler
Bir CSS framework’ü olan bootstrap renk konusunda oldukça kaliteli bir iş çıkarmıştır. Bootsrap temel renkleri web tasarımcılara kod yazarken büyük kolaylıklar sağlarken ux/ui çerçevesinde hazırlandığı için kullanıcı deneyimini de fazlasıyla gözetmektedir. Bootstrap renkleri belirli olay ve durumlar göz önüne alınarak hazırlanmıştır. Bootstrap Yazı Renkleri Aşağıdaki tabloda bootstrap renk class isimlerini yazılarda kullanıcılar class ları ve html de bu kodların karşılıklarını görebilirsiniz. primary text-primary #007bff info text-info #17a2b8 danger text-danger #dc3545 warning text-warning #ffc107 success text-success #28a745 secondary text-secondary #6c757d dark text-dark #343a40 muted muted #6c757d light text-light #f8f9fa white text-white #ffffff Bootstrap Arkaplan Renkl...
