İkonların Kullanımı, Success ve Diğer Renk Kodları

Neler Öğreneceğim?

• IŞLEM DURUMUNA GÖRE RENKLİ INPUT KUTULARI
• SUCCESS KODU
• DİĞER RENK KODLARI
• OPSİYONEL FORM İKONLARI
• İKONLARIN KULLANIMI
• FORM KUTULARINA BOYUTLANDIRMA YAPMA
• SELECTION KUTULARINI BOYUTLANDIRMA
• YAN PANELLİ FORM İÇİN BOYUTLANDIRMA
• SÜTUN EBATLARI
• YARDIM METNİ OLUŞTURMA

Gereksinimler

• Notepad++

Zorluk Düzeyi

• Intermediate (Orta Seviye)

IŞLEM DURUMUNA GÖRE RENKLİ INPUT KUTULARI

Hatırlarsanız sizlere renkli "input" formlara yapacağımızdan bahsetmiştim. Diğer bölümlerde renk kodları verdiğimde bunları ileride diğer bölümlerde kullanacağımızı belirtmiştim.

Bootstrap aslında bu renkleri işlem durumuna göre isimlendirmiş. Fakat siz bunları tasarımınıza uygun olarak kullanabilirsiniz. Fakat özellikle işin "Back-End" tarafı ile ilgili yapılan işlemler ve sonuçlar varsa, bu kodlarla çıktılar vermeniz daha iyi olabilir.

SUCCESS KODU

Bu kod İngilizce tercümesinden anlaşılacağı üzere başarılı olan işlemler için kullanılan bir renk kodudur, aynı zamanda çıktı olarak (işlem başarılı olduğunda) yeşil renk vermektedir.

Önceden "div" etiketi açardık ve sınıf ataması yapardık. Şimdi ise, sınıfımızın bitiminden sonra sınıf etiketinin içinde bir boşluk vererek "has-success" yazarak success durumunu elde edeceğiz.
Gerekli olan kodlarımız aşağıdaki gibidir :

<div class="container" style="padding: 20px;">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Başarılı İşlem</label>
        <input type="text" class="form-control" id="inputSuccess1">
    </div>
</div>

Ben burada çıktı olarak yazı gözükmesi için bir "label" ekledim. Bu zorunlu değildir, isteğe bağlı olarak ekleyebilirsiniz.

Bu kullanımda en temel kural "div" etiketine "form-group" yazdıktan sonra, "has" yazarak tire(-) işaretini ekleyip, renk kodunu yazmaktır.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :

Bu kod ile sadece "focus" durumu değil, kutunun çerçeve kısmı da "yeşil" renk olmuştur.
Focus durumunda ise çıktı aşağıdaki gibi olacaktır :

Focus durumunda tekrar aynı durum geçerlidir, yani; hem "focus" rengi yeşil hem "çerçeve" rengi yeşildir.

DİĞER RENK KODLARI

Alt kısımda vereceğim "div" etiketleriyle kolayca renk değişimlerini sağlayabilirsiniz.
Renkli etiket kodlarımız aşağıdaki gibidir :

<div class="container">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Başarılı İşlem</label>
        <input type="text" class="form-control" id="inputSuccess1">
    </div>

     <div class="form-group has-warning">
        <label class="control-label" for="inputWarning" >Uyarı</label>
        <input type="text" class="form-control" id="inputWarning">
    </div>

    <div class="form-group has-error">
        <label class="control-label" for="inputError" >Hata</label>
        <input type="text" class="form-control" id="inputError">
    </div>
</div>

Görüldüğü üzere "success" rengine ilave olarak iki renk daha bulunuyor. Bunlar "warning" ve "error" renkleridir.

"succes" yeşil, "Warning" sarımsı ve "Error" ise kırmızı renk çıktı vermektedir. Bunların haricinde ek renk kodu yer almıyor.
Hepsinin çıktısı ise aşağıdaki gibi olacaktır :

OPSİYONEL FORM İKONLARI

Bu zamana kadar formlarımızda birçok işlev gördük. Şimdi ise formlara nasıl ikonlar ekleyebiliriz bundan bahsedeceğiz.

Bildiğiniz üzere Bootstrap'ın geniş bir ikon kütüphanesi var. Bu kütüphane sayesinde formlarınıza ikonlar ekleyerek resim dosyası kullanma oranını en aza indirebilirsiniz.

ikonlarımızın yer aldığı bu kütüphaneye "Glyphicons" kütüphanesi deniliyor ve içerisinde "200" adet ikon yer alıyor (Güncellemeler olduğu zaman bu ikon sayısı artabilmektedir).

Bu ikonlara aşağıda yer alan URL'den ulaşabilirsiniz :
http://getbootstrap.com/components/

