วิธีการ ใช้ 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-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-4.png (135.82 KiB) Viewed 8933 times
- CSS Knowledge-5.png (129.71 KiB) Viewed 8933 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
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify ใน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/5087-vue.html]vue.js[/url] เป็นการออกแบบ โดยใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] ของ vuetify ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม และสามารถออกแบบให้เล่นได้กับทุกหน้าจอ
อันนี้จะเป็นตัว code ทั้งหมดนะคะ
[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>
[/code]
อันนี้เป็นการอธิบายแยกย่อยนะคะ
[code]
<v-row>
</v-row>[/code]
v-row จะเป็น เหมือนไลน์บันทัดนะคะ คือจะทำให้ ทุกอย่างที่อยู่ใน v-row อยู่ในบันทัดเดียวกัน
[code] <v-col cols="12" md="3" class="mx-9">
<h6 class="font-weight-medium">แผนที่</h6>
</v-col>
[/code]
ในบันทัดหนึ่ง จะมีขนาดเป็น12 นะคะ ถ้าเกิน 12 ก็คือขึ้นบันทัดใหม่ค่ะ
ส่วน cols คือขนาดของหน้าจอ โทรศัพท์ ค่ะ
md คือขนาดของหน้าจอ โน๊ตบุ๊ค ค่ะ จริงๆจะมีหลายขนาด แต่ขอยกมาแค่ 2 ขนาดนะคะ
mx-9 คือให้ margin-right: 36px และ margin-left: 36px
ผลลัพธ์ :
[attachment=2]CSS Knowledge-3.png[/attachment]
[attachment=1]CSS Knowledge-4.png[/attachment]
[attachment=0]CSS Knowledge-5.png[/attachment]
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify https://www.mindphp.com/forums/viewtopic.php?f=73&t=67912
วิธีการ ใช้งาน vuetify คู่กับ vue.js https://www.mindphp.com/forums/viewtopic.php?f=73&t=67917