BoostStrap ile bu nasıl yapılır

29-11-2022, 17:58:22

Aşağıdaki gibi bir projem var. Sayfa mobil uyumlu olmayacak fakat bunu en kısa yapma yolu bootstrap galiba, bunu nasıl yapabilirim? Bootstrap mantığını vs.. biliyorum bir kaç arkadaş grid/flexbox dedi fakat yapamadım.
Şöyle bir şey yapmayı denedim fakat olmadı:

    <div class="container">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
            <div class="yemek col-md-8"><img src="kebap.png"><p id="yemekismi">Adana Kebap</p></div>
          <div class="yemek col-6 col-md-4"><img src="bici.png" ><p id="yemekismi">Bici Bici</p></div>
        </div>
      
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
            <div class="yemek col-6 col-md-4"><img src="salgam.png"><p id="yemekismi">Şalgam</p></div>
            <div class="yemek col-6 col-md-4"><img src="sarma.png"><p id="yemekismi">Dolma & Sarma</p></div>
          <div class="yemek col-6 col-md-4"><img src="sirdan.png"><p id="yemekismi">Şırdan</p></div>
        </div>
      
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
            <div class="yemek col-6"><img src="halka.png"><p id="yemekismi">Halka Tatlı</p></div>
        </div>
      </div>

29-11-2022, 18:06:35

#2
M4M1

Açık Profil bilgileri

M4M1'a özel mesaj gönder

M4M1'a ticaret puanı gönder

M4M1 tarafından gönderilen tüm mesajları bul
Bootstrap bilmiyorum fakat sadece resim ve yazı olucaksa css ile yapılır kolay yasak değilse yardımcı olabilirim
29-11-2022, 18:10:06

#3
Xugart

Açık Profil bilgileri

Xugart'a özel mesaj gönder

Xugart'a ticaret puanı gönder

Xugart tarafından gönderilen tüm mesajları bul
Bence bunu en kolay flexbox ile yapabilirsiniz. Google'a flexbox yazarsanız bir çok sitede basit anlatımları mevcut.
29-11-2022, 18:12:11

#4
MuhammetDemirel

Açık Profil bilgileri

MuhammetDemirel'a özel mesaj gönder

MuhammetDemirel'a ticaret puanı gönder

MuhammetDemirel'nin web sitesini ziyaret edin

MuhammetDemirel tarafından gönderilen tüm mesajları bul
Grid ile çok kolay bir şekilde yapılabilir, uzun zamandır bootstrap kullanmadığım için önerği TailwindCSS ile yaptım.

Örnek: kisalt.in/9lsZ

Bootstrap için bu dokümana göz atarsanız aynı grid yapısına ulaşabilirsiniz: kisalt.in/gdh1

29-11-2022, 18:17:36

rufiqcavadov

Buyrun

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
<div class="div6"> </div>
</div>

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.div1 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 3 / 1 / 4 / 2;
}
.div2 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 4 / 1 / 5 / 2;
}
.div3 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 2 / 1 / 3 / 2;
}
.div4 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 3 / 3 / 4 / 4;
}
.div5 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 2 / 5 / 3 / 6;
}
.div6 {
  width: 300px;
  height: 150px;
  background: grey;
  grid-area: 3 / 5 / 4 / 6;
}

Kaynak: https://cssgrid-generator.netlify.app/

Flexbox ile yapmış olduğum bir Navbar tasarımı da var ki, daha önce Technopat Sosyal üzerinde paylaşmıştım.

Kaynak: https://www.technopat.net/sosyal/kon...arimi.2246155/