Neler Öğreneceğim?
- Resim Çerçeveleri
- Düz Stilli Resim Kodu
- Oval Stilli Resim Kodu
- Ekstra Çerçeveli Resim Kodu
- Responsive Resimler
- Butonların Durumları
- Butonların Aktif Olma Durumu
- Link Etiketi İle Buton Yapımı
- Link Etiketi ile Yapılmış Butonun Aktif Olma Durumu
- Butonların Pasif Olma Durumu
- Link ETiketi İle Pasif Durumun Oluşturulması
- Diğer Buton Etiketleri
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
RESIM ÇERÇEVELERI
Herhangi bir web sitesi yaparken mutlaka resimler kullanıyoruz. Özellikle blog sitesi kodlayanlar "öne çıkarılmış görsel" alanı oluştururlar. Bu yüzden bu alan için resim kutusu yapıp, resim kutularına CSS ile stil verirler. İşte bu noktada Bootstrap'ın oluşturmuş olduğu hazır resim kutularını kullanabilirsiniz.
Kullanım şeklimiz ise standart olarak < img> koduna sınıf ataması yaparak gerçekleşecek. Üç adet sınıfımız yer alıyor, çünkü üç adet kutumuz yer alıyor.
Bootstrap tarafından verilmiş resim taslağı aşağıdaki gibidir. Bu sayede kodların nasıl çıktılar verdiği hakkında ön bilgi sahibi olabilirsiniz.
Şunu belirtmemde fayda var "Internet Explorer 8" yuvarlatılmış köşelere destek vermiyor, bu yüzden sorun yaşayacaksınız, fakat zaten günümüzde "Internet Explorer 8" kullanımı oldukça düşmüş durumda.
Bahsetmiş olduğum gibi üç adet resim taslağı yer alıyor. Bunları düz, yuvarlak ve ekstra çerçeveli olarak sınıflandırabiliriz.
DÜZ STİLLİ RESİM KODU
Bu resim kodunda, resimlerimizi nasıl Bootstrap ile gelen düz stilli çerçeve ile gösterebiliriz, bundan bahsedeceğiz. Bu kod sayesinde resimlerin köşeleri yuvarlatılmış bir çerçeve içinde göreceğiz.
Resim çerçevesi için gerekli olan kodumuz aşağıdaki gibidir :
<img src="http://goo.gl/GFf1w1" class="img-rounded">
Kodumuzu inceleyecek olursak; göründüğü gibi "sac" kısmı sayesinde resmimizin bulunduğu adresi belirttik. Ayrıca sınıf vererek görünümün oluşturulmasını sağladık. Sınıf kısmı olmaz ise standart HTML çıktısı verecektir. Bu yüzden sınıfı eklemeyi unutmayalım.
Eğer resmi boyutlandırmak isterseniz aşağıdaki kodu kullanabilirsiniz :
<img src="http://goo.gl/GFf1w1" width="250px" height="150px" class="img-rounded">
Göründüğü gibi "width" ve "Height" kullanarak boyutlandırma yapılmasını sağladık. "Width" sayesinde genişliği, "Height" sayesinde ise yüksekliği ayarlayabilirsiniz.
Çerçevenin çıktısı aşağıdaki gibi olacaktır:
Kodumuz sayesinde resmin dört köşesi de yuvarlatılmış olarak çıktı verdi. Ayrıca normalde benim kullandığım resim "640x360" olmasına rağmen boyutlandırma kodlarımızı kullanarak "250x150" pixel olmasını sağladık. Bu sayede daha küçük göründü. Bu boyutlandırma kodlarını birçok yerde kullanabilirsiniz.
OVAL STİLLİ RESİM KODU
Bu kodumuz sayesinde resimlerin oval şekilde gözükmesini sağlayacağız.
Oval stilli resim çerçevesi için gerekli olan kodumuz aşağıdaki gibidir :
<img src="https://goo.gl/GFf1w1" width="250px" height="150px" class="img-circle">
Görüldüğü üzere sınıf kullanarak stili elde ettik. Zaten dediğim gibi ufak bir ingilizce bilginiz varsa kodları anlamakta zorluk çekmeyeceksiniz. Kodda yazdığı gibi circle zaten "daire" anlamına geldiği için dairesel bir çıktı elde etmiş olduk.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :
EKSTRA ÇERÇEVELİ RESİM KODU
Bu kodumuz sayesinde resime nasıl beyaz çerçeve ekleyebiliriz bunu öğreneceğiz.
Bu kod açık renkli tasarımlarda fazla belli olmayacaktır. Bu yüzden koyu renkli yerlerde kullanabilirsiniz. Fakat istiyorsanız CSS ile çerçeve renklerini değiştirebilirsiniz.
Çerçeve için gerekli olan kodumuz aşağıdaki gibidir :
<img src="https://goo.gl/GFf1w1" width="250px" height="150px" class="img-thumbnail">
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır:
Görüldüğü gibi ek çerçeve ile çıktı verdi. Ayrıca koyu renkli tasarımlarda daha başarılı görünüm sunacaktır. Ben bu kodu uygularken gri arkaplan rengi kullandım, bu yüzden daha belirgin olarak çıktı elde etmiş olduk.
RESPONSIVE RESIMLER
Responsive standartlarına uygun olarak çalışmalar oluşturuyorsanız, ek olarak bu resim sınıfı kullanmanız gerekiyor. Bu sayede responsive standartlarına uyarak tasarım yapmış olursunuz. Ayrıca uyumluluk sorunlarının da önüne geçmiş olursunuz.
Gerekli olan kodumuz aşağıdaki gibidir :
<img src="https://goo.gl/GFf1w1" width="250px" height="150px" class="img-responsive">
Göründüğü gibi burada "img-responsive" kullanarak "Responsive" standartlarına uygun olmasını sağladık.
Bununla beraber kodlara hem "Responsive" uyumluluğu yapıp, hem de resim stillerini kullanabilirsiniz.
Örnek kullanım aşağıdaki gibidir :
<img src="https://goo.gl/GFf1w1" width="250px" height="150px" class="img-responsive img-circle">
Kodumuzun çıktısı aşağıdaki gibi olacaktır:
BUTONLARIN DURUMLARI
Butonların oluşturmuş olduğu farklı durumlar bulunuyor. Bunlar ne diyecek olursanız şöyle açıklayabiliriz; örneğin butona tıklandığını zaman farklı renge bürünmesi gibi. Bu başlık altında bunları öğreneceğiz.
Butonların oluşturduğu durumlar sayesinde daha başarılı bir kullanıcı deneyimi ortaya çıkacaktır. Özellikle butonun aktif olup olmadığını belirtmek önemli bir husustur. Bu başlık altında bu durumların hepsini öğreneceğiz.
BUTONLARIN AKTIF OLMA DURUMU
Bu kısımda butonlarımızın nasıl aktif olarak gözükeceğini öğreneceğiz. Bu kullanım özellikle "header" menülerinde mutlaka kullanılması gereken bir özelliktir, çünkü bu özellik sayesinde kullanıcı hangi sayfada olduğunu anlayabilecektir. Özellikle "header" menüsünde fazla öğe varsa bu kullanımı yapmanız çok iyi olacaktır.
Buton aktifliği için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="btn btn-warning active">Aktif</button>
Kodumuzda vurgulamış olduğum alanda gözündüğü üzere "active" yazarak aktifliği sağladık.
Aktif butonumuzun çıktısı ise şöyledir:
Resimde görüldüğü gibi, buton daha gölgeli bir hale gelmiştir. Yani kullanıcıya daha farklı, göze çarpan tasarım sunuyor, bununla beraber bu görünümü alması için "hover" olması veya üzerine tıklanması gerekmiyor. Kodumuz sayesinde direkt olarak bu görünümü elde etmiş oluyoruz.
Her kısımda geçerli olan çoklu sınıf kullanımı burada da geçerlidir. Örnek olarak şu kodları kullanabilirsiniz.
<button type="button" class="**btn btn-info btn-sm active**">Aktif</button>
Kodlarımızdan anlaşılacağı üzere burada hem aktif olmasını, hem yeşil renkte olmasını yani işlemin başarılı olduğunun gözükmesini, hem "small" boyutunda olmasını aynı anda sağlamış olduk.
Kodumuzun çıktısı ise şöyledir:
Resimde görüldüğü üzere aktif durumda, iki farklı boyutta buton elde etmiş olduk.
LINK ETİKETİ İLE BUTON YAPIMI
Bu başlık altında link etiketi olan "a" kullanarak nasıl buton oluşturabiliriz ve bu butona nasıl aktif olma durumunu sağlarız bunu öğreneceğiz.
İlk olarak "a" etiketinin buton gibi davranmasını sağlamak için gerekli olan kodumuzu yazalım :
<a href="http://www.google.com/" class="btn btn-danger btn-lg active" role="button">Google</a>
Görüldüğü gibi sınıf kısmında, standart olan kodlarımızı kullandık, bununla beraber en önemli olay "role" kısmına yani Türkçe olarak "rol" kısmına "button" yazarak bir buton gibi davranmasını sağladık. Aslında basitçe gerçek hayatla bağdaştırabiliriz. Öğemizi bir tiyatro oyuncusu gibi düşünelim ve bu oyuncuya farklı bir karakteri oynattık.
Kodumuzun çıktısı ise şöyledir:
Ben yazmış olduğum kodlarda görüldüğü üzere "danger" kullanarak kırmızı renk verdim. Sizde istediğiniz herhangi bir renk verebilirsiniz. Bunun yanında renksiz olması için "btn btn-default" yazabilirsiniz.
LINK ETİKETİ İLE YAPILMIŞ BUTONUN AKTIF OLMA DURUMU
Bu başlık altında diğer başlık altında oluşturmuş olduğumuz "a" etiketli butonumuzun aktif olma durumunu ele alacağız.
Aslında bu kullanımda ek bir değişiklik bulunmuyor. Diğer kısımda gösterdiğim gibi tüm işlemleri sınıf atayarak yapabiliyoruz.
Gerekli olan kodumuz aşağıdaki gibidir :
<a href="http://www.google.com" class="btn btn-default active" role="button">Google</a>
En son sınıf kodumuz kapanmadan "active" etiketini ekledik. Burada ayrıca "default" renk kodunu yazarak varsayılan beyaz renkte çıktı vermesini sağlamış olduk.
Kodumuzun çıktısı ise şöyledir:
Göründüğü gibi standart renkte çıktı verdi, fakat "active" komutu olduğundan belirgin olması için buton daha koyumsu bir renge büründü.
İki kodumuzun yan yana çıktısı ise şöyledir:
Görüldüğü gibi sol tarafta yer alan butonumuz "active" durumunda değildir, sağda yer alan butonumuz ise "active" durumundadır.
BUTONLARIN PASIF OLMA DURUMU
Bir diğer başlıkta butonların aktif olma durumundan bahsetmiştik. Şimdi butonları nasıl pasif duruma getirebiliriz bunu öğreneceğiz.
Butonların hangi durumda olduğu kullanıcı deneyimi açısından önemli bir konudur. Bu durumların kullanımı sayesinde kullanıcı sitede olup bitenleri daha kolay algılar ve siteniz daha kullanılabilir bir site olmuş olur.
Butonları pasif hale getirdiğimizde hem yapısal olarak değişir, hem görsel olarak değişir. Butonu aktif ettiğimiz zaman nasıl koyuluk "%50" oranında artıyorsa, pasif olunca da "%50" oranında renk solmaktadır. Zaten bu fark sayesinde kullanıcı deneyimi oluşturulmuş oluyor.
Butonun pasif durumu için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="btn btn-danger btn-lg" disabled="disabled">Pasif Durum</button>
Kodumuzun çıktısı ise şöyledir:
Görüldüğü gibi karşımıza daha saydam bir buton çıktı. Yani pasif olduğunu bu şekilde anlayabiliriz.
Size daha önceden bu kullanımı yaptığınız zaman hem görsel olarak, hem de yapısal olarak farklılıklar ortaya çıktığını söylemiştim.Yukarıda yer alan resimde görsel olan yapılandırmayı gördük, şimdi ise teknik tarafta olanları göreceğiz. Butonun üzerine gelindiği zaman fare imleci değişmeyecektir, yani normalde üzerine geldiğimiz zaman fare imleci "el" şeklinde oluyordu, şimdi ise "pasif" olduğu için değişmiyor, bununla beraber tıklama yapmamız engelleniyor.
LINK ETİKETİ İLE PASIF DURUMUNUN OLUŞTURULMASI
Daha önce "a" etiketini kullanarak, butonlarımıza nasıl link etiketi oluşturacağımız öğrenmiştik ve bu bağlamda nasıl "aktif" yapacağımızı da öğrendik. Şimdi ise nasıl "pasif" yaparız buna değineceğiz.
Kullanımı diğer kısımda öğrenmiştik, zaten kullanım konusunda farklı olan herhangi bir durum yok. Sadece etiketler değişmiş oluyor.
Kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<a href="http://www.google.com" class="btn btn-primary btn-lg disabled" role="button">Google</a>
Göründüğü gibi "sınıf" kısmı kapatılmadan en son kısma "disabled" ekleyerek devre dışı olduğunu belirtmiş olduk.
Butonumuzun çıktısı ise aşağıdaki gibi olacaktır:
Bootstrap bu kodları tamamen yapılandırıldığı için "navigasyon menüsü" adı verdiğimiz "header" bölgesinde rahatlıkla kullanabilirsiniz.
DIĞER BUTON ETIKETLERI
Bu zamana kadar birçok buton yapılandırması gördük. Şimdi ise bunlardan biraz daha farklı olan etiketlerden bahsedeceğiz.
Etiketlerimizi aşağıdaki gibi sıralayabiliriz:
<input class="btn btn-info" type="button" value="Input Butonu">
Göründüğü gibi burada farklı olan kısım "input" etiketidir. Input etiketine buton görevi vermiş olduk. Yani input etiketinde buton sınıfımız kullanmış olduk. Ben burada bir sınıf kullandım. Sizler istediğiniz gibi, diğer öğrenmiş olduğumuz sınıfları da dahil edebilirsiniz.
<input class="btn btn-info" type="submit" value="Submit Butonu (Input)">
Burada ise, diğer kodda olduğu gibi "input" etiketi kullandık. Ayrıca "type" kısmı sayesinde gönderici olarak çalışmasını sağladık.
<a class="btn btn-info" href="#Google" role="button">Google</a>
Bu kısımda görüldüğü üzere standart olarak "a" etiketine "role" verdik, bu sayede "button" olarak davranmasını sağlamış olduk.
<button class="btn btn-info" type="submit">Varsayılan Submit Butonu</button>
Burada ise normal olan buton etiketine "submit" yani gönderme komutunu ekledik.
Özellikle yaptırmak istediğiniz işlemin tamamlanması için bu kod gerekli bir koddur.
Kodlarımızı çalıştırdığımızda oluşacak olan çıktı aşağıdaki gibidir :
Resimde görüldüğü üzere başarılı bir çıktı aldık. Görsel olarak hepsi aynı gözükse de işlevsel olarak birbirlerinden farklılıklar gösteriyorlar.
Posted on Utopian.io - Rewarding Open Source Contributors