Share Tạo giao diện ứng dụng di động trên nền web với thư viện Ratchet

filiallion · 01/10/2019

Hiện nay việc thế kế giao diện website tương thích với các thiết bị di động gần như là yêu cầu bắt buộc và tất nhiên có nhiều thư viện hỗ trợ rất tốt việc này như Bootstrap, UIkit... Tuy nhiên, các thư viện này hỗ trợ chung cho thiết kế giao diện web chứ không phải là chuyên biệt cho di động. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện chỉ với mục đích thiết kế giao diện ứng dụng trên nền web giành riêng cho di động, hỗ trợ tốt phong cách thiết kế của hệ điều hành Android và iOS, thư viện mà tôi nhắc đến đó là Ratchet.

Các bạn tải thư viện Ratchet tại địa chỉ https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip.

Trong gói thư viện Ratchet các bạn quan tâm tới 2 tập tin là ratchet.css (Hoặc ratchet.min.css), ratchet.js (Hoặc ratchet.min.js) và thư mục fonts chứa các phông chữ.

Các bạn tích hợp thư viện Ratchet vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/ratchet.min.css" rel="stylesheet">
<script src="path/to/ratchet.min.js"></script>

Để sử dụng thư viện Ratchet, các bạn phải lưu ý cấu trúc trang HTML như mẫu sau:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="path/to/ratchet.min.css" rel="stylesheet">
<script src="path/to/ratchet.min.js"></script>
<title>Ratchet</title>
</head>
<body></body>
</html>

Thư viện Ratchet cung cấp đầy đủ các thành phần thường được sử dụng trên di động như title bar, tab bar, table view, card, button...

Ví dụ sau đây tôi sẽ tạo ra một title bar đơn giản:

HTML:

<header class="bar bar-nav">
    <h1 class="title">Gextend</h1>
</header>

Các bạn có thể tìm hiểu thêm về các thành phần khác của thư viện Ratchet tại địa chỉ http://goratchet.com/components.

Share Tạo giao diện ứng dụng di động trên nền web với thư viện Ratchet

filiallion

Administrator