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ı

Bootstrap Carousel Slide Örneği

Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<div class="container"> <!-- container class ına atayacağınız özellik ile slide alanınızın en oranını ayarlayabilirsiniz. -->

<div id="benimbannerim" class="carousel slide" data-ride="carousel">  <!--benimbannerim olarak adlandırdığımız id daha sonra ilişkilendirmek istediğimiz alanlarda kullanacağız -->

<ol class="carousel-indicators">       <!--slide alanın en altında bulunan daire ikonlarının konumunu ayarlayacağınız class -->

<li data-target="#benimbannerim" data-slide-to="0" class="active"></li> <!-- slide alanının en altında bulunan daire ikonları, active sayfa ilk yüklendiinde aktif olacak ikonu belirtir-->

<li data-target="#benimbannerim" data-slide-to="1"></li>             

<li data-target="#benimbannerim" data-slide-to="2"></li>

<li data-target="#benimbannerim" data-slide-to="3"></li>

</ol>

<div class="carousel-inner">       <!-- resimlerin sıralı bir şekilde görünmesini sağlar, bu class olmadığı taktirde resimler ekranda alt alta işlem yapmadan durur -->

<div class="item active">   <!-- item resim alanına ait özellikler atanabilecek class, active sayfa ilk yüklendiğinde aktif olacak resimi belirtir -->

<img src="img/1.jpg" alt="resim"/> <!-- eklenecek resim -->

<div class="carousel-caption"> <!-- slide alanına ekleyeceğiniz yazılara ve alanına ait özellikleri ayarlayabileceğiniz class-->

<h2>birinci başlık </h2>  <!-- slide alanına ekleyeceğiniz yazı-->

<h3>ikinci başlık </h3>  <!-- slide alanına istediğiniz kadar yazı alananı ekleyebilirsiniz -->

<p>ücüncü başlık </p>

</div> 

</div>

<div class="item">

<img src="img/2.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başlık </h2>

<p>alt başlık </p>

</div> 

</div>

<div class="item">

<img src="img/3.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başka deneme yazısı </h2>

<p>başka deneme </p>

</div> 

</div>

<div class="item">

<img src="img/4.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>bu yazı deneme </h2>

<p>bu yazı </p>

</div> 

</div>

</div>

<a class="left carousel-control" href="#benimbannerim" role="button" data-slide="prev"> <!-- slide alanında sol ok ikonu, left ile sola yasla, button ile buton özelliği verme ve prev ile geri gitme özelliği verilmiştir  -->

<span class="glyphicon glyphicon-chevron-left"></span> <!--buradaki glyphicon glyphicon-chevron-left class adı ikonun adıdır  -->

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#benimbannerim" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

banner bootstrap carousel silide

Bootstrap Navbar Örneği

       Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<!-- buraya ekleyeceğiniz container (</div> menü sonunda kapatılmak kaydıyla) menüyü ekranın sol ve sağ kısmını sıfır alarak başlatmak yerine, bootstrap ölçülerinde ortalar -->

<nav class="navbar navbar-default navbar-static-top">
<!--navbar-default siyah memü, navbar-inverse gri menü seçeneği sunar -->
<!--navbar-static-top  bar ın alt divle mesafesini ayarlar, bunun yerine navbar-fixed-bottom yazarsanız menü sayfa altında yer alır, navbar-fixed-top menü sayfanın üstünde yer alır  -->

     <div class="container-fluid">
 <!-- container-fluid menüyü içindekiler dahil ekranın solundan ve sağdan sıfır başlatır, sadece container ise menünün çerçevesini ekranın soldan ve sağdan sıfır başlatır fakat menü içeriği bootstrap standarlarında orta alanda kalır--> 

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navekle">
<!--  #navekle ile aşağıdaki navekle birbirleri ile bağlantı kurar, bu şekilde sağdaki icona tıkladığınızda açılır menü haline gelir. burada isimlerin aynı olması gerekmekte id veya class olabilir-->

                            <span class="icon-bar"></span> <!--sağ menüdeki ikonlar -->
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                      </button>

  <a class="navbar-brand" href="#"> logo</a>
                             <!-- menünün solundaki sabit alan, isteğe bağlı kaldırılabilir -->
</div>

<div class="collapse navbar-collapse" id="navekle">
          <!-- navekle böylece yukarıdaki #naveklenin nereyi etkilediği belirlenir-->

<ul class="nav navbar-nav navbar-right">
                       <!-- navbar-right menüleri sağa yaslar, kullanmadığınız taktirde solda kalır -->
<li> <a href="#"> anasayfa </a></li>
<li> <a href="#"> hakkımızda </a></li>
<li> <a href="#"> referanslar</a></li>
<li> <a href="#"> iletişim </a></li>
</ul>
</div>
</div>
</nav>

bootstrap navbar

CSS Tablo (Table) Özellikleri

Table, th, td : sınır çizgilerini belirlemek için kullanılır.

Alabileceği değerler, width, height, text-align, vertical-align, padding, background-color

width: tablo veya hücre genişliği - height: tablo veya hücre yüksekliği

table {

Width:150px;

Height:100px;

}

Text-align: tablo veya hücre içerisindeki metni yatayda hızalar.

Alabileceği değerler:  right: sağ -  left: sol - center: orta

table {

text-align:right;

}

Vertical-align:tablo veya hücre içerisindeki metni dikeyde hızalar.

Alabileceği değerler:  bottom: alt – top:üst – center: orta

table{

Vertical-align:bottom;

}

Padding:tablo veya hücre sınırları ile içerik arasındaki boşluğu ayarlar.

