มูลนิธิ เป็นกรอบการตอบสนองอย่างเต็มที่ปลายด้านหน้าสำหรับนักพัฒนา, ผลิตโดย zurbei. It provides many tools for making mobile friendly websites and allows developer to create front end code faster and better. มันเป็นโครงการที่มาเปิด. มูลนิธิ เอ็มไอทีได้รับใบอนุญาต และอิสระที่จะใช้ในสิ่งที่คุณต้องการ.
มูลนิธิส่วนใหญ่ประกอบด้วย HTML, CSS และ jQuery ตามแม่แบบการออกแบบที่ใช้เทคโนโลยีที่ทันสมัยและการปฏิบัติและเข้ากันได้กับเบราว์เซอร์ที่สำคัญทั้งหมด. พูดคุยเกี่ยวกับรุ่นของมูลนิธิ, รุ่นเสถียรล่าสุด มูลนิธิ 5 ที่ปล่อยออกมา December 12, 2014 สร้างโดย zurbei.
ให้เราได้ดูที่จุดที่แตกต่างกันกล่าวถึงด้านล่าง.
- รุ่นก่อนหน้า มูลนิธิ 2 เป็นโอเพนซอร์สและการออกแบบที่ตอบสนองและการปล่อยตัวใน October 2011.
- The มูลนิธิ 3 ให้รูปแบบสำหรับองค์ประกอบของหน้าการจัดรูปแบบและช่วยให้การพัฒนารูปแบบการตอบสนองและได้รับการปล่อยตัว February 2013.
- The มูลนิธิ 4 เป็นเรื่องเกี่ยวกับการเขียนโปรแกรมอย่างชาญฉลาดและเป็นวิธีการที่มือถือครั้งแรกสำหรับอุปกรณ์โทรศัพท์มือถือและเพิ่มหน้าเว็บสำหรับหน้าจอขนาดใหญ่และได้รับการปล่อยตัว พฤศจิกายน 2013.
รู้เบื้องต้นเกี่ยวกับมูลนิธิ 5:
The มูลนิธิ 5 จะเรียกว่าเป็น "มูลนิธิเพื่อการเว็บไซต์"ซึ่งรวมถึงสามรุ่นของมูลนิธิเช่น มูลนิธิเพื่อการปพลิเคชัน, มูลนิธิเพื่อการเว็บไซต์ และ มูลนิธิเพื่ออีเมล์. มันถูกเรียกว่าเป็น "กรอบปลายด้านหน้าที่ทันสมัยที่สุดในโลก" ใช้นับล้านของนักพัฒนาและเว็บไซต์.
ปล่อย V5 ล่าสุดนำการปรับปรุงที่ดีบางอย่างและจำนวนมากของการแก้ไขที่สำคัญ. มันค่อนข้างคล้ายกับรุ่น 4, แต่มีการปรับปรุงประสิทธิภาพการทำงานและเครื่องมือสำหรับนักพัฒนา.
- มูลนิธิ 5 มี jQuery 2 และลบออกการสนับสนุนของ Zepto ซึ่งอยู่ในรุ่น 4 โดยการทำให้ประสิทธิภาพการทำงานที่ดีกว่าสำหรับทั้งสก์ท็อปและโทรศัพท์มือถือของผู้ใช้.
- v5is ตอนนี้เข้ากันได้กับ Sass 3.4. การปรับปรุงในเมนูแบบเลื่อนลงซึ่งปิดโดยอัตโนมัติเมื่อมีการคลิกลิงก์.
- ปุ่มสปลิตในขณะนี้สามารถรองรับ 2 เหตุการณ์ที่แตกต่างกัน.
- accordions สามารถใช้ <ul> องค์ประกอบแทน <DL> องค์ประกอบ.
- แม่แบบใหม่ที่สามารถใช้ได้กับ v5 สำหรับการสร้างต้นแบบได้เร็วขึ้น.
- zurbei ที่เพิ่ม Libsass (ภาษาก่อนการประมวลผลสำหรับ CSS) ซึ่งช่วยเพิ่มประสิทธิภาพการรวบรวม.
ดาวน์โหลดมูลนิธิ 5:
ในการเริ่มต้นการทำงานกับมูลนิธิ, ครั้งแรกที่เราจะต้องดาวน์โหลดทุกรหัสที่มาจากแพคเกจการเชื่อมโยง: <ชื่อ =”ที่ http://foundation.zurb.com/develop/download.html” href =”http://foundation.zurb.com/develop/download.html"” target =”_ blank”> ดาวน์โหลดมูลนิธิ </a>
เมื่อคุณคลิกที่ปุ่มดาวน์โหลดมูลนิธิ, คุณจะถูกนำไปยังหน้าดาวน์โหลดอย่างเป็นทางการตามที่แสดงในภาพด้านล่าง:
Figure 1: หน้าดาวน์โหลดของมูลนิธิ
เมื่อคุณอยู่ในหน้านี้, คุณสามารถดูมีสี่ประเภทของตัวเลือกการดาวน์โหลด.
- สมบูรณ์:มันช่วยให้คุณสามารถดาวน์โหลดทุกอย่างในกรอบในที่เรียบง่าย, CSS วานิลลาและ JS ที่มูลนิธิ 5 มีให้.
- สำคัญ:ตัวเลือกนี้จะทำให้คุณมีคุณสมบัติที่สำคัญเช่นการพิมพ์, ปุ่มตาราง, เปิดเผยและแลกเปลี่ยน.
- กำหนดเอง: จะช่วยให้การสร้างสร้างแบบกำหนดเองตามความต้องการของคุณ. จะช่วยให้สี CSS เริ่มต้นที่กำหนดเองและขนาดที่สำคัญเช่นความกว้างสูงสุด. มันจะนำคุณไปสู่รูปแบบการปรับแต่งที่คุณสามารถเปลี่ยนการตั้งค่าเริ่มต้นก่อนที่จะดาวน์โหลดกรอบ.
- Sass:มันถูกสร้างขึ้นโดยใช้ preprocessor Sass CSS และคุณสามารถทำงานกับมันในทางเดียวกัน.
สำหรับบทความนี้, เราจะไปดาวน์โหลดตัวเลือกแรกนั่นคือ. “สมบูรณ์"ตัวเลือกที่ช่วยให้การดาวน์โหลดทุกอย่างในกรอบ. มันจะดาวน์โหลดในรูปแบบซิป, แกะซิปและคุณจะเห็นโฟลเดอร์ที่ระบุไว้ด้านล่างและไฟล์:
- โฟลเดอร์ Style Sheet: มันมี foundation.css, foundation.min และ ทำให้ปกติ ไฟล์.
- โฟลเดอร์ JavaScript: มันมีหลายปลั๊กอินเพื่อให้การทำงานของมูลนิธิถูกต้อง. ซึ่งจะรวมถึง มูลนิธิ โฟลเดอร์ซึ่งมีทั้งหมดปลั๊กอินในรูปแบบ JS, ผู้ขาย และโฟลเดอร์ foundation.min js ไฟล์.
- โฟลเดอร์ภาพ: ซึ่งจะรวมถึงภาพที่มีความจำเป็นในหน้าเว็บที่ถูกเก็บไว้ในโฟลเดอร์นี้.
- index.html: มันเป็นโครงสร้างตัวอย่างซึ่งสามารถนำมาใช้เป็นโครงสร้างพื้นฐานของหน้าเว็บในโครงการ.
องค์ประกอบในมูลนิธิ 5:
ตะแกรง
มันคือ 12 คอลัมน์ระบบกริดซึ่งในแต่ละแถวแบ่งออกเป็น 12 คอลัมน์ที่สนับสนุนเกือบทุกขนาดหน้าจอของอุปกรณ์. มันมี 3 ประเภทของการเรียนที่เฉพาะเจาะจงสำหรับการสร้างการเรียนคือการตอบสนอง .ขนาดใหญ่-X, .กลาง-X และ .ขนาดเล็ก-X.
- .ขนาดใหญ่-X สำหรับอุปกรณ์ขนาดขนาดใหญ่เช่นเดสก์ท็
- .กลาง-X สำหรับอุปกรณ์ขนาดกลางเช่นแท็บเล็ต
- .ขนาดเล็ก-X สำหรับอุปกรณ์ขนาดเล็กเช่นโทรศัพท์มือถือ
Navigation
นำร่องใช้ในการสร้างรูปแบบอุปกรณ์ข้ามเช่นแถบด้านบนที่มีเมนูแบบเลื่อนลง, ปุ่ม, แถบค้นหา, NAV ด้าน, NAV ย่อย, เลขหน้าและปิดผ้าใบนำทาง.
รูปแบบ
รูปแบบที่สร้างขึ้นด้วยการรวมกันของรูปแบบรูปแบบและระบบกริด. มูลนิธินำระบบที่มีประสิทธิภาพสำหรับรูปแบบรูปแบบที่คุณสามารถสร้างรูปแบบได้อย่างรวดเร็วและง่ายดายด้วยกรอบนี้.
ปุ่ม
ปุ่มองค์ประกอบการโต้ตอบของเว็บไซต์หรือแอปของคุณและใช้งานง่ายและปรับแต่ง. มูลนิธิให้บริการประเภทที่แตกต่างกันของรูปแบบปุ่มสำหรับการโต้ตอบกับผู้ใช้. คุณต้องเพิ่มปุ่ม "" ชั้นจะทอดสมอ, การป้อนข้อมูลหรือ div องค์ประกอบที่จะเห็นมันกลายเป็นรุ่งโรจน์ปุ่มรูปแบบมูลนิธิ. โดยใช้ปุ่ม, คุณสามารถบรรลุรูปแบบที่แตกต่างกันเพื่อตอบสนองความต้องการของคุณ. มันมีรูปทรงที่แตกต่างกันเช่นตาราง, โค้งมนเล็กน้อย, โค้งมนอย่างสมบูรณ์, ใหญ่, ฯลฯ กลาง.
วิชาการพิมพ์
มันให้สะอาด, รูปแบบเริ่มต้นที่น่าสนใจและง่ายสำหรับทุกองค์ประกอบพื้นฐานในการพิมพ์. จะใช้ขนาดโมดูลสำหรับจัดแต่งทรงผมหัวและองค์ประกอบย่อยส่วนหัว. มันเป็นเรื่องง่ายที่จะเปลี่ยนขนาดของข้อความในหน้าเว็บของเรา. รายการที่มีประโยชน์สำหรับการกำหนดรายการของสิ่งที่มูลนิธิ 5 ให้รูปแบบการเรียงลำดับและสั่งรายการที่แตกต่างกันในการดำเนินงานนี้.
เปิดเผย Modal
คุณสามารถสร้างกิริยาหรือ pop up หน้าต่างโดยใช้ jQuery เปิดเผยกิริยา Plug-in ซึ่งจะทำให้มันง่ายมากสำหรับการสร้างต้นแบบและการผลิต.
โคจร
มันเป็นที่มีประสิทธิภาพและตอบสนองต่อการเลื่อนภาพที่ช่วยให้การสร้างภาพและเนื้อหาที่เลื่อนได้อย่างง่ายดาย.
โครงสร้างพื้นฐานของมูลนิธิ:
ตอนนี้ให้เราได้ดูที่โครงสร้างพื้นฐานของการวางรากฐานในโค้ดด้านล่าง.
[รหัส]
<!DOCTYPE html ที่>
<html ที่>
<หัว>
<เมตา charset = "UTF-8" >
<ชื่อ meta = "วิวพอร์ตเนื้อหา" = "width = ความกว้างของอุปกรณ์, เริ่มต้นขนาด = "1.0">
<หัวข้อ>มูลนิธิ 5 โครงสร้าง</หัวข้อ>
<link rel = "สไตล์ชีต" href = "CSS / Normalize.css">
<link rel = "สไตล์ชีต" href = "CSS / foundation.css">
<link rel = "สไตล์ชีต" href = "CSS / app.css">
<สคริปต์ src = "JS / ผู้ขาย / modernizr.js"></สคริปต์>
</หัว>
<ตัว>
// รหัสของคุณที่นี่
<สคริปต์ src = "JS / ผู้ขาย / jquery.js"></สคริปต์>
<สคริปต์ src = "JS / foundation.min.js"></สคริปต์>
<สคริปต์>
$(เอกสาร).มูลนิธิ ();
</สคริปต์>
</ตัว>
</html ที่>
[/รหัส]
ลองดูว่าโครงสร้างนี้ประกอบด้วย:
แท็ก meta
แท็ก meta จะรวมอยู่ในแท็กหัวตามที่ปรากฏในโครงสร้าง.
[รหัส]
<เมตา charset = "UTF-8" >
<ชื่อ meta = "วิวพอร์ตเนื้อหา" = "width = ความกว้างของอุปกรณ์, เริ่มต้นขนาด = "1.0">
[/รหัส]
ในเมตาแท็กครั้งแรก UTF-8ถูกนำมาใช้ในการกำหนดชุดตัวอักษรที่อยู่ในเว็บไซต์. แท็กที่สองจะใช้ในการปรับขนาดความกว้างของหน้าเว็บกับความกว้างของอุปกรณ์ที่จะดูใน.
ไฟล์ CSS
จะทำงานร่วมกับมูลนิธิ 5, คุณต้องรวมไฟล์ต่อไปนี้ CSS ในไฟล์ HTML.
[รหัส]
<link rel = "สไตล์ชีต" href = "CSS / Normalize.css">
<link rel = "สไตล์ชีต" href = "CSS / foundation.css">
[/รหัส]
คุณควรจะรวมไฟล์ CSS ตามที่ปรากฏในคำสั่งดังกล่าวข้างต้น. Otherwise, ไฟล์ Normalize.css ตั้งค่ารูปแบบ CSS ของมูลนิธิ. แฟ้ม foundation.css ทำหน้าที่เป็นรากฐานฐาน. หากคุณต้องการที่จะรวมไฟล์ CSS ที่กำหนดเองของคุณ, แล้วเขียนที่แสดงด้านล่าง:
[รหัส]
<link rel = "สไตล์ชีต" href = "CSS / app.css">
[/รหัส]
ไฟล์ JavaScript
คุณต้องรวม 3 ไฟล์ JavaScript ที่แตกต่างกันในไฟล์ HTML ของคุณ: modernizer.js, jquery.js และ foundation.js. คนแรกที่สามารถรวมอยู่ในแท็กหัวและสองคนสุดท้ายสามารถรวมอยู่ในแท็กร่างกาย.
The modernizr.js ตรวจพบ HTML5 และ CSS3 คุณสมบัติในเบราว์เซอร์ของผู้ใช้. The นักปฏิรูป จำเป็นต้องมีก่อนที่ร่างกายมีการแสดงผลด้วยเหตุนี้มันจะรวมอยู่ในแท็กหัว. เราจะต้องมี jquery.js ก่อนที่ไฟล์ JavaScript ของมูลนิธิ. The foundation.js โหลด JavaScript ห้องสมุดมูลนิธิที่โหลดโดยอัตโนมัติแกนมูลนิธิและทุก JavaScript ปลั๊กอิน.
ตัวอย่างพื้นฐาน:
ลองมาดูตัวอย่างหนึ่งขั้นพื้นฐานโดยใช้โครงสร้างนี้ซึ่งจะสร้างแถวและคอลัมน์ที่เป็นส่วนหนึ่งของ มูลนิธิ 5 ตะแกรง ระบบ.
[รหัส]
<!HTML DOCTYPE>
<html ที่>
<หัว>
<charset = meta”UTF-8″ />
<ชื่อ meta =”วิวพอร์ต” เนื้อหา =”width = ความกว้างของอุปกรณ์, เริ่มต้นขนาด = 1.0″ />
<หัวข้อ>มูลนิธิ 5</หัวข้อ>
<link rel =”สไตล์ชีต” href =”CSS / foundation.css” />
<สคริปต์ src =”JS / ผู้ขาย / modernizr.js”></สคริปต์>
</หัว>
<ตัว>
<div>
<div>
<H4>นี่คือตัวอย่างตารางพื้นฐานของคุณ</H4>
<div>
<div>
<div>
<P>สวัสดีชาวโลก!!! นี้เป็นส่วนสิบสองคอลัมน์</P>
</div>
</div>
</div>
<div>
<div>
<div>
<P>หกคอลัมน์</P>
</div>
</div>
<div>
<div>
<P>หกคอลัมน์</P>
</div>
</div>
</div>
<div>
<div>
<div>
<P>สี่เสา</P>
</div>
</div>
<div>
<div>
<P>สี่เสา</P>
</div>
</div>
<div>
<div>
<P>สี่เสา</P>
</div>
</div>
</div>
<div>
<div>
<div>
<P>สามคอลัมน์</P>
</div>
</div>
<div>
<div>
<P>สามคอลัมน์</P>
</div>
</div>
<div>
<div>
<P>สามคอลัมน์</P>
</div>
</div>
<div>
<div>
<P>สามคอลัมน์</P>
</div>
</div>
</div>
</div>
</div>
<สคริปต์ src =”JS / ผู้ขาย / jquery.js”></สคริปต์>
<สคริปต์ src =”JS / foundation.min.js”></สคริปต์>
<สคริปต์>
$(เอกสาร).มูลนิธิ();
</สคริปต์>
</ตัว>
</html ที่>
[/รหัส]
เปิดไฟล์ HTML ข้างต้นในเบราว์เซอร์ของคุณ, คุณจะเห็นผลลัพธ์ที่แสดงในภาพด้านล่าง:
Summary:
ในบทความนี้เราได้กล่าวถึงภาพรวมของมูลนิธิ 5 กรอบที่ใช้สำหรับ UI development.Foundation 5 เป็นกรอบที่ตอบสนองต่อปลายด้านหน้าได้รับความนิยมมากในการสร้างเว็บไซต์และแอปได้อย่างรวดเร็ว. นอกจากนี้ยังมีคุณลักษณะขั้นสูงสำหรับการสร้างต้นแบบอย่างรวดเร็ว. รุ่นใหม่ของกรอบนี้มีเสถียรภาพมากที่สุดและสะดวกสบายมากขึ้นที่จะใช้.
หวังว่าคุณจะได้มีความเข้าใจที่ชัดเจนที่จะเริ่มต้นการทำงานกับกรอบนี้
