Bootstrap Renkli Tablo, Responsive Tablo, Turkish Tutorial

English Description

Color Table Labels

You can easily change colors by assigning classes to "tr" and "td" codes. So I give the class codes in one form and I will specify the use of the sample below.

In addition, we will not only need these colors in this part, we will use color codes in many places. We will see buttons to give an example, I will definitely use it in that part, so I can say that you have a great benefit.

If we are coded:

active: Default dark gray color.
success: It gives a green color. It also means that the process is complete.
info: It gives a blue color. Notifications or updates are used.
warning: Yellow color. Used for alerts.
danger: It gives a red color. It is dangerous to be understood from the English name.

Our color codes are like those above. Usage form is below.

As you can see in the picture, our table part is striped or "bordered" thanks to our code and when I came to "Emir Demirci" part, the color became darker, ie "hover" effect was activated and the table was displayed in narrow mode.

In other parts we mentioned the effect of "hover" and it output "gray", in fact this output is a transparent output. So it does not give gray color when integrated with the color code, instead it helps to emphasize the color by giving it darkness to the code.

At the end of this chapter, we have learned the table standards that come with Bootstrap and HTML predecessor.

If you design these tables, you can easily use them in different "div" tags according to the form. If the design does not match Bootstrap's design template, you can manually create a CSS file and resize your tables according to the "div" tag.

Because the codes have separate classes, you can use them in an interactive fashion. If the classes are different, you can use a code with other codes to get more functional pages.

It is also important that you use the codes correctly. Otherwise, for example, if you use "td" in place of the "tr" code, your pages will be displayed incorrectly. When using these codes, it is absolutely necessary to use the base table label in the font.

Türkçe Açıklama

Renkli Tablo Etiketleri

"tr" ve "td" kodlarına sınıf atayarak kolayca renklerini değiştirebilirsiniz. Bu yüzden sınıf kodlarını tek biçimde veriyorum ve altında örnek kullanımı belirteceğim.

Ayrıca bu renkler bize sadece bu kısımda lazım olmayacak, birçok yerde renk kodlarını kullanacağız. Örnek verecek olursak butonlar göreceğiz, O kısımda mutlaka kullanacağız yani bilmenizde büyük bir fayda var diyebilirim.

Kodlanmız ise şu şekildedir:

active: Varsayılan koyu gri rengi vermektedir.
success: Yeşil renk vermektedir. Ayrıca işlemin tamamlandığı anlamına gelmektedir.
info: Mavi renk vermektedir. Bildirimler veya güncellemeler için kullanilmaktadır.
warning: Sarı renk vermektedir. Uyarılar için kullanılmaktadır.
danger: Kırmızı renk vermektedir. İngilizce isminden anlaşılacağı üzere tehlike bildirmektedir.

Renk kodlarımız yukarıda olduğu gibidir. Kullanım şekli ise aşağıda bulunmaktadır.

Örnek kullanım ise aşağıda olduğu gibidir:

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>İki Renkli</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="bs-example">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="warning">^^</th>
                    <th class="success">İsimler</th>
                    <th class="danger">Şehirler</th>
                    <th class="info">Numaralar</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Batuhan</td>
                    <td>İzmir</td>
                    <td>0-123-12-12</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Hilal</td>
                    <td>İzmir</td>
                    <td>0-123-12-12</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Kodları kullanırken her kısımda tek tek sınıf atarsanız tablonuzda her kısımda farklı renkler kullanabilirsiniz.

Responsive Tablo Uyumluluğu

Responsive tasarım yaparken oluşturduğunuz tabloların Responsive standartlarına uymasını istiyorsanız, tabloyu oluştururken bir "div" oluşturup buna Bootstrap ile gelen sınıfı atamanız gerekmektedir.

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Responsive</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th class="warning">^^</th>
                    <th class="success">İsimler</th>
                    <th class="danger">Şehirler</th>
                    <th class="info">Numaralar</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Batuhan</td>
                    <td>İzmir</td>
                    <td>0-123-12-12</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Hilal</td>
                    <td>İzmir</td>
                    <td>0-123-12-12</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Uyumlu çalışmasını sağlamak oldukça basittir, yukarıda belirttiğim gibi sadece "div" oluşturup responsive sınıfını atamamız gerekmektedir.

Tabıoyu "div" içine alıp, responsive sınıfını kullanarak, tablonun Responsive standartlarına uyumlu olmasını sağladık. Bu kısımda "div" etiketi kullanmamızın temel sebebi resetleme yapılmasıdır.

