layout kurmak için her zaman flex ya da grid kullanmalısın, absolute sadece modal, popup gibi alanlar için onun dışında ihtiyacın yok, inline-block ise neredeyse hiçbir zaman ihtiyacın olmayacak
tam olarak olayın ne olduğunu anlayamamışsın muhtemelen, açıklayalım;
node.js bir back-end dili (php gibi, javascript yazıyorsun), jquery ise bir javascript kütüphanesi.
gerçek zamanlı işlemler istiyorsan socket.io'ya bakabilirsin php ile kullanımları var, sayfa yenilemeden işlem yapmak istiyorsan jquery'deki ajax metodları işini fazlasıyla çözer, php ve nodejs'i bir arada kullanmak içinse bir sebebin yok
bunu elle yapmıyorlar, webpack gibi araçlarla build aldıklarında otomatik sıkıştırıyor daha performanslı olsun diye, geliştirme ortamındaki css dosyaları çok daha düzenli olur, production seviyesine geldiğinde bu şekilde görünürler.
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 :)