Share Tạo giao diện website với thư viện Propeller

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Đối với các bạn lập trình giao diện web thì khái niệm material design và thư viện Bootstrap có thể đã quá quen thuộc. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện để tạo ra giao diện web theo phong cách material design dựa trên Bootstrap đó là thư viện Propeller.

Các bạn lưu ý, để sử dụng các thành phần JavaScript của Propeller thì các bạn phải tích hợp thư viện jQuery vào website.

Các bạn truy cập địa chỉ https://propeller.in/get-started/#download để tải thư viện Propeller. Trong gói thư viện Propeller các bạn tải về cũng sẽ có sẵn thư viện Bootstrap kèm theo.

Các bạn sử dụng thư viện Propeller với nội dung mã lệnh như sau:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/propeller.min.css" rel="stylesheet">
<title>Propeller</title>
</head>
<body>
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/propeller.min.js"></script>
</body>
</html>
Và để tạo ra một nút bấm với hiệu ứng ripple các bạn xem ví dụ sau:
HTML:
<button type="button" class="btn btn-primary pmd-ripple-effect">Primary</button>
Các bạn có thể tìm hiểu thêm các thành phần của thư viện Propeller tại địa chỉ https://propeller.in/get-started/#components.
 
Back
Top