Share Sử dụng thư viện UIkit để tạo giao diện website chuyên nghiệp

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Bài viết này tôi sẽ giới thiệu với các bạn một thư viện để thiết kế giao diện website có tên là UIkit. Mặc dù UIkit không phổ bến bằng Bootstrap nhưng thư viện UIkit cũng cung cấp đầy đủ các tính năng để thiết kế giao diện website một cách nhanh chóng, hiệu quả và chuyên nghiệp với nhiều hiệu ứng chuyển động đẹp. UIkit cung cấp cho các bạn một tập hợp các thành phần về HTML, CSS và JavaScript với việc sử dụng dễ dàng cũng như khả năng tuỳ biến cao. Ở mức độ phát triển, các bạn còn có thể mở rộng, tuỳ biến các thành phần của UIkit. Hiện tại, UIkit là một thư viện mã nguồn mở nên các bạn có thể thoải mái chỉnh sửa và sử dụng.

Để tải về sử dụng thư viện UIkit, các bạn truy cập địa chỉ https://getuikit.com/download để tải. Đối với các bạn muốn tuỳ chỉnh hay phát triển thêm các thành phần của UIkit thì các bạn có thể tải toàn bộ mã nguồn của UIkit tại địa chỉ https://github.com/uikit/uikit.

Việc tích hợp thư viện UIkit vào website khá đơn giản, các bạn thực hiện theo nội dung mã lệnh như sau:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="path/to/uikit.min.css" rel="stylesheet">
<script src="path/to/uikit.min.js"></script>
<script src="path/to/uikit-icons.min.js"></script>
<title>Gextend</title>
</head>
<body></body>
</html>
Và bây giờ tôi có thể tạo ra một vài nút bấm như sau:
HTML:
<button class="uk-button uk-button-default"></button>
<button class="uk-button uk-button-primary"></button>
<button class="uk-button uk-button-secondary"></button>
Như tôi đã nói ở trên, thư viện UIkit có đầy đủ các thành phần tương tự như Bootstrap nên các bạn có thể sử dụng UIkit để tạo ra các giao diện website phục vụ các dự án của các bạn. Các bạn có thể tìm hiểu các thành phần của thư viện UIkit tại địa chỉ https://getuikit.com/docs.
 
Back
Top