สร้าง UI ที่ใช้การ์ดกับมูลนิธิ

Sep 16, 2025
วิธีการ

ตามบัตร เค้าโครงเว็บไซต์ ได้ยึดครองเว็บ ได้รับความนิยมจาก Pinterest, Twitter, Facebook และ Google การ์ดได้กลายเป็นรูปแบบการออกแบบที่ดีสำหรับการใช้งานที่แตกต่างกันมากมาย

มันไม่ยากที่จะเห็นว่าทำไม การ์ดทำงานได้อย่างสมบูรณ์ภายใน การออกแบบเว็บตอบสนอง . เป็นหน่วยที่มีอยู่ในตัวเองพวกเขาสามารถเคลื่อนย้ายสับและผสมกับประเภทเนื้อหาที่แตกต่างกัน พวกเขายังตอบสนองง่ายในขนาดหน้าจอที่แตกต่างจากคอลัมน์เดียวบนอุปกรณ์มือถือไปยังหลายคอลัมน์บนอุปกรณ์ขนาดใหญ่

  • ขั้นตอนไปยังเค้าโครงเว็บไซต์ที่สมบูรณ์แบบ

ทีม Zurb ใช้เลย์เอาต์ที่ใช้บัตรในงานออกแบบมานานหลายปี Frontend Framework, Foundation, Squest ให้ผู้ออกแบบเว็บที่มีเครื่องมือที่พวกเขาต้องการออกแบบและสร้างเว็บไซต์ที่ตอบสนองได้อย่างรวดเร็วโดยรวมถึงส่วนประกอบแบบแยกส่วนและยืดหยุ่นที่หลากหลาย เวอร์ชัน 6.3 เพิ่มในคอลเล็กชันการสร้างนี้นำมาซึ่งการใช้งาน Off-Canvas ที่ตอบสนองต่อการตอบสนอง / แท็บตอบสนองและส่วนประกอบการ์ดใหม่ที่ทรงพลัง

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

01. ตั้งค่าสภาพแวดล้อมการพัฒนา

ขั้นตอนแรกคือการตั้งค่าสภาพแวดล้อมการพัฒนา สำหรับการกวดวิชานี้เราจะใช้สภาพแวดล้อมการพัฒนาโหนดที่ใช้โหนดดังนั้นคุณต้องติดตั้ง Node.js. รายละเอียดในการทำเช่นนี้ขึ้นอยู่กับสภาพแวดล้อมของคุณดังนั้นตรวจสอบ ที่นี่ เพื่อค้นหาว่าต้องทำอะไร

เมื่อคุณติดตั้งโหนดติดตั้งให้ติดตั้ง Foundation CLI โดยใช้ การติดตั้ง NPM -G Foundation-CLI ซึ่งจะทำให้ง่ายต่อการตั้งค่าโครงการมูลนิธิใหม่

02. เริ่มโครงการใหม่

มาสร้างโครงการใหม่ขึ้นอยู่กับเทมเพลต Zurb เรียกใช้คำสั่ง มูลนิธิใหม่ Net-Magazine-Tutorial เลือก 'เว็บไซต์ (Foundation for Sites)', 'Net-Magazine-Tutorial' จากนั้นเทมเพลต Zurb สิ่งนี้จะตั้งค่าเทมเพลตโครงการตามฐานรากพร้อมกับการสร้างระบบและเซิร์ฟเวอร์การพัฒนา

เทมเพลตมาพร้อมกับหน้าตัวอย่างใน src / pages / index.html . สำหรับความเรียบง่ายเราจะลบตัวอย่างนั้นและแทนที่ด้วยที่ว่างเปล่า & lt; ส่วนหัว & gt; & lt; / ส่วนหัว & gt; เพื่อเริ่มต้นจากการสร้างขีดฆ่า UI ที่ใช้บัตรของเรา วิ่ง การเริ่มต้น NPM จากบรรทัดคำสั่งเพื่อเรียกใช้เซิร์ฟเวอร์การพัฒนาและคุณควรเห็นหน้า HTML ที่เปลือยเปล่าพร้อมการ์ด

03. สร้างการ์ด

