Template çalışmam

özel bir firmaya hazırladığım bootsrap template çalışmamın ön taslağıdır.

  TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Bootstrap Tables Örnekleri

Bootstrap tablo örneklerini görebilmek için aşağıdaki kodları bootstrap standart kodları ile ekleyip çalıştırın.

<div class="container">

<h3 style="color:blue">standar tablo</h3>
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">çizgili tablo</h3>
<table class="table table-striped">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hücreli tablo</h3>
<table class="table table-bordered">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hover, üzerindeyken satırlar renklenen tablo</h3>
<table class="table table-hover">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>


<h3 style="color:blue">renkli tablo ve renklerin bootstrap ta kullanım amaçları</h3>

<table class="table">
<tr>
  <td class="active">active tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="warning">warning tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="info">info tablo hücresi...</td>
  </tr>
  <tr>
  <td class="info">info tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="warning">warnin tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="active">active tablo hücresi...</td>
 </tr>
</table>

<h5 style="color:blue"> yukarıdaki renklerin bootstrapta kullanım alanları </br>
.active = belirli bir satır veya hücreye vurgulu renk uygular </br>
.success = başarılı ya da pozitif eylemi gösterir </br>
.info = nötr bilgilendirici değişiklik veya eylemi gösterir </br>
.warning = dikkat gerekebilir bir uyarı gösterir </br>
.danger = tehlikeli veya potansiyel olumsuz bir etki gösterir </br>
</h5>
</br>

<h3 style="color:blue">table-responsive tablonun altına scrooll ekler</h3>
<div class="table-responsive">
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 </table>
 <div>
 </br>
 </br>


</div>

bootstrap bootstrap tables tables

Bootstrap Typography Örnekleri

Bootstrap Typography örneklerini görmek için aşağıdaki kodları bootstrap'ın standart kodları ile ekleyip çalıştırın..


<div class="container">
<h1>h1. Bootstrap başlık</h1>
<h2>h2. Bootstrap başlık</h2>
<h3>h3. Bootstrap başlık</h3>
<h4>h4. Bootstrap başlık</h4>
<h5>h5. Bootstrap başlık</h5>
<h6>h6. Bootstrap başlık</h6>

<hr style="border-color: red">

<h1>h1. Bootstrap başlık <small>ikinci yazı alanı</small> </h1>
<h2>h2. Bootstrap başlık <small>ikinci yazı alanı</small> </h2>
<h3>h3. Bootstrap başlık <small>ikinci yazı alanı</small> </h3>
<h4>h4. Bootstrap başlık <small>ikinci yazı alanı</small> </h4>
<h5>h5. Bootstrap başlık <small>ikinci yazı alanı</small> </h5>
<h6>h6. Bootstrap başlık <small>ikinci yazı alanı</small> </h6>

<hr style="border-color: red">

<p class="lead">Bootstrap parağrafta öneçıkarmak istediğiniz alan...</p> </br>
<del>buraya yazılan metni silinmiş olarak kabul eder</del></br>
<s>buraya yazılan yazının üzerini çizer </s></br>
<u>buraya yazılan yazının altını çizer </u></br>
<small>small, ince yazı olarak görünür </small></br>
<strong>strong, kalın yazı olarak görünür</strong></br>
<em>italik yazı olarak görünür</em>

<hr style="border-color: red">

<p class="text-left">Left, sola yasla.</p>
<p class="text-center">Center, ortala.</p>
<p class="text-right">Right, sağa yasla.</p>
<p class="text-justify">Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. </p>
<p class="text-nowrap">özellik atama.</p>

<hr style="border-color: red">

<p class="text-lowercase">Lowercased, hepsini küçült.</p>
<p class="text-uppercase">Uppercased, hepsnini büyüt.</p>
<p class="text-capitalize">Capitalized, ilk harfleri büyüt.</p> </br>
<hr style="border-color: red">
<abbr title="buraya üzerine geldiğinizde görünmesini istediğiniz metin gelecek">sayfa metni üzerine gelin</abbr>

<hr style="border-color: red">

<address>
 <strong>Adres</strong><br>
 cumhuriyet cad. no:1<br>
 kadıköy/istanbul<br>
 <abbr title="Telefon">Tel:</abbr> (555) 505 50 50
</address>
<address>
 <strong>e-mail</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

<hr style="border-color: red">

<blockquote>
 <p>sola yaslı blok oluşturmak için kullanılır</p>
 <footer>çizgi alanı, <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
 <p>sağa yaslı blok oluşturmak için kullanılır</p>
 <footer>çizgi alanı <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>

<hr style="border-color: red">

    <ul>
    <li>ul li örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

    <ul class="list-unstyled">
    <li>ul class="list-unstyled" ile simgeleri yok eder</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

<ul class="list-inline">
    <li>ul class="list-inline" ile tek satırda gösterir</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

    <ol>
    <li>ol li örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ol>

<hr style="border-color: red">

    <dl>
<dt>dt başlık örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>

<hr style="border-color: red">

<dl class="dl-horizontal">
<dt>dl-horizontal örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>

</div>

bootstrap bootstrap typography typography

Bootstrap Col Yapısı

Bootstrap'ın temeli col yapısı, bootstrap hakkında fazla türkçe kaynak malesefki bulunmamakta, bu nedenle özellikle col yapısını bazı arkadaşların karıştırdığını fark ettim,  mümkün olduğunca ayrıntılı olarak anlatmaya çalıştığım kodları kendi oluşturacağınız sayfanıza bootstrap'ın standart kodları ile ekleyin ve deneyin, açıklamaları da lg, md, sm ve xs yapısına göre takip ederseniz konuyu anlayacağınıza eminim..

Ayrıca belirtmek isterim, oluşturduğunuz col yapısını tekrar kendi içinde 12'lik sisteme istediğiniz gibi bölme imkanı vermektedir, aşağıdaki örnekle daha iyi anlayabilirsiniz.
<div class="col-lg-4">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

bootstrap col yapısı kodları

<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <!--ektanı 12'lik sistemle bir bütün olarak algılattık -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), aynı işlemi aşağıda da kullandık -->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-2 ile 6 ya böldük, yani (2+2+2+2+2+2=12) 6 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-2 yine aynı olay, sm-4 ile elimizdeki satırı 3'e böldük bu defa aynı satırda (4+4+4=12) 3 resim gösterecektir, xs-6 ile 2'e böldük bu defada (6+6=12) 2 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">          <!--xs-6 da alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">           <!--sm-4 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--lg-2 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), yukarıda ikiye böldüğümüz alanın diğer kısmı -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-3 ile 4'e böldük, yani (3+3+3+3=12) 4 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-3 yine aynı olay, sm-6 ile elimizdeki satırı 2'ye böldük bu defa aynı satırda (6+6=12) 2 resim gösterecektir, xs-12 ile 1'e böldük bu defada (12=12) 1 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail"> <!--xs-12 de alt satırdan başlar-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--xs-12 de alt satırdan başlar-->
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--sm-6 da alt satırdan başlar--> <!--xs-12 de alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--lg-3 de alt satırdan başlar--> <!--sm-6 da alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>

bootstrap col col yapısı