วิธีการสร้าง Grid Bootstarp ใน Figma
Grid Bootstarp ในโปรแกรม Figma สิ่งคำคัญในการสร้างเส้น Grid ต้องมี 3 อย่างคือ 1. contents 2. Grid Column 3. Gutter
contents คือขนาดความกว้างของหน้าจอ
Grid Column ประกอบประด้วย12ส่วน เรียกว่า Gutter
Gutter จะประกอบไปด้วย 2 ส่วน คือด้านซ้าย กับด้านขวา
วิธีการสร้าง
สร้างเฟรม
- สร้างเฟรมให้มีขนาด 1536x864
- สร้างกรอบให้มีขนาด 1320x316
- คลิกตรงเฟรม จากนั้นไปคลิกที่เครื่องหมายบากตรงคำว่า Layout Grid
- เลือกตรง Grid เป็น columns
- ให้ count = 12
- ให้ type เป็น Center
- ให้ Gutter = 24
- คลิกไปปุ่มที่วงกลมสีแดง จากนั้น ให้ width = 88
- คลิกไปที่ปุ่มสไตล์
- กดเพิ่มตรงเครื่องหมายบวก
- ตั้งชื่อ
- จากนั้นสร้างเฟรมใฟม่แล้วทำแบบนี้ไปเรื่อยๆ
การสร้างเส้น Grid เป็นการสร้างเพื่อไปออกแบบ Responsive website หรือเป็นการกำหนดเส้นให้เท่ากับเฟรม เพื่อไม่ให้เกิดการแสดงผลของข้อมูลผิดพลาดนั่นเอง
โดยเราสามารถไปดูขนาดเส้น Grid ที่ https://blog.getbootstrap.com/2020/06/1 ... p-5-alpha/
วิธีการสร้าง Grid Bootstarp ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: วิธีการสร้าง Grid Bootstarp ใน Figma
ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นและสรุป ไม่ครบ
สีของสัญลักษณ์ที่ใช้ผิด
มีบางภาพขนาดเกิน 800
ลิงค์เชื่อมส่วนเกริ่นและสรุป ไม่ครบ
สีของสัญลักษณ์ที่ใช้ผิด
มีบางภาพขนาดเกิน 800
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีการสร้าง Grid Bootstarp สำหรับสร้าง Responsive web sites ในโปรแกรม Figma
วิธีการสร้าง Grid Bootstarp สำหรับสร้าง Responsive web sites ในโปรแกรม Figma
Grid Bootstarp ในโปรแกรม Figma สิ่งคำคัญในการสร้างเส้น Grid ต้องมี 3 อย่างคือ 1. contents 2. Grid Column 3. Gutter
contents คือขนาดความกว้างของหน้าจอ
Grid Column ประกอบประด้วย12ส่วน เรียกว่า Gutter
Gutter จะประกอบไปด้วย 2 ส่วน คือด้านซ้าย กับด้านขวา
วิธีการสร้าง
สร้างเฟรม - สร้างเฟรมให้มีขนาด 1536x864 - สร้างกรอบให้มีขนาด 1320x316 - คลิกตรงเฟรม จากนั้นไปคลิกที่เครื่องหมายบากตรงคำว่า Layout Grid - เลือกตรง Grid เป็น columns - ให้ count = 12
- ให้ type เป็น Center
- ให้ Gutter = 24 - คลิกไปปุ่มที่วงกลมสีแดง จากนั้น ให้ width = 88 - คลิกไปที่ปุ่มสไตล์ - กดเพิ่มตรงเครื่องหมายบวก
- ตั้งชื่อ - จากนั้นสร้างเฟรมใฟม่แล้วทำแบบนี้ไปเรื่อยๆ
การสร้างเส้น Grid เป็นการสร้างเพื่อไป ออกแบบ ให้เป็น Responsive website หรือเป็นการกำหนดเส้นให้เท่ากับเฟรม เพื่อไม่ให้เกิดการแสดงผลของข้อมูลผิดพลาดนั่นเอง
โดยเราสามารถไปดูขนาดเส้น Grid ที่ https://blog.getbootstrap.com/2020/06/1 ... p-5-alpha/
Grid Bootstarp ในโปรแกรม Figma สิ่งคำคัญในการสร้างเส้น Grid ต้องมี 3 อย่างคือ 1. contents 2. Grid Column 3. Gutter
contents คือขนาดความกว้างของหน้าจอ
Grid Column ประกอบประด้วย12ส่วน เรียกว่า Gutter
Gutter จะประกอบไปด้วย 2 ส่วน คือด้านซ้าย กับด้านขวา
วิธีการสร้าง
สร้างเฟรม - สร้างเฟรมให้มีขนาด 1536x864 - สร้างกรอบให้มีขนาด 1320x316 - คลิกตรงเฟรม จากนั้นไปคลิกที่เครื่องหมายบากตรงคำว่า Layout Grid - เลือกตรง Grid เป็น columns - ให้ count = 12
- ให้ type เป็น Center
- ให้ Gutter = 24 - คลิกไปปุ่มที่วงกลมสีแดง จากนั้น ให้ width = 88 - คลิกไปที่ปุ่มสไตล์ - กดเพิ่มตรงเครื่องหมายบวก
- ตั้งชื่อ - จากนั้นสร้างเฟรมใฟม่แล้วทำแบบนี้ไปเรื่อยๆ
การสร้างเส้น Grid เป็นการสร้างเพื่อไป ออกแบบ ให้เป็น Responsive website หรือเป็นการกำหนดเส้นให้เท่ากับเฟรม เพื่อไม่ให้เกิดการแสดงผลของข้อมูลผิดพลาดนั่นเอง
โดยเราสามารถไปดูขนาดเส้น Grid ที่ https://blog.getbootstrap.com/2020/06/1 ... p-5-alpha/
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
โดย Jom07 » 01/03/2018 2:15 pm » ใน Python Knowledge - 0 ตอบกลับ
- 2333 แสดง
-
โพสต์ล่าสุด โดย Jom07
01/03/2018 2:15 pm
-
-
- 1 ตอบกลับ
- 1545 แสดง
-
โพสต์ล่าสุด โดย fonfonn
15/06/2023 10:29 am
-
- 0 ตอบกลับ
- 3763 แสดง
-
โพสต์ล่าสุด โดย abdkode
05/04/2019 1:46 pm
-
-
โพสต์ใหม่ การใช้งานแสดงสินค้าโดยใช้ Grid ใน Joomla
โดย Patipat » 24/07/2019 5:06 pm » ใน Joomla Developing Knowledge - 2 ตอบกลับ
- 638 แสดง
-
โพสต์ล่าสุด โดย Patipat
24/07/2019 7:10 pm
-
-
-
โพสต์ใหม่ การใช้งาน Grid ในการจัดรูปภาพให้เรียงเป็นคอลัมเดียวกัน
โดย Parichat » 27/06/2018 12:12 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 5078 แสดง
-
โพสต์ล่าสุด โดย Parichat
27/06/2018 12:12 pm
-
-
- 0 ตอบกลับ
- 1747 แสดง
-
โพสต์ล่าสุด โดย Parichat
10/01/2018 1:48 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 76