Bootstrap 4 Nedir
19 Ocak 2018, Cuma 17:15 Yönetici
Bootstrap mobile-first (Önce Mobil) sloganı ile üretilmiş olan bir front-end(ön yüz tasarım) framework'üdür. Böyle söylendiğinde pek anlamlı gelmese de aslında web site tasarımcılarının işini epey kolaylaştırmaktadır.
Bir önceki konuda da bahsettiğim gibi bootstrap'ı bu kadar kısa sürede popüler yapan sebep kullanım kolaylığıdır. İstenilen HTML elemanının class parametresine uygun değeri vermek bizim için yeterli olacaktır.
Bootstrap 4 Grıd Yapısı 2 - Gelişmiş Düzen
21 Ocak 2018, Pazar 12:27 Yönetici
4725 kez görüntülendi.
Grid(ızgara) sisteminde değişken genişliğe sahip sütun oluşturmak da mümkündür. Bunun için
col-md-auto etiketi kullanılır, böylelikle diğer sütunların genişlikleri sabit kalırken auto olan sütunun genişliği veriye göre değişir.
Bootstrap 4 Renkler
21 Ocak 2018, Pazar 20:27 Yönetici
3893 kez görüntülendi.
Bootstrap 4'te yazıları ve arka planları hazır renkler ile biçimlendirebiliriz.
Yazı rengi için => text-*
Arka plan rengi için => bg-*
Varsayılan yazı tipi olarak sırasıyla Helvetica Neue kullanılır.
Bootstrap 4 Tablolar
23 Ocak 2018, Salı 17:02 Yönetici
HTML'de oluşturulan tablolara Bootstrap4 kullanarak çok kısa bir sürede, çok şık görünümler kazandırılabilir, ayrıca tablo çok daha işlevsel hale getirilebilir.
Bootstrap 4 tablo çok daha işlevsel hale getirilebilir.
Bootstrap 4 Resimler
24 Ocak 2018, Çarşamba 15:57 Yönetici
Bootstrap 4'te resimler içinde hazırlanmış stil özellikleri bulunur. Bana göre bu özelliklerden en faydalı olanı .img-fluid'dir. Bu özellik ile resimlerin boyutları içinde bulundukları elemana göre otomatik değişir.
24 Ocak 2018, Çarşamba 17:58 Yönetici
Bootstrap 4'te sayfa başlığı gibi alanlar oluşturmak için .jumbotron class özelliği kullanılır.
Jumbotronların içine h1 başlıkları ve sloganlar yazılarak şık bir görünüm oluşturulabilir.
Sitemizde kullanıcıları uyarmak için görüntülenen veya herhangi bir olan gerçekleştikten sonra kullanıcıya bildirim olarak görünen alanlara uyarı yazıları ya da bilinen adıyla alert adı verilir.
26 Ocak 2018, Cuma 11:43 Yönetici
Bootstrap 4'te butonlar içinde çok şık görünümler bulunmaktadır. Çoğu nesneyi renklendirmek için kullanılan hazır renkler butonlarda da kullanılmaktadır.
Bootstrap 4 Buton Grupları(Button Groups)
27 Ocak 2018, Cumartesi 20:22 Yönetici
Bootstrap4'te butonları bir arada tutmak için button groups adı verilen yapılar kullanılır. Butonları bir grup içerisinde toplamak için butonları kapsayan HTML nesnesine (genelde bu eleman div olur) btn-group class değeri verilir.
Bootstrap 4 Rozetler(Badges)
28 Ocak 2018, Pazar 23:22 Yönetici
Bootstrap4'te yazıların yanında küçük oluşturulan küçük bildirimlere badge adı verilir. Badge Türkçe rozet anlamına gelmektedir ancak genelde bildirim oluşturmak için kullanılır.
Bootstrap4'te ilerleme çubuğu(progress bar) oluşturmak için genellikle içi içe 2 div elemanı kullanılır. Bu elemanlardan dışta bulunan eleman progress class özelliğini alır. İçte bulunan div ise progress-bar class değerini alır.
Bootstrap 4 Sayfalama (Pagınatıon)
01 Şubat 2018, Perşembe 13:21 Yönetici
Sayfalama yapmak için listeleme etiketlerinden (ul ve li) etiketlerinden yararlanılır.
Bootstrap 4 Liste Grupları (Lıst Groups)
04 Şubat 2018, Pazar 00:13 Yönetici
Bootstrap 4'te liste elemanlarını bir grup halinde gösterebilmek için yapılması gereken işlemler
1. kapsayan ul elemanına .list-group,
2. içte li elemanlarına .list-group-item,
Bootstrap 4 Kartlar (Cards)
04 Şubat 2018, Pazar 21:21 Yönetici
Bootstrap4'te kartlar bir bütünlük içinde verileri saklamak için kullanılan, head, body ve footer bölümleri oluşturulabilen yapılardır. Daha önceki sürümlerde bulunan panel, well ve thumbnail yapıları yerine cards kullanılır.
Bootstrap 4 Göster/Gizle (Collapse)
05 Şubat 2018, Pazartesi 22:59 Yönetici
Web sayfaları hazırlanırken bazı bölümlerin gizlenmesi ve sadece istenildiğinde ortaya çıkarılması, tasarımcılar için büyük kolaylıklar sağlamaktadır.
Örneğin bir kişiye ait bilgilerin ilk başta gizlenmesi ve tıklama ile görüntülenmesi işlemidi
Bootstrap 4 Dropdown (Açılır Menü)
06 Şubat 2018, Salı 23:49 Yönetici
3331 kez görüntülendi.
Bootstrap 4 de açılır menülere dropdown adı verilir.
Basit bir açılır menü oluşturmak için aşağıdaki kodları yazmak yeterlidir.
Bootstrap4'te ul ve li elemanlarını kullanarak basit bir menü yapılabilir. Konunu devamında nav iyapım işlemi anlatılacaktır.
Bootstrap 4 Gelişmiş Navs
10 Şubat 2018, Cumartesi 00:34 Yönetici
Bootstrap 4 Advanced navs bölümünde sayfa içi linkleri(çapa) kullanarak aynı sayfa içinde sekmeleri kullanarak faklı içerikleri görüntüleme konusu anlatılacaktır.
Örnek: tab menü, pills menü gibi menüler yapılacaktır.
Bootstrap 4 Formlar
11 Şubat 2018, Pazar 23:11 Yönetici
Bootstrap4'te formların her bir satırı label ve input elemanlarından oluşacak şekilde planlanmıştır. Bir satır oluşturan div'e form-group class değeri verilerek bir satır oluşturulur.
Bootstrap 4 Input Gruplar
13 Şubat 2018, Salı 20:18 Yönetici
Bootstrap4 input grupları birden fazla input elemanını bir arada tutmak ve düzenli bir yapı şeklinde kullanıcıya sunmak için hazırlanmıştır. Burda aynı düzende bulunan birden fazla textbox'dan bahsedilmez.
Nesnenin üzerine gelindiğinde ortaya çıkan ipuçlarına tooltips, nesneye tıklandığında ortaya çıkan ipuçlarına ise popover denir.
Bootstrap 4 Menü Çubuğu (Navbar)
17 Şubat 2018, Cumartesi 09:52 Yönetici
9592 kez görüntülendi.
Bootstrap4 menü çubuğu(navbar) site içindeki sayfalar arasındaki gezinmeyi sağlarlar. Her ne kadar gezinme işlemi dropdown kullanılarak yapılsa da navbar görsel açıdan çok daha uygundur.
17 Mart 2018, Cumartesi 13:21 Yönetici
Bootstrap'ta' bir butona tıklandığında ortaya çıkan bilgilendirme ve uyarı nesnelerine modal adı verilir. Modal'lar ortaya çıktığında sayfa arka planı da kararır ve modal nesnesi daha belirgin bir halde görünür.
Bootstrap 4 Margin ve Padding
14 Temmuz 2018, Cumartesi 14:18 Yönetici
4261 kez görüntülendi.
CSS'de bir elemanın kenarlığı ile dışındaki nesneler arasındaki mesafeye margin(dış boşluk) adı verilir. Aynı şekilde bir nesnenin kenarlığı ile içinde bulunan içerik arasındaki boşluğa ise padding(iç boşluk) denir.