มูลนิธิเริ่มต้น
มูลนิธิคืออะไร?
- มูลนิธิเป็นกรอบ front-end ฟรีสำหรับการพัฒนาอย่างรวดเร็ว
- มูลนิธิมี HTML และ CSS แม่แบบการออกแบบมีความหลากหลายขององค์ประกอบ UI บนเว็บเช่นรูปแบบ, ปุ่ม, แท็บและอื่น ๆ JavaScript นอกจากนี้ยังมีความหลากหลายของปลั๊กอิน
- มูลนิธิมือถือครั้งแรกคุณสามารถสร้างหน้าเว็บที่ตอบสนอง
- มูลนิธิเพื่อการเริ่มต้นและผู้เชี่ยวชาญ
- มูลนิธิได้ถูกนำมาใช้ใน Facebook, อีเบย์, ซัมซุง, Amazon, ดิสนีย์และอื่น ๆ
 | การออกแบบเว็บที่ตอบสนองคืออะไร? การออกแบบเว็บที่ตอบสนอง (การออกแบบเว็บที่ตอบสนอง) ปรัชญา: การออกแบบและพัฒนาของหน้าควรจะเป็นคำตอบที่เหมาะสมและปรับขึ้นอยู่กับพฤติกรรมของผู้ใช้และสิ่งแวดล้อมอุปกรณ์ (แพลตฟอร์มขนาดหน้าจอวางหน้าจออื่น ๆ ) |
|---|
ดาวน์โหลดมูลนิธิที่ไหน?
คุณสามารถเป็นสองวิธีที่จะได้รับมูลนิธิ:
1. ดาวน์โหลดรุ่นล่าสุดจากเว็บไซต์อย่างเป็นทางการ: http://foundation.zurb.com/
2 ใช้เว็บไซต์อย่างเป็นทางการนี้กวดวิชาให้ CDN (แนะนำ):
<!-- css 文件 --> <link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
อาลีเมฆที่ใช้บริการเว็บไซต์ CDN แบบคงที่
| มูลนิธิใช้ข้อได้เปรียบ CDN: มูลนิธิใช้ CDN ปรับปรุงเว็บไซต์ของ บริษัท (โดยเฉพาะอย่างยิ่งมีจำนวนมากของภาพและหน้าคงสถานที่) ความเร็วในการเข้าถึงและช่วยปรับปรุงเสถียรภาพของธรรมชาติดังกล่าวข้างต้นของเว็บไซต์ Modernizr ทำไม? บางองค์ประกอบมูลนิธิใช้ที่ทันสมัย HTML5 และ CSS3 คุณสมบัติเทียบก่อน แต่เบราว์เซอร์ไม่ได้ทั้งหมดสนับสนุน Modernizr ถูกนำมาใช้ในการตรวจสอบของผู้ใช้เบราว์เซอร์ HTML5 และ CSS3 คุณสมบัติของห้องสมุด JavaScript - ช่วยให้ชิ้นส่วนเพื่อให้ทำงานได้อย่างถูกต้องบนเบราว์เซอร์ |
|---|
หน้าการสร้างโดยใช้มูลนิธิ
1. เพิ่ม DOCTYPE HTML5
องค์ประกอบมูลนิธิใช้แอตทริบิวต์ HTML และ CSS ดังนั้นคุณจึงจำเป็นต้องเพิ่ม HTML5 DOCTYPE ประเภทของเอกสารประกาศ
ในขณะเดียวกันเราสามารถตั้งค่าภาษาและการเข้ารหัสอักขระแอตทริบิวต์แฟ้ม Lang:
<! DOCTYPE html>
<html lang = "zh-CN ">
<head>
<Meta charset = "UTF-8 ">
</ head>
</ html>
<html lang = "zh-CN ">
<head>
<Meta charset = "UTF-8 ">
</ head>
</ html>
2. มูลนิธิ 5 มือถือครั้งแรก
มูลนิธิ 5 สำหรับอุปกรณ์มือถือออกแบบที่ตอบสนอง จัดลำดับความสำคัญคือการย้ายกรอบหลัก
เพื่อให้แน่ใจว่าหน้าเว็บที่เป็นอิสระในการซูมเข้า <head> เพิ่มองค์ประกอบต่อไปนี้ใน <meta> แท็ก:
<ชื่อ Meta = "วิวพอร์ต" เนื้อหา = "width = อุปกรณ์ความกว้างมาตราส่วนเริ่มต้น = 1">
- ความกว้าง: ควบคุมขนาดของวิวพอร์ตที่มีค่าสามารถระบุถ้า 600 หรือค่าพิเศษเช่นอุปกรณ์ที่มีความกว้างของความกว้างของอุปกรณ์ (พิกเซล CSS ปรับขนาดถึง 100% ของเวลา)
- เริ่มต้นขนาด: ขนาดเริ่มต้นนั่นคือเมื่อระดับเวลาในการโหลดหน้าแรก
3. เตรียมส่วนประกอบ
บางส่วนจะขึ้นอยู่กับ jQuery มูลนิธิเปิดเช่น: กล่องกิริยาเมนูแบบเลื่อนลง คุณสามารถใช้สคริปต์ต่อไปนี้เพื่อเริ่มต้นส่วนประกอบ:
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
หน้าพื้นฐาน
วิธีการสร้างหน้าพื้นฐาน:
<!DOCTYPE html>
<html>
<head>
<title>Foundation Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>
<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<div class="panel">
<h1>Foundation 页面</h1>
<p>重置窗口大小，查看效果！</p>
<button type="button" class="button small">I Like It!</button>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<h3>Column 1</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
<div class="medium-4 columns">
<h3>Column 2</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
<div class="medium-4 columns">
<h3>Column 3</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
</div>
</body>
</html>