การใช้งาน Grid ในการจัดรูปภาพให้เรียงเป็นคอลัมเดียวกัน

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1592
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้งาน Grid ในการจัดรูปภาพให้เรียงเป็นคอลัมเดียวกัน

โพสต์โดย Parichat » 27/06/2018 12:12 pm

การใช้งาน Grid ในการจัดรูปภาพให้เรียงเป็นคอลัมเดียวกัน

ในการจัดรูปภาพให้เรียงกันสวยๆบนเว็บไซต์เมื่อก่อนต้องใช้ Table ในการเข้ามาช่วยให้รูปภาพเรียงอยู่ในระนาบเดียวกันโดยในการใช้ Table จะไม่รองรับกับอุปกรณ์พวกสมาร์ทโฟน แท็บเล็ต แต่ในปัจจุบันเรามีตัวช่วยในการ

    ตัวอย่างการทำรูปภาพให้เรียงเป็นแถวเดียวกันดังรูปตัวอย่าง
    p1.jpeg
    p1.jpeg (18.9 KiB) เปิดดู 54 ครั้ง


    วิธีการทำให้รูปมาเรียงติดๆกัน
      1.เพิ่ม css ลงในแท็ก <head>

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

      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>


      2.เพิ่ม bootstrap ลงในแท็ก <head>

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

      <script src="js/jquery-3.3.1.slim.min.js" type="text/javascript"></script>
      <script src="js/popper.min.js" type="text/javascript"></script>
      <script src="js/bootstrap.min.js" type="text/javascript"></script>


      3.ในแท็ก <body>

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

      <div class="container-fluid">
                              <div class="row">
                                              <div class="col-lg-3">
                                                      <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/cat-3217406_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/cute-3206543_960_720.jpg" alt="" width="300" />
                                              </div>
                              </div>
                      </div>


      4.รวมโค้ด

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

      <html>
              <head>
                      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
                      <script src="js/jquery-3.3.1.slim.min.js" type="text/javascript"></script>
                      <script src="js/popper.min.js" type="text/javascript"></script>
                      <script src="js/bootstrap.min.js" type="text/javascript"></script>
              </head>
              <body>
                      <div class="container-fluid">
                              <div class="row">
                                              <div class="col-lg-3">
                                                      <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/animalia-3208412_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/cat-3217406_960_720.jpg" alt="" width="300" />
                                              </div>
                                              <div class="col-lg-3">
                                                      <img src="img/cute-3206543_960_720.jpg" alt="" width="300" />
                                              </div>
                              </div>
                      </div>
              </body>
      </html>

ในการทำรูปภาพให้เรียงติดกันไม่ใช่เรื่องยากอีกต่อไปแค่เราใช้ Bootstrap ในการเข้ามาช่วยให้รูปภาพของเราเรียงกันสวยงามเหมาะในการนำไปประยุกต์ใช้กับเว็บอื่นๆได้เพื่อจัดให้รูปภาพและข้อความเรียงกันสวยงามมากยิ่งขึ้นและง่ายกว่าเดิม

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Booststap
-บทเรียน Javascript
-บทเรียน CSS
-javascript แนะนำ โค้ด บทบทความ เทคนิค
-Jquery คู่มือ plugins ajax validate
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน