การใช้งานแสดงสินค้าโดยใช้ Grid ใน Joomla

[Patipat]

ปกติแล้ว เราทำหน้า 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

โค้ด คือ

โค้ด: เลือกทั้งหมด

<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>

ผลลัพธ์ จะได้แบ่งตาม Grid นะครับ จะเห็นได้ว่า divแรกใส่5 และ divที่สองเราใส่span4 divที่สามเราใส่span3 ก็จะเห็นการแบ่งดังรูปเลยครับ

*เราสามารถนำ div ที่เหลือ ที่เราไม่ได้ใส่ข้อมูล นำข้อมูลอื่น ๆ มาใส่ได้ครับผม

Selection_999(398).png (16.76 KiB) Viewed 646 times

[thatsawan]

Joomla ใช้ Bootstrap เก่าจังเนาะ

[Patipat]

เป็นบาง template ครับที่ใช้ bootstrap เก่า