Hướng dẫn cụ thể hóa
Materialize là một thư viện thành phần giao diện người dùng được tạo bằng CSS, JavaScript và HTML. Vật chất hóa các thành phần giao diện người dùng giúp xây dựng các trang web và ứng dụng web hấp dẫn, nhất quán và chức năng, đồng thời tuân thủ các nguyên tắc thiết kế web hiện đại như tính di động của trình duyệt, tính độc lập của thiết bị và sự xuống cấp duyên dáng. Nó giúp tạo ra các trang web nhanh hơn, đẹp và đáp ứng. Nó được lấy cảm hứng từ Google Material Design.
Hướng dẫn này dành cho các chuyên gia muốn tìm hiểu kiến thức cơ bản về Materialize và cách sử dụng nó để tạo các trang web và ứng dụng nhanh hơn, đẹp và đáp ứng. Hướng dẫn này giải thích tất cả các khái niệm cơ bản của Materialize.
Trước khi tiếp tục với hướng dẫn này, bạn nên hiểu cơ bản về HTML, CSS, JavaScript, Mô hình đối tượng tài liệu (DOM) và bất kỳ trình soạn thảo văn bản nào. Ngoài ra, nó sẽ hữu ích nếu bạn biết các ứng dụng dựa trên web hoạt động như thế nào.
Đố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 Try-itLựa chọn. Sử dụng tùy chọn này để thực hiện các chương trình Materialize của bạn tại chỗ và tận hưởng việc học của bạn. Hãy thử ví dụ sau bằng cách sử dụngTry-it tùy chọn có sẵn ở góc trên cùng bên phải của hộp mã mẫu 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 = "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>