php bootstrap grid while döngüsü

13-01-2017, 18:32:41

Merhaba,

Bu konularda acemiyim.

bootstrap grid sistemi kullanıyor.

ürün 1 - ürün 2 - ürün 3 - ürün 4
ürün 5 - ürün 6 - ürün 7 - ürün 8

şeklinde bir listeleme yapmam lazım grid içinde.

her satır için ayrı sorgu kodu yazdım.

tek sorgu kodu ile bootstrap yapısına uygun nasıl yapabilirim? 8 sonuç çeksem 4 tane yayınlandıktan sonra nasıl alt satıra geçirebilirim.

<div class="container-fluid bg-3 text-center">    
    <div class="row">
<?php
$sql = "SELECT * FROM kategoriler LIMIT 4";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
     
?>
    <div class="col-sm-3">
      <?php echo '<a href="/urunler.php?id='.$row['id'].'">'.$row['isim'].'</a>';?>
      <img src="<?php echo $row['resim'];?>" class="img-responsive" style="width:100%" alt="Image">
    </div>
<?php	  
	      }
}
?>
    
  </div>
</div><br><br><br>

<div class="container-fluid bg-3 text-center">    
    <div class="row">
    <div class="col-sm-3">
      <a href="/urunler.php?id=1">KATEGORİ 1</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=2">KATEGORİ 2</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=3">KATEGORİ 3</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=4">KATEGORİ 4</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    
  </div>
</div><br><br><br>

<div class="container-fluid bg-3 text-center">    
    <div class="row">
    <div class="col-sm-3">
      <a href="/urunler.php?id=5">KATEGORİ 5</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=6">KATEGORİ 6</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=7">KATEGORİ 7</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <a href="/urunler.php?id=8">KATEGORİ 8</a>      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    
  </div>
</div><br><br><br>

13-01-2017, 21:22:41

Met

<?php
$sql = "SELECT * FROM kategoriler LIMIT 4";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    $i = 0;
    while($row = mysqli_fetch_assoc($result)) {
       if($i%4 == 0){
          echo '<div class="container-fluid bg-3 text-center">    
                    <div class="row">';
       }
?>
    <div class="col-sm-3">
      <?php echo '<a href="/urunler.php?id='.$row['id'].'">'.$row['isim'].'</a>';?>
      <img src="<?php echo $row['resim'];?>" class="img-responsive" style="width:100%" alt="Image">
    </div>
<?php     
            if($i%4 == 3){ //4-1
                echo '</div>
                     </div>';
            } 
          $i++;
          }
}
?>

15-01-2017, 23:06:07

Misafir

Met adlı üyeden alıntı: mesajı görüntüle

<?php
$sql = "SELECT * FROM kategoriler LIMIT 4";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    $i = 0;
    while($row = mysqli_fetch_assoc($result)) {
       if($i%4 == 0){
          echo '<div class="container-fluid bg-3 text-center">    
                    <div class="row">';
       }
?>
    <div class="col-sm-3">
      <?php echo '<a href="/urunler.php?id='.$row['id'].'">'.$row['isim'].'</a>';?>
      <img src="<?php echo $row['resim'];?>" class="img-responsive" style="width:100%" alt="Image">
    </div>
<?php     
            if($i%4 == 3){ //4-1
                echo '</div>
                     </div>';
            } 
          $i++;
          }
}
?>

hocam çözüm için teşekkür ederim. aklımı karıştıran bir nokta var.

Php'de hiç bölmeden tüm sonuçları alsam, bootstrap grid özelliğini kullanıp misal

col-xs-12 col-sm-6 col-md-3

şeklinde kullansam yine alta atıyor. kategori resimleri de her halükarda responsive olacağı için php ile böldüğümüz şekilde görünmez mi yine?