ile

Sayfamızı Twitter Bootstrap ile mükemmelleştirelim

Twitter Bootstrap kütüphanesini kullanmaya başlamadan önce bu kütüphanenin çalışma mantığıyla ilgili bilmemiz gereken birkaç şey var. Bu kütüphane, etiketlerin class özelliklerine eklediğimiz görevleri görüyor ve bunların görünümünü bu görevlere göre otomatik olarak değştiriyor. Biraz daha açalım.

<div class="container"></div>

Kütüphanemizin mantığı 960 piksel üzerine kurulu demiştik. Bootstrap bu 960 pikseli 12’ye bölerek çalışıyor. Öncelikle bu sistemi kullanabilmemiz için kök eleman belirlemeliyiz ki, hem sayfayı ortalayalım, hem boyu 960 olsun, hem de istediğimiz gibi bölebilelim. İşte bunun için yukarıdaki container sınıfına sahip olan div elemanını kullanacağız. Kök elemanını oluşturduktan sonra, her 12’ye böldüğümüz ve kutularla doldurduğumuz sıra için bir de satır elemanı oluşturmamız gerekiyor.

<div class="container">
    <div class="row"></div>
</div>

Bu satır elemanlarını da artık istediğimiz gibi kutularla doldurabiliriz.

<div class="container">
    <div class="row">
        <div class="span4">4</div>
        <div class="span4">4</div>
        <div class="span4">4</div>
    </div>
    <div class="row">
        <div class="span6">6</div>
        <div class="span6">6</div>
    </div>
</div>

Burada ilk satırı 4 birim genişliğinde iki kutuyla, ikinci satırı ise 6 birim genişliğinde iki kutuyla doldurduk.

Bu örneğimizi daha güzel göstermek için de şöyle bir biçim kullanalım:


<style type="text/css">
.row > div
{
    background-color: #eee;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 40px;
    line-height: 40px;
    margin-top:10px;
    margin-bottom: 10px;
}
</style>

Biçim dosyamızı açıklamak gerekirse;

  • background-color ile arkaplan rengini #eee değerine getirdik.
  • text-align ile kutu içindeki yazıları ortaladık
  • -webkit-border-radius, -moz-border-radius ve border-radius özelliği ile kutumuzun kenarlarını 3px çapında yuvarladık. Bu özelliğin tüm tarayıcılarda çalışması için, 3 şeklinin de kullanılması gerekiyor.
  • min-height ile en düşün yüksekliği 40 piksele getirdik
  • line-height ile de satır genişliğini 40 piksele ayarladık
  • margin top ve bottom özellikleri ile de öğeler alt ve üstlerinde 10 piksellik boşluk olmasını sağladık ki birbirlerine yapışmasınlar.

Şimdi ortaya çıkan sonucu görelim:

Mantığı anlamaya başladık değil mi? Bu sayede hem okunabilir, hem de derli toplu bir görünümü kolayca elde edebiliyoruz.

Geçici stili ve kutularımızı silelim ve gelelim web sayfamıza. Sayfa id’sine sahip olan kök div’imiz zaten elimizde mevcuttu. Buna class olarak container ekleyelim.

<div id="sayfa" class="container"><!-- Twitter Bootstrap için ekledik-->

Bunun altındaki header etiketimize de row özelliği verelim. İçindeki logo ve şirket ismi kutucuklarına marka diyelim, bağlantı listemizi de bağlantılar adındaki bir kutunun içine alalım. Logo’yu içinde tutan kutumuzun boyu 1 birim, şirket adını içinde tutan kutunun boyu ise 2 birim olsun:


        <div id="marka">
            <div id="logo" class="span1">
                <img src="logo.jpg" alt="Logo" />
            </div>
            <hgroup class="span2">
                <h1>Kızılyıldız</h1>
                <h4>Matbaacılık A.Ş.</h4>
            </hgroup>
        </div>

Daha sonra bağlantı listemizi de baglantilar adında bir kutunun içine yerleştirelim. Bu kutunun da boyu 8 birim olsun. 12 birimin tamamını kullanmadığımıza dikkat ettiniz mi? Eğer taşma olursa, alt satıra düşmeyi engellemek için yaptık bunu. Bağlantı listemizi yatay ve Bootrap görünümüne getirebilmek için ilk kutuya navbar, onun içindeki nav etiketine de navbar-inner, daha içerideki numarasız ul liste etiketine de nav nac class’larını verelim. Bootstrap’te böyle tanımlanmış çünkü.


<div id="baglantilar" class="span8 navbar">
            <nav class="navbar-inner">
                <ul class="nav">
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="urunler.html">Ürünlerimiz</a></li>
                    <li><a href="haberler.html">Duyurular</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                    <li><a href="iletisim.html">İletişim</a></li>
                </ul>
            </nav>
        </div>

Headeri kapatalım ve devam edelim. Karşımıza şöyle bir görüntü gelecek:

O da ne? Herşey tavana yapışmış vaziyette. Hatta birbirlerine değenler var. Peki ne yapacağız. İşte bunun için temel CSS bilgimizi konuşturmamız gerekiyor.

Bootstrap.min.css dosyasını eklediğimiz <link rel=””> etiketini hatırladınız mı? İşte onun altına <link href=”css/custom.css” rel=”stylesheet”> etiketini ekleyelim. Yeni bir dosya yaratacağız. Adını da custom.css koyacağız. Kendi css özelliklerimizi buraya yazacağız ki, twitter bootstrap kütüphanesini bozmayalım ve elimizde de temiz bir css dosyası olsun. Css dizini altında herhangi bir text editör veya ide vasıtasıyla custom.css dosyasını oluşturalım.

İlk isteğimiz yapışanları ayıklamak. Dosyanın içine sırayla aşağıdaki kodları yazalım.


#marka
{
    float:left;
}

#baglantilar
{
    float:right;
    margin:20px;
}

#logo
{
    margin:10px;
}

header
{
    margin-bottom:10px;
}

Burada ne yaptık? Sırayla açıklayalım.

  1. Marka adındaki logo ve şirket ismini içeren kutumuzu sola yasladık.
  2. Baglantılar adındaki kutumuzu ise sağa yasladık. Her tarafından 20 piksel boyunda mesafe bıraktık.
  3. logo adındaki kutumuz için de her yönden 10 piksel mesafe bıraktık ki yapışmasın.
  4. Tüm header etiketimiz için de alt tarafa 10 piksellik boşluk verdik.

Şimdi dosyaya tekrar bakalım. Karşımıza şöyle bir sonuç çıkmalı:

Şimdi elimizde çok daha güzel, okunaklı ve profesyonel bir üst kısım var. Sonraki yazıda kalan bölümleri de düzenleyeceğiz.

Dayanışmayla!
Meraklı Bilişmci

Yorumla

Yorum