Materialize - Thiết lập môi trường

Trong chương này, chúng ta sẽ thảo luận về các khía cạnh khác nhau của việc thiết lập môi trường đồng nhất cho Vật chất hóa.

Dùng thử Tùy chọn trực tuyến

Chúng tôi đã thiết lập môi trường Lập trình Materialize trực tuyến để bạn có thể biên dịch và thực thi tất cả các ví dụ có sẵn trực tuyến. Nó mang lại cho bạn niềm tin vào những gì bạn đang đọc và cho phép bạn xác minh các chương trình bằng các tùy chọn khác nhau. Hãy sửa đổi bất kỳ ví dụ nào và thực hiện trực tuyến.

Hãy thử ví dụ sau bằng trình biên dịch trực tuyến của chúng tôi có sẵn tại CodingGround
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>
Đối với hầu hết các ví dụ được đưa ra trong hướng dẫn này, bạn sẽ tìm thấy tùy chọn Dùng thử trong phần mã trang web của chúng tôi ở góc trên cùng bên phải sẽ đưa bạn đến trình biên dịch trực tuyến. Vì vậy, chỉ cần tận dụng nó và tận hưởng việc học của bạn.

Làm thế nào để sử dụng Materialize?

Có hai cách để sử dụng Materialize -

Local Installation - Bạn có thể tải xuống materialize.min.css và materialize.min.js trên máy cục bộ của bạn và đưa nó vào mã HTML của bạn.

CDN Based Version - Bạn có thể bao gồm materialize.min.css và materialize.min.js tệp vào mã HTML của bạn trực tiếp từ Mạng phân phối nội dung (CDN).

Cài đặt cục bộ

Đi đến http://materializecss.com/getting-started.html để tải xuống phiên bản mới nhất có sẵn.
Sau đó, đặt tải xuống materialize.min.js tệp trong thư mục của trang web của bạn, ví dụ: / js và materialize.min.css trong / css.

Thí dụ

Bao gồm cái css và js trong tệp HTML của bạn như sau.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau.

Phiên bản dựa trên CDN

Bạn có thể bao gồm materialize.min.js và materialize.min.css tệp vào mã HTML của bạn trực tiếp từ Mạng phân phối nội dung (CDN). cdnjs.cloudflare.com cung cấp nội dung cho phiên bản mới nhất.

Chúng tôi đang sử dụng cdnjs.cloudflare.com phiên bản CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Viết lại ví dụ trên bằng cách sử dụng materialize.min.css và materialize.min.js từ cdnjs.cloudflare.com CDN.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: