bootstrap grid yapısı için flex özelliğini kullanıyor, yani display: flex olarak ayarlıyor kapsayıcı etiketini içindeki elemanlarıda ona göre içindeki 12lik grid sistemine göre col-x ile ayarlayıp gösterebiliyorsun.
css'in grid yapısında ise display: grid diyorsun ve örneğin 12'lik bir grid sistemi kuracaksan grid-template-columns: repeat(12, 1fr) diyerek 12'lik grid sistemini kolayca oluşturuyorsun.
Örneğin 12'lik bir grid kapsayıcısı oluşturalım.
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
her bir kolon için kapsayacağı ayarlamaları yapalım.
.col {
background: #ddd;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.col-4 {
grid-column: span 4;
}
.col-5 {
grid-column: span 5;
}
.col-6 {
grid-column: span 6;
}
.col-7 {
grid-column: span 7;
}
.col-8 {
grid-column: span 8;
}
.col-9 {
grid-column: span 9;
}
.col-10 {
grid-column: span 10;
}
.col-11 {
grid-column: span 11;
}
.col-12 {
grid-column: span 12;
}
html'de şöyle olsun
<div class="grid">
<div class="col">col-1</div>
<div class="col">col-1</div>
<div class="col">col-1</div>
<div class="col">col-1</div>
<div class="col col-8">col-8</div>
<div class="col col-2">col-2</div>
<div class="col">col-1</div>
<div class="col col-4">col-4</div>
<div class="col col-3">col-3</div>
<div class="col col-2">col-2</div>
</div>
hangisi daha avantajlı derken karşılaştırma yapabileceğin 2 farklı şey yok ortada, bootstrap grid yapısı için flex modülünü kullanıyor cssteki.
oysa senin cssde kullanabileceğin hem flex hem de grid modülü var ayrı ayrı. ve grid modülü inanılmaz esnek, kendine uygun bir yapıyı css grid ile oluşturmak elbette daha mantıklı.
ama benim tavsiyem bir de tailwind'e bak grid yapısı için, sevebilirsin :)
tek yapman gereken bu tarihi <td></td> içinde <div></div> olarak yazdırman ve ona white-space: nowrap özelliği vermen.
yani;
<table>
...
<tr>
<td>
<div class="date-format">2021-01-04</div>
</td>
</tr>
..
</table>
<style>
.date-format {
white-space: nowrap;
}
</style>
böylece alt satıra hiçbir zaman inmez en garanti yol diyebiliriz.
Eğer değişkenlerinin tipi string ise bu şekilde yapıyor. Ya değerleri tanımlarken integer olarak tanımlaman lazım, ya da burada kullanırken parseInt() ya da parseFloat() gibi fonksiyonlardan geçirmen lazım.
{{ parseFloat(numberOne) + parseFloat(numerSecond) }}
gibi :)
blade tarzı kendi tema motorunu yazarak bunu layout'tan türeterek çok daha kolay şekillerde yönebilirsin.
kanalda bir videosunu yapmıştım inceleyebilirsin: https://www.youtube.com/watch?v=tX4Nx0TJbcM
[data-sepete-ekle] nitelikli elemana tıklayınca ürünü sepete ekletiyorsan o zaman yine bu elemana data-title gibi bir nitelik daha ekleyip burada verirsen ürün adını javascript tarafında basitçe .data() kullanarak alabilirsin hangisine tıkladığını biliyorsun çünkü.
<a href="#" ... data-title="<?=$urun['baslik']?>" gibi..
jquery inputmask diye aratırsan bir çok eklenti var, en çok kullanılanı ise
https://github.com/RobinHerbots/Inputmask
bu arkadaş, kullanımı çok basit zaten baksan anlarsın :)
yapacağın şey inline değilde ajax ile autocomplete'i kullanmak olmalı.
en basit örneği: https://jqueryui.com/autocomplete/#remote
prototürk kanalında da bir ders var onada bakabilirsin
https://www.youtube.com/watch?v=w7b_H-Z9hvM
php öldü mü sorusu her sene çaycı hüseyin öldü mü sorusuyla aynı trollükte :)
.svg uzantısıyla dosya oluşturup kodları içine yazıp sayfanda img gibi çağırıp kullanabilirsin, başka türlü gizlemek dediğin şeyin bir yöntemi yok sonuçta sayfada görüyorsun :)