Latest web development tutorials

Yayasan mulai

Apa Foundation?

  • Yayasan adalah kerangka front-end gratis untuk perkembangan pesat.
  • Yayasan berisi HTML dan CSS desain template, menawarkan berbagai komponen UI di Web, seperti formulir, tombol, Tab, dan sebagainya. JavaScript juga menyediakan berbagai plug-in.
  • Yayasan mobile pertama, Anda dapat membuat halaman web responsif.
  • Yayasan untuk pemula dan profesional.
  • Yayasan telah digunakan di Facebook, eBay, Samsung, Amazon, Disney dan sebagainya.

catatanApa desain web responsif?
Responsif Web Design (desain web responsif) filsafat adalah: desain dan pengembangan halaman harus respon yang tepat dan menyesuaikan berdasarkan perilaku pengguna dan perangkat lingkungan (platform, ukuran layar, orientasi layar, dll).

Ambil Yayasan Dimana?

Anda bisa dua cara untuk mendapatkan Foundation:

1. Download versi terbaru dari situs resmi: http://foundation.zurb.com/ .

2, menggunakan situs resmi tutorial ini memberikan CDN (dianjurkan): 

<!-- 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>

Ali awan berbasis CDN layanan situs statis.

catatanYayasan menggunakan keuntungan CDN:
Yayasan menggunakan CDN meningkatkan situs perusahaan (khususnya, mengandung banyak gambar dan halaman statis situs) kecepatan akses, dan sangat meningkatkan stabilitas sifat di atas situs

Mengapa modernizr?
Beberapa komponen Yayasan menggunakan cutting-edge HTML5 dan CSS3 fitur dibandingkan sebelumnya, tapi tidak semua browser mendukung. Modernizr digunakan untuk mendeteksi browser pengguna HTML5 dan CSS3 fitur perpustakaan JavaScript - memungkinkan komponen untuk berjalan dengan baik di semua browser.

Membuat halaman menggunakan Yayasan

1. Tambahkan doctype HTML5

elemen dasar yang menggunakan HTML dan CSS atribut, sehingga Anda perlu menambahkan HTML5 doctype jenis dokumen deklarasi.

Sementara itu, kita dapat mengatur bahasa dan karakter encoding atribut dokumen lang:

<! DOCTYPE html>
<Html lang = "zh-cn ">
<Head>
<Meta charset = "utf-8 ">
</ Kepala>
</ Html>

2. Yayasan 5 mobile pertama

Yayasan 5 untuk perangkat mobile desain responsif. Prioritasnya adalah untuk memindahkan kerangka inti.

Untuk memastikan halaman gratis untuk memperbesar <head> menambahkan unsur-unsur berikut dalam <meta> tag:

<Meta name = "viewport" content = "width = device-width, awal skala = 1">
  • width: mengontrol ukuran viewport, nilai dapat ditentukan, jika 600, atau nilai khusus, seperti perangkat-lebar lebar perangkat (dalam piksel CSS skala 100% dari waktu).
  • awal-skala: skala awal, yaitu ketika beban halaman skala waktu pertama.

3. Komponen Inisialisasi

Beberapa komponen didasarkan pada jQuery Yayasan terbuka, seperti: kotak modal, menu pull-down. Anda dapat menggunakan script berikut untuk menginisialisasi komponen:

<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>

Halaman Yayasan dasar

Cara membuat halaman fondasi dasar: 

<!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>

Coba »