Bootstrap Şablonları

Bootstrap Şablonları: Web sitesi yaparken en çok işinize yarayan araçlardan biridir. Web sitenize bootstrap yazılımını kurduktan sonra kullanılmaya hazır class‘lar ve tanımlar vardır. Bu tanımların içerisinde gerek masaüstü, tablet gerekse mobil tasarımlar için uygunluk bulunmaktadır.

Bootstrap Web şablon yazılımı genel olarak Web sitesi yapan kişilerin işini hazır sınıflarla kolaylaştırıp tüm dünya ile aynı boyutları kullanmalarını sağlamaktır. Şablon örneklerini kullanarak projenizi geliştirebilirsiniz.

(Bootstrap Anlatımlı Kurulum)
(Bootstrap Güncel İndirme Linki)

Cihazlara uyumluluk dönemimizin en gerekli olan Web tasarımın yapı taşıdır. Arama Motoru Optimizasyonları (SEO) için ve User Friendly Kolay Kullanıcı Kullanımı için sizin için artı bir değer olacağınız gerçekten söylemeliyim. Böylelikle Bootstrap kullanmanın faydalarından bahsettik şimdi sizlerle hazır bootstrap şablonlarından bahsedeceğim örneklerle beraber bunları desteklemeye çalışacağım.

Bootstrap Header Şablonu

Bootstrap şablonları arasında en çok işe yarayan şablonlar arasında yer alan header şablonu örneğini yapıp aşağıda sizlerle paylaşacağım. Mobil ve tablet uyumu mevcut olacak şekilde hazırlayacağım.

Örnek:

<div class="container site-header">
    <div class="col-xs-12 col-xs-12 col-lg-12 banner">banner fotoğrafı</div>
    <div class="col-xs-12 col-xs-12 col-lg-3 logo">logo</div>
    <div class="col-xs-12 col-xs-12 col-lg-9 menu">menü</div>
</div>

Sizlere site-header, banner, logo, menu gibi hazır class‘lar oluşturdum. İstediğiniz gibi içerisindeki nesnelere stil verebilirsiniz.

Bootstrap Body Şablonu

Body şablonu Web sitenizin en fazla gözüken bölümüdür. Karmaşık bir yapıya sahip olabilir ama sizin bunu mümkün olduğunca kullanıcılara göstermemeniz gerekmektedir. Aksi taktirde Web sitenizde kalma oranınız düşebileceğinden sizler için olumlu yanının olacağını söyleyemem. Aynı şekilde sizlerle mobil, tablet versiyonlarını da yapacağım.

Örnek:

<div class="container site-body">
    <div class="col-xs-12 col-xs-12 col-lg-8 main-container">
        <p>web sitesinin ana alanı</p>
    </div>
    <div class="col-xs-12 col-xs-12 col-lg-4 right-menu">
        site içi sağ menü
    </div>
</div>

Sizler için kolaylık olsun diye site-body, main-container ve right-menu sınıflarını burada tanımladım.

 

Bootstrap Footer Şablonu

Footer şablonu ise web sitenizin en alt bölümünde bulunan tarafa verilen addır. Bu kısımda Web sitenizi tanıtacağınız 4 ana bölüm yapabilirsiniz. İçeriğine gelecek olursak Web sitesinin kısa tanıtım yazısı, logosu, alt başlıksız  menüler, telif hakkı tarihi ve bunun gibi bir çok şey yerleştirilen bir yazılım olduğunu söyleyebilirim. Bir noktadan sonra sizin hayal gücünüzün devreye girmesi gerekmektedir. Aşağıda sizin için 4 sütunluk Footer bootstrap şablonu yapacağım. Mobil ve Table uyumlu olarak.

Örnek :

<div class="container site-footer">
    <div class="col-xs-12 col-xs-12 col-lg-3 footer-one-side">
        <p>Kullanabileceğiniz birinci alan</p>
    </div>
    <div class="col-xs-12 col-xs-12 col-lg-3 footer-two-side">
        <p>Kullanabileceğiniz ikinci alan</p>
    </div>
    <div class="col-xs-12 col-xs-12 col-lg-3 footer-three-side">
        <p>Kullanabileceğiniz üçüncü alan</p>
    </div>
    <div class="col-xs-12 col-xs-12 col-lg-3 footer-four-side">
        <p>Kullanabileceğiniz dördüncü alan</p>
    </div>
</div>

Sizlere Web sayfasını oluştururken kolaylık olması için önceden site-footer, footer-one-side, footer-two-side, footer-three-side ve footer-four-side sınıfları oluşturdum.

Bootstrap Site Şablonu

Yukarıda verdiğiniz örnek kodları bootstrap yazılımını kurduktan sonra sitenize <body> etiketinin içerisine yazarsanız belirli bir şablon oluşturmuş sitenizi yapmaya başlar hale gelirsiniz. Aşağıda sizlere nasıl olması gerektiğini paylaşıyorum ve indirme linkini de sayfa girişinde sizlerle paylaşıyorum.

Bootstrap Şablonları
Etiketlendi: