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

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

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

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

#5

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/