Zaten karşınıza direkt olarak ikon kütüphanesi çıkacaktır. Buradan tasarımınıza uygun ikonları bulacağınıza eminim. Çünkü gerçekten geniş ve yeni tasarım trendine uygun ikonlar yer alıyor. Ayrıca ikonlar Bootstrap'ın varsayılan tasarımı ile uyumludur. Yani ikonlar tek renk olduğu için birçok tasarım stiline uyabileceğini düşünüyorum. (C55 ile kendiniz diğer tasarımsal özelleştirmeler' yapabilirsiniz.)

İKONLARIN KULLANIMI

Burada yer alan ikonların kullanımı oldukça basittir. Kullanım esnasında etiketlerini kullanacağız.
Örnek kullanım ise aşağıdaki gibidir :

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="inputError4">Olmadı !</label>
            <input type="text" class="form-control" id="inputError4">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
    </form>
</div>

Kodlarımızı inceleyecek olursak ilk olarak 'form-inline" ile "label" öğelerinin sol tarafa gelmesini sağladık, bununla birlikte ben hata bildirmek istediğim için "Error" rengini kullandım, ikonumuz içinse "span" etiketi kullandım. Ayrıca etikete sınıf ataması yaptım.

İlk olarak sınıflar için verdiğim URL'ye girmeniz gerekiyor. Girdiğiniz anda karşınızda aşağıdaki gibi ikonlar belirecektir :

Görüldüğü gibi bu kısımda, her karede yazan yazılar bir sınıftır. Bu yazan metinleri sınıf kısmına yapıştırarak istediğiniz gibi ikonları kullanabilirsiniz.

Kullandığımız kodların çıktısı ise aşağıdaki gibi olacaktır :

Çarpı işareti başarılı bir şekilde kutucuğa yerleşmiştir.

Bir diğer örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group has-success has-feedback">
            <label class="control-label">Wi-Fi Adı</label>
            <input type="text" class="form-control">
            <span class="glyphicon glyphicon-signal form-control-feedback"></span>
        </div>
    </form>
</div>

Bu örnekte ise "signaı." ikonunu kullandım ve gördüğünüz gibi sadece sitede yer alan kodu kopyalayıp "span" etiketinde "cıass" kısmına yapıştırdım.

Kodumuzun çıktısı sağdaki gibidir :

Görüldüğü gibi "Sinyal" ikonu kutucuk içerisinde sağ tarafta yer aldı.

FORM KUTULARINA BOYUTLANDIRMA YAPMA

Şimdiye kadar formlar hakkında herşeyi öğrendiğimizi söyleyebilirim. Birçok "input" etiketini "renk" kodlarını ve "ikon" yapılarını ve hatta "selects" gibi kodları gördük. Artık bu ana başlık altında yaptığımız formlarda yer alan kutuları nasıl boyutlandırabiliriz bundan bahsetmek istiyorum.

Boyutlarımız "large" , "medium" ve "small" olmak üzere üç boyuttan oluşuyor ve "medium" olan zaten tüm örneklerde olan varsayılan boyuttur.

Aslında öğrendiğimiz "div" etiketleri ile boyutlandırma yapabilirsiniz, fakat "div" etiketlerine bağlı kalmadan da yapabilmeniz mümkün.

Boyutlandırma kodlarımız aşağıdaki gibidir :

<div class="container">
    <input class="form-control input-lg" type="text" placeholder="Büyük">
    <input class="form-control" type="text" placeholder="Orta">
    <input class="form-control input-sm" type="text" placeholder="Küçük">
</div>

Kodlarımızı inceleyecek olursak burada "input" etiketini ele aldık. Örnek olarak "input-lg" derken "input" etiketinin "large" yani büyük boy olmasını sağladık.

Dikkatinizi çektiyse ortada yer alan kodda, herhangi bir ek sınıf olmadığını görüyorsunuz. Bu kısımda zaten varsayılan boyutta olduğu için ek kod gerekmiyor.
Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır :

Görüldüğü gibi üç farklı boyutta kutu oluşmuş oldu.

SELECTION KUTULARINI BOYUTLANDIRMA

Selection kodlarını öğrenmiştik ve kısaca veriler arasında seçim yapmayı sağlıyordu.

Selection öğesini boyutlandırmak, "input" etiketleri ile aynı mantıktadır ve aynı sınıf öğeleri kullanılmaktadır.

<div class="container">
    <select class="form-control input-lg"></select>
    <select class="form-control"></select>
    <select class="form-control input-sm"></select>
</div>

Görüldüğü gibi aynı sınıfları kullandık. Burada daha önceden söylediğim gibi "class" etiketinde bir boşluk vererek çoklu sınıf kullanımı yapabilirsiniz. Bu sayede birden fazla görünümü aynı anda kullanabilirsiniz.

Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır :

