Share Thiết kế giao diện website theo phong cách material với thư viện Propeller

filiallion · 03/26/2019

Propeller là một thư viện CSS được phát triển dựa trên Bootstrap và theo phong cách material. Vì vậy, thư viện Propeller được kế thừa những thành phần, tính năng mà Bootstrap có cũng như khoắc lên mình giao diện đẹp mắt, hiện đại của material. Nếu như các bạn muốn sử dụng Bootstrap để thiết kế giao diện và cũng muốn một phong cách hiện đại thì Propeller là một thư viện tốt để làm điều đó.

Thư viện Propeller cung cấp cho các bạn hai lựa chọn, một là dưới dạng một theme giành cho Bootstrap và hai là một bộ thư viện đầy đủ hoặc cũng có thể là sử dụng theo từng thành phần mà các bạn muốn. Điều này rất hữu ích cho các bạn chỉ muốn xây dựng ứng dụng nhỏ gọn hoặc tích hợp nhiều thành phần của nhiều thư viện khác nhau mà không phải nạp toàn bộ thư viện làm giảm hiệu suất website.

Để sử dụng thư viện Propeller, các bạn truy cập địa chỉ https://propeller.in/get-started để tải và tích hợp vào website như sau:

HTML:

<!DOCTYPE html>
<html lang="en">
<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à các bạn có thể thiết kế một nút bấm chuyên nghiệp theo phong cách material như 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 tất cả các thành phần của thư viện Propeller tại địa chỉ https://propeller.in/get-started.

Share Thiết kế giao diện website theo phong cách material với thư viện Propeller

filiallion

Administrator