Responsive için uyumlu hale getirirken gerekli olan "div" etiketinden bahsettik fakat başka bir "div" etiketi daha gerekli ise bu "div" etiketinin içine diğer "div" etiketinizi yazabilirsiniz. Bu sayede iç içe kullanım yapmış olacaksınız.

Birden Fazla Sınıf Kullanma

Daha önce kodların birbirleri arasında etkileşimli olarak kullanıldığını söylemiştim. Bu başlık altında birden fazla özellik ile nasıl tablolar meydana getirebiliriz bundan bahsedeceğim.

Bu kullanım sayesinde tüm öğrendiğimiz özellikleri tek bir tabloda kullanabilirsiniz ve bu sayede kullanıcı deneyimini arttırabilirsiniz.

Birden fazla sınıf kullanımı aslında diğer öğelerde rahatlıkla kullanabileceğiniz evrensel bir kullanım şeklidir. Bu yüzden tek bir yaplıandırmaya bağlı kalmadan çok daha farklı şekilde yapılar meydana getirebilirsiniz.

İlk olarak örnek bir kullanım için kodlarımız şu şekilde:

<!DOCTYPE html>
<html lang="tr-TR">
<head>
    <meta charset="UTF-8">
    <title>Hover Tablo</title>
    (html comment removed:  Bootstrap Dosyaları )
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="bs-example">
        <table class="table table-condensed table-hover table bordered">
            <thead>
                <tr>
                    <th class="danger">No</th>
                    <th class="danger">Adı & soyad</th>
                    <th class="danger">Numara</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="success">1</td>
                    <td class="success">Ahmet Karlı</td>
                    <td class="success">3123124534</td>
                </tr>
                <tr>
                    <td class="info">2</td>
                    <td class="info">Emir Demirci</td>
                    <td class="warning">5346548785435</td>
                </tr>
             </tbody>
        </table>
    </div>
</body>
</html>

Bu kısımda en önemli şey yukarıda vurguladığım kısım, yani "table" yazdıktan sonra üç farklı sınıf yazmak ve bunların her birinin arasında bir boşluk vererek karışmamasını sağlamaktır. Sınıfları yazarken "table" yazıp tire (-) işareti ekleyip sınıf ismini yazdık ve bu sayede kodlarımızı tamamladık.

Görüldüğü üzere her kısımda ayrı renkler kullanabiliyoruz. Fakat zorluk oluşturan kısım, her yere mecburi ayrı ayrı renk kodları girmemiz gerekmektedir ancak bu sayede tabloda her yere ayrı renk vererek daha başarılı bir kullanıcı deneyimi ortaya çıkartabilirsiniz.

Bu sınıflar sayesinde kodlar karışmadan tüm özellikleri aynı anda kullanabildik.

Resimde görüldüğü gibi tablo kısmımız, kodumuz sayesinde çizgili yani "bordered" tarzı olmuştur ve "Emir Demirci" kısmına geldiğimde renk koyulaştı yani "hover" efekti aktifleşti ve tablomuz dar modda görüntülendi.

Diğer bölümlerde "hover" efektine değinmiştik ve "gri" çıktı vermişti, aslında bu çıktı transparan bir çıktıdır. Bu yüzden renk kodu ile bütünleştiği zamanlarda gri renk vermez, onun yerine renk koduna koyuluk vererek vurgulanmasına yardımcı olur.

Bu bölümün sonunda artık Bootstrap ve HTML öncülüğünde gelen tablo standartlarını öğrenmiş olduk.

Bu tabloları tasarım yapacağımz formata göre farklı "div" etiketleri içinde rahatlıkla kullanabilirsiniz. Eğer tasarıma Bootstrap'ın tasarım şablonu uymamış ise kendiniz manuel olarak CSS dosyası oluşturup, tablolarımzı "div" etiketine göre boyutlandırabilirsiniz.

Kodlar ayrı sınıflara sahip olduğu için etkileşimli bir biçimde kullanabilirsiniz. Sınıflar farklı olduğu içinde, bir kodu diğer kodlar ile beraber kullanıp daha işlevsel sayfalar meydana getirebilirsiniz.

Ayrıca kodları doğru olarak kullanmanız önemlidir. Aksi taktirde örneğin "tr" kodu yerinde "td" kullanırsanız sayfalarınız hatalı gözükecektir. Bu kodları kullanırken mutlaka temel tablo etiketini yazıpta kullanmanız gerekmektedir.

Posted on Utopian.io - Rewarding Open Source Contributors