Resimde görüldüğü gibi üç kademe boyut vardır ve "section" kodu olduğunu sağ tarafta yer alan "ileri-geri" tuşlarından anlayabilirsiniz.

YAN PANELLİ FORM İÇİN BOYUTLANDIRMA

İlk kısımlarda yan panelli form yapısını görmüştük ve bu sayede "label" öğelerini yani yazıları nasıl sol tarafa alabileceğimizi öğrenmiştik.

Yan panelli form için boyutlandırma biraz daha farklı. Aslında zorluğu sadece bu kısımda sınıf kullanmak yerine "label" öğesinde "for" değerini "input" öğesinde ise "id" değerini kullanarak boyutlandırmayı yapacağız. Bunun dışında başka farklılık bulunmamaktadır.
Boyutlandırma için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group form-group-lg">
            <label class="col-sm-3 control-label" for="formGroupInputLarge">Büyük Yazı</label>
            <div class="col-sm-5">
                <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Büyük Kutu">
            </div>
        </div>
        <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label" for="formGroupInputSmall">Küçük Yazı</label>
            <div class="col-sm-5">
                <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Küçük Kutu">
            </div>
        </div>
    </form>
</div>

Görüldüğü gibi boyutlandırma yaparken "for" ve "id" değerleri ile oynama yaptık, bu sayede oluşacak boyutları belirledik.
Kodlarımızın çıktısı ise şöyledir:

Görüldüğü gibi iki farklı boy yer alıyor. Normal şekilde yazacağınız, yani; standart olan kod ise, zaten varsayılan olan orta boyutta çıktı verecektir.

SÜTUN EBATLARI

Bu kısımda oluşturduğumuz kutucukların boyutlarını nasıl küçültüp büyütebiliriz, yani sütun genişliği ile nasıl kolayca oynayabiliriz ondan bahsedeceğim.

Tek yapmamız gereken "div" etiketi oluşturup bu etiket üzerinden vereceğim sınıfları kullanmak olacak.
Bootstrap ile tanımlanmış sınıf kodlarımız :

<div class="col-xs-7">
<div class="col-xs-6">
<div class="col-xs-5">
<div class="col-xs-4">
<div class="col-xs-3">

Kodlarımız aslında bununla sınırlı değildir. Örneğin, burada yer alan 5 değerini 10 yapabilirsiniz, yani; verdiğiniz değere göre kolayca yapılandırma sağlayabilirsiniz.
Örnek bir form üzerinde kullanımı için kodlarımız aşağıdaki gibidir :

<div class="container-fluid">

    <div class="col-xs-7">
        <input type="text" class="form-control">
    </div>

    <div class="col-xs-6">
        <input type="text" class="form-control">
    </div>

    <div class="col-xs-5">
        <input type="text" class="form-control">
    </div>

    <div class="col-xs-4">
        <input type="text" class="form-control">
    </div>

    <div class="col-xs-3">
        <input type="text" class="form-control">
    </div>

</div>

Değerlerin büyüklüğü sayesinde kapladığı genişliği ayarlamış olduk.
Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır :

Görüldüğü gibi bu şekilde form kutularımız sıralanmıştır. Zaten girdiğimiz kodlardan kutuları birbirlerinden ayırt edebiliyoruz.

YARDIM METNİ OLUŞTURMA

Oluşturmuş olduğumuz formlar, bazen çok karışık olabilir, işte bu gibi durumlarda "span" etiketi ile türetilmiş yardım metnini kullanarak kullanıcıya yol gösterebiliriz.

Yardım metni standart "p" etiketine oranla daha farklıdır zaten "span" kodları ile kullanılması onu farklı kılan özelliklerinden biridir. Yardım metni varsayılan olarak siyah renkte değildir, aksine daha açık bir renkte transparan tarzı görünüme sahiptir, yani tasarıma zarar vermeden, hem şık hem açıklama metni için uygun bir stil ile yapılandırıldığını söylemek mümkündür.
Gerekli kodlar aşağıdaki gibidir :

<div class="container-fluid">
    <div class="col-xs-7">
        <input type="password" class="form-control">
        <span class="help-block">Lütfen buraya şifrenizi girin.</span>
    </div>
</div>

Görüldüğü üzere "span" etiketine sınıf atayarak yardım metnimizi oluşturduk.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :

Görüldüğü üzere "Lütfen buraya şifrenizi girin." metin kısmı daha açık bir renk ile çıktı vermiş oldu.

Tercihe bağlı olarak diğer kodlarada göz atabilirsiniz. Örneğin; daha büyük bir yazı ve burada olan gibi açık renk isterseniz "lead" etiketini kullanabilirsiniz, (<p class="/ead" şeklinde) bu sayede çalışmalarınız tasarıma daha uyumlu olacaktır.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---