Asas Bermula


Apakah itu Foundation?

  • Yayasan ialah rangka kerja hadapan percuma untuk pembangunan pesat.

  • Yayasan termasuk templat reka bentuk HTML dan CSS, menyediakan pelbagai komponen UI di Web, seperti borang, butang, Tab, dsb. Pelbagai pemalam JavaScript juga disediakan.

  • Yayasan adalah mudah alih untuk mencipta halaman web responsif.

  • Foundation sesuai untuk pemula dan profesional.

  • Yayasan telah digunakan oleh Facebook, eBay, Samsung, Amazon, Disney, dll.


NoteApakah itu reka bentuk web responsif?
Note什么是响应式网页设计？

响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
Konsep reka bentuk Web Responsif ialah: Reka bentuk dan pembangunan halaman harus bertindak balas dan menyesuaikan dengan sewajarnya berdasarkan tingkah laku pengguna dan persekitaran peranti (platform sistem, saiz skrin, orientasi skrin, dll.).

Di mana hendak memuat turun Foundation?

Anda boleh mendapatkan Foundation dalam dua cara berikut:

1 . Muat turun versi terkini dari laman web rasmi: http://foundation.zurb.com/.

2. Gunakan CDN yang disediakan oleh laman web rasmi laman web php Cina (disyorkan):

<!-- fail css -->
<pautan rel="stylesheet " href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">

<!-- perpustakaan jQuery --> ;
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

<! -- Fail JavaScript -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- fail modenizr -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr. js"> </script>

CDN statik tapak ini adalah berdasarkan perkhidmatan Alibaba Cloud.
NoteFoundation 使用 CDN 的优势:
Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性

为什么使用 modernizr?
Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 - 让组件能在所有浏览器上正常运行。
NoteKelebihan Yayasan menggunakan CDN:<🎜>Yayasan menggunakan CDN untuk menambah baik tapak korporat (terutamanya (mengandungi sejumlah besar gambar dan halaman statik), dan sangat meningkatkan kestabilan sifat di atas<🎜><🎜>Mengapa menggunakan modernizr?<🎜>Sesetengahnya Komponen Yayasan menggunakan ciri HTML5 dan CSS3 yang canggih, tetapi tidak semua pelayar menyokongnya. Modernizr ialah perpustakaan JavaScript untuk mengesan ciri HTML5 dan CSS3 pelayar pengguna - membenarkan komponen berfungsi dengan betul merentas semua pelayar.

Buat halaman menggunakan Foundation

1. Tambah doctype HTML5

Foundation menggunakan elemen HTML dan atribut CSS, jadi anda perlu menambah doctype HTML5 pengisytiharan jenis dokumen.

Pada masa yang sama, kita boleh menetapkan lang atribut bahasa dan pengekodan aksara dokumen:

<!DOCTYPE html>
<html lang="zh -cn">
<head>
🎜>2. Foundation 5 mudah alih diutamakan


Foundation 5 ialah reka bentuk responsif untuk peranti mudah alih. Pada terasnya, rangka kerja ini diutamakan mudah alih.
Untuk memastikan halaman boleh diskalakan secara bebas, anda boleh menambah teg

berikut dalam elemen :

<meta name="viewport " content="width=device- width, initial-scale=1">

<head><meta>

lebar: Kawal saiz viewport, anda boleh menentukan nilai, jika 600 , atau nilai istimewa, seperti lebar peranti Adalah lebar peranti dalam piksel CSS pada penskalaan 100%.
skala awal: nisbah penskalaan awal, iaitu nisbah penskalaan apabila halaman dimuatkan buat kali pertama.

    • 3. Komponen Permulaan

  • Sesetengah komponen Foundation dibuka berdasarkan jQuery, seperti kotak modal, menu lungsur, dsb. Anda boleh menggunakan skrip berikut untuk memulakan komponen:

<

skrip

>
$(dokumen) .sedia (fungsi() { $(document).foundation();})</skrip

>

Halaman Asas AsasCara membuat halaman asas asas
Instance

<!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.php.cn/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.php.cn/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>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

←
→