Neler Öğreneceğim?
- Bootstrap ile Gelen Temek Butonlar
- Teme Buton Kodları
- Standart (Renksiz) Buton Kodu
- Buton Koduyla Yapılmış Link
- Yeşil (Success) Renkli Buton
- Kırmızı (Danger) Renkli Buton
- Mavi (Info) Renkli Buton
- Sarı (Warning) Renkli Buton
- Mavi (Primary) Renkli Buton
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
Butonlar
Butonlar, bir web sayfasındaki içerik erişimine, form gönderme ve silmeye, bazen kod çalıştırmaya ve kullanıma bağlı pek çok yerde kullanılan önlendirici düğmelerdir.
Butonlar sadece sıradan bir buton gibi çalışmıyor, Bootstrap sayesinde beraberinde birçok işlev ile geliyor.
BOOTSTRAP İLE GELEN TEMEL BUTONLAR
Bu başlık altında Bootstrap'ın bize sunduğu, en temel butonların kullanım şeklini öğreneceğiz.
Butonları kullanırken Bootstrap'ın atamış olduğu sınıflardan yararlanacağız.Diğer sayfalarda renk kodlarından bahsetmiştik. Bu kodları şu ana kadar iki bölümde kullandık. Renk kodlarını bu bölümde tekrar kullanacağız.
TEMEL BUTON KODLARI
Bootstrap ile gelen temel butonları bu başlık altında göreceğiz.
STANDART (RENKSİZ) BUTON KODU
Bu buton Bootstrap ile gelen temel (standart) buton kodudur.
Bazı bölümlerde bu butonu kullandık. Bu butonu özellikle "Formlar" bölümünde kullanmıştık. Fakat fazla detaylarına girmemiştik. Şimdi ise daha detaylı olarak göreceğiz.
Gerekli olan kodumuz şöyledir:
<div class="container">
<button class="btn btn-default">Renksiz</button>
</div>
Kodlarımızda görüldüğü üzere standart buton koduna eklenmiş sınıf yer alıyor. Kodumuzda özellikle sınıf kısmı dikkatimizi çekmeli. Çünkü sınıf kısmı sayesinde CSS ile oluşturulmuş stil giydirilmiş görünümü elde ediyoruz.
Kodumuzun çıktısı ise şöyledir :
Bununla beraber butonumuzun "hover" efekti bulunuyor.
Efektin çıktısı ise şöyledir:
Resimde görüldüğü gibi fare ile üzerine gelindiği zaman yani "hover" durumuna geçtiği zaman renk koyulaşmaktadır.
BUTON KODUYLA YAPILMIŞ LINK
Buradaki amaç buton kodu kullanarak, butonun içine link gömebilmektir. Bu kullanımı yaparken, URL adresimiz normalde altı çizgili, sıradan link şeklinde gözüküyor. Fakat tıklama yaptığımız zaman buton gibi davranıyor. Bu olayı en iyi resimler ile anlayabileceğiz.
Gerekli olan kodumuz aşağıdaki gibidir :
<div class="container">
<button type="button" class="btn btn-link">Google</button>
</div>
Kodumuzda en önemli kısım sınıf kısmıdır. Görüldüğü üzere diğer butonda (standart buton) olduğu gibi "btn" yazıp bir boşluk bıraktık. Ardından "btn- link" yazdık.
Kodumuzun çıktısı ise şöyledir:
Resimde göründüğü gibi, ekranda sıradan bir link var.
Bu görsel bizim için önemli, çünkü resimde görüldüğü üzere "Google" linkine tıkladığımız zaman mavi bir çerçeve beliriyor. Işte bu çerçeve linkin buton gibi çalıştığının bir göstergesidir. Zaten kodumuzun temelinde buton etiketi olduğu için, sadece görsel olarak değişiklik olmuş oluyor.
YEŞİL (SUCCESS) RENKLI BUTON
Bu renk kodunu, yeşil renge ihtiyaç duyduğunuz zamanlarda kullanabilirsiniz. isterseniz ekstra bir CSS açıp tüm renkleri değiştirebilirsiniz.
Buton için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="**btn btn-success**">Başarılı!</button>
Kodumuzda görüldüğü üzere sınıfımızı ve renk kodumuzu ekledik. Bu kullanım tarzı tüm butonlarda aynı olacaktır. Sadece "success" yazan renk kodu değişiklik gösterecektir.
Ayrıca butonda gözükmesini istediğiniz yazıyı buton etiketinin arasına yazabilirsiniz.
Kodumuzun çıktısı ise şöyledir:
Yazmış olduğumuz buton kodunun sınıfı "success" olduğu için yeşil renk çıktı vererek işlemin başarılı olduğunu ekrana yansıttı.
Ayrıca butonun üzerine gelince "hover" efektini burada da görebiliyoruz. Yani üzerine gelindiği zaman yeşil renk daha koyu tonlarda bir renge dönüşüyor.
KIRMIZI (DANGER) RENKLI BUTON
Bu buton işlemlerinizin olumsuz olduğunu veya hatalı olduğunu göstermek istediğinizde, aynı zamanda tasarımlarınızda kırmızı renge ihtiyaç duyduğunuz zaman kullanabileceğiniz, kırmızı renkli bir buton kodudur.
Kırmızı renkli buton için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="**btn btn-danger**">Olumsuz!</button>
Sınıf kısmında daha önceden öğrenmiş olduğumuz renk kodu olan "danger" kodunu kullandık.
MAVI (INFO) RENKLI BUTON
Bu buton ise, genelde bildirim ve bilgi vermek amacıyla oluşturulmuş bir butondur. Bununla beraber mavi renge ihtiyaç duyduğunuz zamanlarda kullanabilirsiniz.
Gerekli olan buton kodumuz aşağıdaki gibidir:
<button type="button" class="**btn btn-info**">Bildirim var!</button>
Bu butonda ve diğer butonlarda görüldüğü üzere başlıklarımızda yer alan parantez içindeki etiketi renk kodu olarak kullandık.
SARI (WARNING) RENKLI BUTON
Bu butonumuz ise uyarı vermek aynı zamanda işlemde terslik olduğunu bildirmek amacıyla yapılmış bir butondur. Bununla beraber sarı renge ihtiyaç duyduğunuz zaman kullanabilirsiniz. Sarı renk demişken aslında tam sarı değildir, turuncu ile sarının karışımı bir tona sahiptir.
Kodumuzda görüldüğü üzere sadece renk kodunu ekleyerek butonu oluşturmuş olduk.
Bu buton için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="**btn btn-warning**">Dikkat!</button>
MAVI (PRIMARY) RENKLI BUTON
Bu kodumuz diğer öğrendiğimiz "info" koduna oranla daha koyu bir mavi tonuna sahiptir. Bununla beraber daha genel kullanım alanına sahiptir, yani diğer kodlar gibi herhangi bir özel amaç için yapılmamıştır. istediğiniz her yerde kullanabilirsiniz. Zaten diğer kodlarda amaç dışı kullanıma sahipti. Yani tüm renkleri istediğiniz şekilde kullanabilirsiniz.
Bu buton için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="**btn btn-primary**">Koyu Renkli</button>
Tüm yazdığımız buton kodlarının çıktısı aşağıdaki gibi olacaktır :
TAM BOYUTLU BUTON
Bu buton diğer butonlara oranla daha büyük bir butondur. Ayrıca çıktısı bulunduğu "div" etiketini kaplayacak kadardır. Yani buton, div etiketinin ebatına göre boyutlanmaktadır.
Tam boyutlu buton için gerekli olan kodumuz aşağıdaki gibidir :
<button type="button" class="**btn btn-info btn-lg btn-block**">Tıkla!</button>
Görüldüğü gibi vurguladığım yer olan "btn-block" ile bu işlemi sağladık. Bununla beraber burada üç sınıf birden kullandık. Dediğim gibi boşluk bırakarak dilediğiniz kadar sınıf kullanabilirsiniz. Bu sayede bir butonun birden çok sınıfa bağlı kalarak şekillenmesini sağlayabilirsiniz.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır:
Görüldüğü gibi butonumuz çok geniş alan kaplıyor. Bununla beraber butonun yazısı diğer butonlarda olduğu gibi ortalanmış bir şekilde çıktı veriyor.
BUTONLARI BOYUTLANDIRMA
Şimdiye kadar buton kodlarını öğrendik, fakat bu butonlar size büyük veya küçük gelebilir. işte bu gibi durumlarda Bootstrap'ın butonlar için oluşturmuş olduğu boyutlandırma kodlarını kullanabilirsiniz.
Bu kodları uygularken çoklu sınıf kullanımı yapacağız. Yani herhangi bir sınıf yazdıktan sonra, boyutlandırma sınıfımızı yazıp kolayca boyutlandırma işlemini uygulayacağız. Bu kullanım sayesinde çeşitli renk ve boyutlarda butonlar oluşturabilirsiniz.
Boyutlandırma için kullanacağımız kodlar aşağıdaki gibidir :
btn-xs: Bu kod ekstra küçüklük sağlar. Mantıken baktığımızda "xsnall" ifadesini çıkartabiliriz. Bununla beraber "-xs" yapısını zaten daha öncede kullanmıştık.
btn-sm: Bu kod ise küçük butonlar sağlar. Zaten "-sm" ile "small." olduğu anlaşılabilmektedir.
btn-lg: Bu kod ise büyük butonlar için oluşturulmuştur, zaten "-lg" ile kısaca "Large" denilmek istenmiştir.
btn-default: Bu kod ise varsayılan boyuttaki buton kodudur. Şu ana kadar oluşturmuş olduğumuz butonlarda bu kodu kullanmıştık.
Örnek kullanım ise aşağıdaki gibidir :
<div class="container">
<button type="button" class="btn btn-warning btn-xs">Ekstra Küçük </button>
<button type="button" class="btn btn-danger btn-sm">Küçük </button>
<button type="button" class="btn btn-info btn-default">Varsayılan </button>
<button type="button" class="btn btn-success btn-lg">Büyük </button>
</div>
Kodlarda vurgulamış olduğum alanlarda gözündüğü üzere, boyutlandırma kodlarımızı yazdık. Bununla beraber dediğim gibi "btn" etiketini yazdık, ardından renklenmesi için "btn-danger" yazdık, bir boşluk daha verip, "btn-sm" yazdık, bu sayede butonun kırmızı olmasını ve daha küçük olmasını sağladık.
Vermiş olduğum kod satırlarının çıktısı şöyledir:
Resimde görüldüğü gibi butonların altında kullanmış olduğumuz boyutlandırma kodlarını yazdım. Resimden butonların arasındaki ebat farklarına bakabilirsiniz.
Posted on Utopian.io - Rewarding Open Source Contributors