ตอนนี้ถึงเวลาที่จะสร้างการ์ดใบแรกของเราแล้ว สำหรับตอนนี้เราเพิ่งวางไว้ในส่วนที่มีชั้นเรียน .Cards-Container . เมื่อสร้างการ์ดโดยใช้ Foundation มีสามคลาสหลักที่ต้องระวัง: .Card , .Card-section และ .Card-divider . สำหรับผู้ใช้ขั้นสูงเหล่านี้แต่ละคนสอดคล้องกับ SCSS Mixin ( ภาชนะบรรจุการ์ด , ส่วนบัตร และ ตัวแบ่งบัตร .

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

การ์ดง่ายๆที่มีมูลนิธิ Yeti บนมันส่วนหัวและส่วนท้ายที่สร้างขึ้นโดยใช้คลาส Divider การ์ด

แต่สำหรับการกวดวิชานี้เราจะใช้คลาสเริ่มต้นเพื่อความเรียบง่าย ที่ .Card คลาสคือภาชนะ; บัตรทุกใบจะมีชีวิตอยู่ภายใน .Card . สิ่งนี้จะกำหนดสิ่งต่าง ๆ เช่นพรมแดนเงาและการระบายสีเริ่มต้น

ที่ .Card-section คลาสกำหนดบล็อกเนื้อหาที่ขยายได้ซึ่งคุณอาจใส่เนื้อหาในขณะที่ .Card-divider คลาสกำหนดบล็อกที่ไม่ขยายตัวเช่นส่วนท้ายส่วนหัวหรือตัวแบ่ง ลองใช้คลาสเหล่านี้ทั้งหมดเพื่อสร้างการ์ดขั้นพื้นฐานแรกของเรา 

 & lt; หัว & gt;
  & lt; div class = "คอลัมน์แถว" & gt;
    & lt; h3 & gt; การ์ดเป็นที่ดีที่สุด & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / ส่วนหัว & gt;
& lt; section class = "cards-container" & gt;
  & lt; div class = "การ์ด" & gt;
    & lt; div class = "divider การ์ด" & gt;
      & lt; H4 & GT; Yeti Header & Lt; / H4 & GT;
    & lt; / div & gt;
    & lt; div class = "การ์ดส่วน" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/asseets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "divider การ์ด" & gt;
      & lt; P & GT; Footer และ LT; / P & GT;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / section & gt;

04. เพิ่มสไตล์องค์ประกอบ

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

เพิ่มไฟล์ _card.scss ถึง SRC / สินทรัพย์ / SCS / ส่วนประกอบ / การระบุ ความกว้างสูงสุด: 300px สำหรับ .Card และรวมไฟล์ใน CSS หลักของเราโดยการเพิ่ม @import components / card; ถึง SRC / ASSETS / SCSS / APP.SCSS .

05. ทำให้การ์ดของคุณนำมาใช้ใหม่ได้

ในการสร้างเค้าโครงที่ทำซ้ำได้ด้วยการ์ดหลายใบเราจะต้องการให้การ์ดของเราสามารถนำมาใช้ใหม่ได้ที่เราสามารถเสียบเข้ากับซ้ำแล้วซ้ำอีก เทมเพลต Zurb ที่เราใช้สำหรับการกวดวิชานี้ใช้ภาษาเทมเพลตที่เรียกว่า Handlebars ซึ่งรวมถึงความสามารถในการสร้างบางส่วนหรือบล็อกรหัสที่ใช้ซ้ำได้

เพื่อย้ายการใช้งานบัตรของเราลงในบางส่วนเพียงแค่ตัดและวาง .Card ส่วนประกอบที่เราสร้างขึ้นในไฟล์ SRC / บางส่วน , พูด SRC / Partials / Basic-card.html . จากนั้นคุณสามารถรวมเนื้อหานั้นได้โดยเพียงแค่เพิ่มบรรทัด {{& gt; การ์ดพื้นฐาน}} ในไฟล์ดัชนีของคุณ

06. เริ่มสร้างเค้าโครงของคุณ

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

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

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

ด้วยกริดบล็อกที่เรียบง่ายเรามีรูปแบบที่สวยงามและปรับขนาดได้สำหรับการ์ดให้มากที่สุดเท่าที่เราต้องการรวมไว้

Block Grids เป็นวิธีจดชวเลขในการสร้างคอลัมน์ขนาดเท่ากันและเพื่อให้ตัวเองมีความยืดหยุ่นและอิสระในการเพิ่มเนื้อหาที่ไม่ จำกัด จำนวนและให้วางอยู่ในคอลัมน์ที่เท่ากัน คุณเพียงแค่เพิ่มคลาสลงในแถวแล้วเพิ่มคอมโพเนนต์คอลัมน์ให้มากที่สุดเท่าที่คุณต้องการ มูลนิธิจะวางพวกเขาให้คุณอย่างเรียบร้อยและสะอาด

เนื่องจากเราคาดว่าจะมีจำนวนการ์ดที่มีขนาดใหญ่มากและมีการเปลี่ยนแปลงซึ่งเหมาะอย่างยิ่งสำหรับวัตถุประสงค์ของเรา ลองตั้งค่านี้อย่างรวดเร็วในตารางสี่คอลัมน์และเพิ่มไพ่ไม่กี่โหล สำหรับตอนนี้เราจะกังวลเกี่ยวกับหน้าจอขนาดใหญ่เท่านั้นดังนั้นเราจะใช้เพียงแค่ใช้ . large-up-4 ชั้นเรียนเป็นแถว 

 & lt; section class = "cards-container" & gt;
& lt; div class = "แถวใหญ่ up-4" & gt;
{{#Repeat 24}}
& lt; div class = "คอลัมน์" & gt;
{{& gt; การ์ดพื้นฐาน}}
& lt; / div & gt;
{{/ ซ้ำ}}
& lt; / div & gt;
& lt; / section & gt;

07. ทำให้การตอบสนอง

ต่อไปขอพิจารณาสิ่งที่เราต้องการเกิดขึ้นในขนาดหน้าจอที่แตกต่างกัน มูลนิธิมาพร้อมกับจุดพักขนาดเล็กขนาดกลางและขนาดใหญ่ที่สร้างขึ้นเพื่อให้เราสามารถใช้คลาส Block-Grid ที่แตกต่างกันสำหรับแต่ละเบรกพอยต์เพื่อเลื่อนสิ่งต่าง ๆ ไปรอบ ๆ

ลองใส่หนึ่งใบต่อแถวบนหน้าจอมือถือและสามต่อแถวบนแท็บเล็ตโดยการเพิ่มชั้นเรียน . Small-up-1 และ . Medium-up-3 ในแถว ถ้าเราทำสิ่งนี้และลบการหยุด ความกว้างสูงสุด ทรัพย์สินที่เราใส่ _card.scss . เรามีเค้าโครงที่ตอบสนองอย่างสวยงามที่ดูดีในทุกขนาดหน้าจอ

08. ลองใช้ไพ่ใหม่บางประเภท

Combine different styles of card to build your layout

รวมสไตล์การ์ดที่แตกต่างกันเพื่อสร้างเค้าโครงของคุณ

ทีนี้เรามากระจายชุดไพ่ของเราอีกประเภทหนึ่งคือภาพถ่ายขอบที่บริสุทธิ์ ส่วนบัตรและวงเวียนการ์ดมีการขยายตามค่าเริ่มต้น แต่มีเนื้อหาที่ขอบไปยังขอบเราสามารถใส่ภาพภายในการ์ดได้โดยตรง ลองเพิ่มสิ่งนี้เป็น Photo-card.html บางส่วนใน SRC / บางส่วน . 

 & lt; div class = "card" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. แนะนำ Flexbox

มีหลายร้อยวิธีที่เป็นไปได้ที่เราสามารถรวบรวมไพ่ได้ - สำหรับแรงบันดาลใจบางอย่างคุณสามารถตรวจสอบรากฐาน ที่เก็บ Cardpack . แต่ลองไปหาวิธีที่เราจัดการเค้าโครงเมื่อเรามีการ์ดขนาดแตกต่างกัน หากคุณใส่การ์ดภาพถ่ายบางส่วนลงในเค้าโครงสลับกับการ์ดพื้นฐานที่เราทำมาก่อนเราจะจบลงด้วยประสบการณ์ที่ขรุขระเพราะความสูงของเราแตกต่างกัน สิ่งนี้อาจดีหรือเราอาจต้องการปรับเค้าโครงของเราเพื่อชดเชย

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

The Foundation Card Pack ให้ชุดการ์ด Flexbox ที่สร้างขึ้นล่วงหน้าเพื่อเพิ่มระดับเกมไพ่ของคุณ

สำหรับการกวดวิชานี้เราจะชดเชยโดยใช้เทคนิคการเลย์เอาต์ CSS ใหม่ที่เราโปรดปราน - FlexBox มูลนิธิมาพร้อมกับโหมด Flexbox สำหรับกริดของมัน เพื่อเปิดใช้งานคุณเพียงแค่ต้องเปิด SRC / ASSETS / SCSS / APP.SCSS แสดงความคิดเห็น @ รวมมูลนิธิกริด; และ @Include Foundation-Float ชั้นเรียน; และไม่มีการใส่เครื่องหมาย @Include Foundation-Flex-Grid; และ @Include Foundation-Flex-Classes; .

10. ทำให้การ์ดของคุณมีความสูงเท่ากัน

ด้วยการเปิดใช้งานคลาส Flexbox นั้นง่ายที่จะทำให้การ์ดของเรามีความสูงเท่ากัน ครั้งแรกเราสามารถทำให้คอลัมน์ของเรามีความยืดหยุ่นพ่อแม่โดยการเพิ่ม .flex-container ชั้นเรียน นี่เป็นทางลัดการสร้างต้นแบบสำหรับการเพิ่ม จอแสดงผล: Flex; ทรัพย์สินให้พวกเขา เมื่อเราทำเช่นนี้ไพ่ทั้งหมดจะกลายเป็นความสูงเท่ากัน แต่เนื่องจากองค์ประกอบของเด็ก Flex หดตัวโดยค่าเริ่มต้นการ์ดของเราบางส่วนจะแคบ

เราสามารถแก้ไขปัญหานี้ได้เพียงแค่บอกองค์ประกอบเหล่านั้นที่จะเติบโต สิ่งนี้ทำโดยการกำหนดเป้าหมายพวกเขาด้วย CSS และให้พวกเขา Flex-Grow: 1; หรือเพื่อความเรียบง่ายในขณะที่การสร้างต้นแบบเพียงแค่เพิ่มชั้นเรียน .flex-child-grow . เมื่อทั้งหมดนี้เสร็จสิ้นการ์ดของเราทั้งหมดเติมคอลัมน์และจะมีความสูงเท่ากัน

บทความนี้มีจุดเด่นในตอนแรก นิตยสารสุทธิ ปัญหา 293 ซื้อที่นี่ หรือ สมัครสมาชิก NET ที่นี่ .

ชอบสิ่งนี้? ลองเหล่านี้ ...

  • 10 เหตุผลที่คุณควรใช้การออกแบบอะตอม
  • สร้างและเคลื่อนไหว Molygons SVG
  • เทคนิค CSS เพื่อปฏิวัติรูปแบบของคุณ

วิธีการ - บทความยอดนิยม

วิธีทำความสะอาด Paintbrushes: คู่มือที่ชัดเจน

วิธีการ Sep 16, 2025

(เครดิตรูปภาพ: Sonny Flanaghan) การเรียนรู้วิธีทำควา�..

8 คุณสมบัติ CSS ที่ล้ำสมัย (และวิธีการใช้งาน)

วิธีการ Sep 16, 2025

(เครดิตรูปภาพ: Getty Images) CSS มีการพัฒนาอย่างต่อเน..

วิธีการสร้างหน้าการ์ตูน

วิธีการ Sep 16, 2025

บทช่วยสอนนี้จะแสดงวิธีสร้างหน้าการ์ตูน แม้ว�..

วิธีการรหัสเอฟเฟกต์ข้อความสมาร์ทด้วย CSS

วิธีการ Sep 16, 2025

[ภาพ: เด็กกลาง] ลิงก์แบบโรลโอเวอร์เป็นวิธี�..

วิธีการวาดตัวเลขที่สมจริงยิ่งขึ้น

วิธีการ Sep 16, 2025

ในการสอนการวาดรูปนี้เราจะมุ่งเน้นไปที่ลำตัว..

สร้างการตกแต่งภายในที่อบอุ่นโดยใช้ Line Art

วิธีการ Sep 16, 2025

สำหรับการประชุมเชิงปฏิบัติการนี้ฉันจะสร้างพ..

6 วิธีในการเพิ่มความเร็วในการสร้างแบบจำลองของคุณ

วิธีการ Sep 16, 2025

เวิร์กโฟลว์ที่มีประสิทธิภาพมากขึ้นคือประโยช..

สร้างสภาพแวดล้อมเกมใน Unreal Engine 4

วิธีการ Sep 16, 2025

การใช้ unreal Engine 4 ของฉันโครงการหยุดสุดท้ายเป็นตัว�..

หมวดหมู่