การใช้งานแสดงสินค้าโดยใช้ Grid ใน Joomla
โพสต์แล้ว: 24/07/2019 5:06 pm
ปกติแล้ว เราทำหน้า Grid บนเว็บไซต์ ปัจจุบันเราก็ใช้ Grid ของ Bootstrap ที่มีเวอร์ชันใหม่ แต่ตัวใน Joomla นั้นถ้าจะใช้งาน Grid 2.3 โดยการเขียนการใช้งาน Grid ก็ต่างกันด้วย โดย Joomla จะใช้ เช่น <div class=span12>" แต่ ใน grid ทั่วไป เช่น <div class="col-sm-12"> ในตัว sm นั้น ก็จะแปลว่า small จะเป็นขนาดจอที่เล็กกว่า 567 จะแสดงเป็น Respovsive รวมถึงการแสดงผลที่แบ่งเป็น gird อีกด้วย สามาถศึกษาเรื่อง Grid ได้ที่ Grid ในค่า grid แถวนึงจะรวมกันได้ 12 เราก็ควรแบ่ง div ให้ได้เท่ากับ 12
โค้ด คือ
ผลลัพธ์ จะได้แบ่งตาม Grid นะครับ จะเห็นได้ว่า divแรกใส่5 และ divที่สองเราใส่span4 divที่สามเราใส่span3 ก็จะเห็นการแบ่งดังรูปเลยครับ
*เราสามารถนำ div ที่เหลือ ที่เราไม่ได้ใส่ข้อมูล นำข้อมูลอื่น ๆ มาใส่ได้ครับผม
โค้ด คือ
โค้ด: เลือกทั้งหมด
<div class="row">
<div class="span5">
<center>
<?php foreach ($setid as $product): ?>
<div>
<center> <img src="<รูปสินค้า>" width="100px" heigh="100px" title="test" alt="test"></a><center>
<br>
<center> <?php echo (ชื่อสินค้า]) ?><br></center>
<?php echo (ราคา]) ?>
</div>
</center>
<?php endforeach; ?>
</div>
<div class="span4"></div>
<div class="span3"></div>
</div>*เราสามารถนำ div ที่เหลือ ที่เราไม่ได้ใส่ข้อมูล นำข้อมูลอื่น ๆ มาใส่ได้ครับผม
- Selection_999(398).png (16.76 KiB) Viewed 649 times
