Responsive nasıl yapılır?

RosLy · 10 Temmuz 2024

Arkadaşlar merhaba, ben bir PHP sayfası hazırladım. Sayfa özelliklerini tamamladım. Sadece ben kullandığım için herhangi bir veri kaybı olmayacak o yüzden olabildiğince basit bir sayfa yaptım. Fakat bu sayfa benim monitörüm gibi küçük monitörlerde en sonda güncelle ve sil seçenekleri olan tabloda iki buttonu alt alta sıralıyor ama ben yan yana olmasını istiyorum bunu nasıl düzeltebiliriz?

Bakın bu şekilde butonlar böyle kalıyor. CSS sınıflarından Bootstrap kullanıyorum.

Bu şekilde bütün ürünler listelenirken buttonların yan yana olmasını istiyorum ama hepsi listelenirken alt alta gözüküyor ve çirkin oluyor responsive nasıl yapabilirim?

Yan yana sıralanırken de cihazın monitörü ufak büyük fark etmemesi için responsive gerekiyor diye biliyorum.

111520 · 10 Temmuz 2024

Bootstrap kullanıyorsan kendisi zaten otomatik olarak responsive olarak ayarlıyor. Butonlarda bir sıkıntı da göremedim açıkçası.

Her çözünürlükte yan yana olmasını istiyorsan tabii ki yapılır ama Bootstrap böyle ayarladıysa böyle kalması iyi bence. İstersen bir kodları at.

RosLy · 10 Temmuz 2024

111520 dedi:
Bootstrap kullanıyorsan kendisi zaten otomatik olarak responsive olarak ayarlıyor. Butonlarda bir sıkıntı da göremedim açıkçası. Her çözünürlükte yan yana olmasını istiyorsan tabii ki yapılır ama Bootstrap böyle ayarladıysa böyle kalması iyi bence. İstersen bir kodları at.

PHP:

<table class="table w-100 mx-auto mt-2 background2 mt-4">
    <thead>
        <tr class="table-dark">
            <th scope="col">ID</th>
            <th scope="col">Zimmet Tarihi</th>
            <th scope="col">Marka</th>
            <th scope="col">Model</th>
            <th scope="col">Türü</th>
            <th scope="col">Özellikleri</th>
            <th scope="col">Seri No/IMEI</th>
            <th scope="col">Durum</th>
            <th scope="col">Kimde</th>
            <th scope="col">Detay</th>
            <th scope="col">İşlem</th>
        </tr>
    </thead>
    <tbody>

    <?php
    foreach($sorgu as $yaz){ ?>
        <tr>
            <td><?= $yaz["ID"] ?></td>
            <td><?= $yaz["ZTarihi"] ?></td>
            <td><?= $yaz["Marka"] ?></td>
            <td><?= $yaz["Model"] ?></td>
            <td><?= $yaz["Tur"] ?></td>
            <td><?= $yaz["Ozellikleri"] ?></td>
            <td><?= $yaz["SeriNo"] ?></td>
            <th><?= $yaz["Durum"] ?></th>
            <td><?= $yaz["Kimde"] ?></td>
            <td><?= $yaz["Detay"] ?></td>

            <td>
                <a href="guncelle.php?benzersiz=<?= $yaz["ID"] ?>"><input type="button" value="Güncelle" class="btn btn-success" /></a>
                <a href="sil.php?benzersiz=<?= $yaz["ID"] ?>"><input type="button" value="Sil" class="btn btn-danger" /></a>
            </td>     
        </tr>
    <?php }
    if ($x==3)
    {
      echo '<div class="alert alert-danger w-25 mx-auto mt-3"> Filtreleme yaparken metin kutusunu boş bırakmayınız! </div>';
    }
    ?>
    </tbody>
</table>

Responsive yapabilmem için ne gerekli bakma fırsatınız oldu mu?

111520 · 11 Temmuz 2024

Bunlar zaten Bootstrap olduğu için responsive. Sen sayfa küçüldükçe boyutunu küçültmek mi istiyorsun yeşil butonun?

RosLy · 12 Temmuz 2024

111520 dedi:
Bunlar zaten Bootstrap olduğu için responsive. Sen sayfa küçüldükçe boyutunu küçültmek mi istiyorsun yeşil butonun?

Hayır fotoğraftaki gibi alt alta değil yan yana durmasını istiyorum monitörde normal boyutlu ama 14" laptopumda butonlar alt alta.

Bir şey keşfettim 1920x1200 çözünürlüğündeki monitörümde hiçbir filtre yapmadan bütün veri tabanı çektiğimde buttonlar alt alta gözüküyor. Aynı listelemede %67 uzaklık yapınca buttonlar istediğim gibi oluyor. %100 yani normal olunca yazılar büyüdüğü için buttonlar alt alta gözüküyor. Bazen filtre yapınca yan yana bazen ise filtre yapsam da alt alta oluyor.

Arkadaşlar sorunum çözüldü ufak ekranda olsa artık düzgün duruyor sorun Bootstrap'in 12'li Grid yapısından kaynaklı. 12 eşit bölüme ayrılınca hiçbir sorun olmuyor. Düzenle ve sil düğmelerini ayrı yapınca 11 yerine 12 eşit parçaya bölündü ve ufak ekranlı laptopumda bile sorun çözüldü.

Responsive nasıl yapılır?

Ayrıntılı düzenleme

RosLy

Decapat

111520

Megapat

RosLy

Decapat

111520

Megapat

RosLy

Decapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz