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

filiallion · 01/14/2019

Trong chuyên mục HTML & CSS tôi đã giới thiệu với các bạn nhiều thư viện dùng để thiết kế giao diện website như UIkit, Flexgrid, Ratchet và gần đây nhất là Bulma. Tất cả các thư viện này đều cùng một mục đích là cung cấp cho các bạn thiết kế giao diện nhiều thành phần xây dựng sẵn để các bạn có thể tạo ra các trang web một cách nhanh chóng, đẹp mắt và chuyên nghiệp. Trong nhóm thư viện này, có một thư viện khác cũng làm nhiệm vụ tương tự đó chính là Metro, thư viện Metro cũng như những thư viện khác mà tôi đã giới thiệu với các bạn chỉ khác là phong cách thiết kế của Metro là theo giao diện Windows 8.

Các bạn tải thư viện Metro tại địa chỉ https://metroui.org.ua/download.html.

Và sử dụng thư viện như trang HTML mẫu sau:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="path/to/metro-all.min.css" rel="stylesheet">
<title>Metro</title>
</head>
<body>
<script src="path/to/jquery.min.js"></script>
<script src="path/to/metro.min.js"></script>
</body>
</html>

Các bạn lưu ý là thư viện Metro yêu cầu phải tích hợp thư viện jQuery 3.x như trang HTML mẫu tôi trình bày ở trên.

Bây giờ để tạo một nút bấm theo phong cách Metro của Windows 8 các bạn xem ví dụ mẫu như sau:

HTML:

<button class="button primary">Primary</button>

Các bạn có thể tìm hiểu thêm các thành phần khác của thư viện Metro tại địa chỉ https://metroui.org.ua/intro.html.

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

filiallion

Administrator