วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify

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

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

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25363
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify ใน vue.js เป็นการออกแบบ โดยใช้ css ของ vuetify ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม และสามารถออกแบบให้เล่นได้กับทุกหน้าจอ

อันนี้จะเป็นตัว code ทั้งหมดนะคะ

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

    <v-footer padless>
      <v-card flat>
        <v-card-title>
        
            <v-row>
            
             <v-col cols="12" md="3" class="mx-9">
                <h6 class="font-weight-medium">แผนที่</h6>
              </v-col>

              <v-col cols="12" md="3" class="mx-9">
                <h6 class="font-weight-medium">ติดต่อเรา</h6>
              </v-col>

              <v-col cols="12" md="3" class="mx-9">
                <h6 class="font-weight-medium">ที่อยู่</h6>
             </v-col>
             
            </v-row>
            
        </v-card-title>
      </v-card>
    </v-footer>
    
อันนี้เป็นการอธิบายแยกย่อยนะคะ

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

  <v-row>
  </v-row>
v-row จะเป็น เหมือนไลน์บันทัดนะคะ คือจะทำให้ ทุกอย่างที่อยู่ใน v-row อยู่ในบันทัดเดียวกัน

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

 <v-col cols="12" md="3" class="mx-9">
                <h6 class="font-weight-medium">แผนที่</h6>
</v-col>
ในบันทัดหนึ่ง จะมีขนาดเป็น12 นะคะ ถ้าเกิน 12 ก็คือขึ้นบันทัดใหม่ค่ะ
ส่วน cols คือขนาดของหน้าจอ โทรศัพท์ ค่ะ
md คือขนาดของหน้าจอ โน๊ตบุ๊ค ค่ะ จริงๆจะมีหลายขนาด แต่ขอยกมาแค่ 2 ขนาดนะคะ
mx-9 คือให้ margin-right: 36px และ margin-left: 36px

ผลลัพธ์ :
CSS Knowledge-3.png
CSS Knowledge-4.png
CSS Knowledge-4.png (135.82 KiB) Viewed 8321 times
CSS Knowledge-5.png
CSS Knowledge-5.png (129.71 KiB) Viewed 8321 times


สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify viewtopic.php?f=73&t=67912
วิธีการ ใช้งาน vuetify คู่กับ vue.js viewtopic.php?f=73&t=67917
บุคคลทั่วไป

Re: วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify

โพสต์ที่ยังไม่ได้อ่าน โดย บุคคลทั่วไป »

มือใหม่ควรศึกษา vue หรือ jQuery ดี
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32