Alabileceği değerler : padding: dört kenar. Padding-left: sol, parding-right:sağ , padding-top:üst, padding-bottom:alt

table{ padding:10px; } dört kenara tek değer verme.

table{ padding: 1px 3px 7px 5px; } dört kenara tek satırda ayrı değer verme.

table{ padding-left:10px; } sol kenara değer verme.

border-collapse: hücreler arasındaki çift çizgiyi tek çizgi haline getirir. Alabileceği tek değer collapse dir.

border: sınır çizgisi. 

Alabileceği değerler:  kalınlık, çizgi şekli, renk.

border:1px solid blue;

özelliklerin birlikte kullanımı
  

table {

Width:200px;

Height:100px;

border:1px solid red;

}

td{width:100px;

Height:100px;

text-align:center;

vertical-align:top;

padding-top:30px;

}

çalışmalara ait örnek link

css table css tablo css tablo özellikleri

PDO ile Veritabanı İşlemleri

PDO İLE VERİTABANINA BAĞLANMA

Localhost için geçerli :  

dosya adı = db.php

<?php

try {

     $db = new PDO("mysql:host=localhost;dbname=database_ismi;charset=utf8", "root", "");

} catch ( PDOException $e ){

     print $e->getMessage();  }

?>

NOTLAR :

Mysql:host = sunucu adı yazılır.

Dbname= veritabanı adı yazılır .

Charset=karakter tanımı yazılır (utf8, türkiye için karakter tanımı).

SELECT İŞLEMLERİ

<?php

include ("db.php");  

$baslik="baslik";  

$query = $db->query("SELECT * FROM anasayfa", PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

     foreach( $query as $row ){

          print $row["$baslik"]."<br />";       }}

?>

İNSERT İŞLEMLERİ

<?php

include ("db.php"); 

$yeni_baslik="yeni başlık deneme";          

$yeni_icerik="yeni içerik deneme";

$yeni_aciklama="yeni açıklama deneme";

$query = $db->prepare("INSERT INTO anasayfa SET baslik = ?, icerik = ?, aciklama = ?");

$insert = $query->execute(array("$yeni_baslik", "$yeni_icerik", "$yeni_aciklama" ));

if ( $insert ){

    $last_id = $db->lastInsertId();

    print "kayıt başarılı!"; }

?>

UPDATE İŞLEMLERİ

<?php

include ("db.php");

$yeni_baslik = "sistem deneme";

$eski_baslik = "yeni deneme";

$query = $db->prepare("UPDATE anasayfa SET baslik = ? WHERE baslik = ?");

$update = $query->execute(array( "$yeni_baslik", "$eski_baslik"));

if ( $update ){

     print "güncelleme başarılı!"; } 

?>

DELETE İŞLEMLERİ

<?php

include ("db.php");

$id=1;

$query = $db->prepare("DELETE FROM anasayfa WHERE id =?");

$delete = $query->execute(array("$id"));

if ( $delete ){

     print "silme işlemi başarılı!"; }

?>

çalışmalara ait dosyayı buradan indirebilirsiniz
yapmanız gereken; indirmiş olduğunuz dosyayı rar klasöründen çıkarıp kullandığınız serverde www içine atın,
daha sonra veritabanı için;
veritabanı adı = database_ismi, tablo adı = anasayfa
sütun isimleri = id, baslik, aciklama ve icerik
olarak ayarlayın ve çalıştırın. dosyaların içinde açıklama satırları bulunmakta bunlardan yararlanarak yeni denemeler yapabilirsiniz. kolay gelsin...

pdo php veritabanı işlemleri

JQuery Animasyon (Animate) Özellikleri

Animate: click özelliği atanan elemana tıklandığı an, animate özelliği atanan eleman çalışır.

Yön atamaları: click özelliği atanan elemana tıklandığı an,  (left, right, top, bottom)  sol, sağ, üst veya alt yönünde hareket eder.

  $(document).ready(function(){

  $("#button1").click(function(){

  $("#kutu1").animate({left:'500px'});

  });
  });

Saydamlık: click özelliği atanan elemana tıklandığı an, Opacity özelliğine atanan değer kadar saydamlaşır.

  $(document).ready(function(){

  $("#button2").click(function(){

  $("#kutu2").animate({opacity:'0.5'});

  });

  });

Toggle () :  click özelliği atanan elemana tıklandığı an, Toggle  özelliği atanan elemanı her tıklamada gösteri veya gizler.

$(document).ready(function(){

$("#button3").click(function(){

$("#kutu3").animate({height:'toggle'});

});

})

çalışmalara ait örnek link

Birden fazla özelliği bir arada kullanmak

$(document).ready(function(){

$("button").click(function(){

 var div=$("div");

div.animate({height:'+=100px',opacity:'0.4'},"slow");

div.animate({width:'+=100px',opacity:'0.8'},"slow");

div.animate({height:'+=25px',opacity:'0.4'},"slow");

div.animate({width:'+=25px',opacity:'0.9',left:'+=150px'},"slow");

});

});

çalışmalara ait örnek link

jquery jquery animasyon jquery animate

Hazır Photoshop Hoşgeldin Bebek Çalışmaları

Photoshopta hazırlanmış 8 adet psd formatında hoşgeldin bebek çalışması, fazla photoshop bilgisi olmayan arkadaşlar için en üste bulunan layerden (bebek) ismi değiştirmeleri yeterli olacaktır. Çalışmalara ait link aşağıda bulunmakta.

Çalışmaları buradan indirebilirsiniz

download hoşgeldin bebek photoshop