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

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

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

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

โค้ด คือ

Code: Select all

<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
Selection_999(398).png (16.76 KiB) Viewed 185 times
Kor ma di kub. :)

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 25155
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan »

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

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

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

Post by Patipat »

เป็นบาง template ครับที่ใช้ bootstrap เก่า :cry:
Kor ma di kub. :)

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest