Nếu bạn không muốn dùng Bootstrap nữa, thì UIkit là một CSS Front-end Framework rất đáng để tham khảo.
Cấu trúc cơ bản
Sau khi tải UIkit về, giải nén ra bạn sẽ được 2 thư mục css
và js
.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
</head>
<body>
<script src="js/uikit-icons.min.js"></script>
</body>
</html>
Hoặc bạn không cần tải gì cả bằng cách sử dụng CDN.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/css/uikit.min.css" integrity="sha512-uDhfxDqgELKjw67ZVvOCyWWD4eEORa5wjyGyytiThG9LFVK2F8wvYj7QGFpxNlFCyNqjO5PYCNjtVZhWrO2JuQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit.min.js" integrity="sha512-vKDeN+i81+kMaXLe0V9cAAFaYRsVbX61IV4B6JYZIGa8rM9cNlRrMqiKKe358+A3tpO9W8yjaxC3O/AVij3sog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit-icons.min.js" integrity="sha512-8CCEtD819VpG9jUuabTKr2vrM2CB8njTo+zpQN4DA1BQ6TEG6M4geGQHOP4jnILVXLOTFhDBCY7Gx0uevUHzqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Lưu ý: Bạn cần để tập tin uikit.min.js
trước </head>
, vì đây là tập tin hỗ trợ hiển thị các thành phần, để cuối trang trước </body>
sẽ gây ra lỗi Cumulative Layout Shift (CLS).
Các thành phần
UIkit có toàn bộ các thành phần của Bootstrap, và thậm chí có nhiều thành phần hơn.
- Accordion
- Alert
- Align
- Animation
- Article
- Background
- Badge
- Base
- Breadcrumb
- Button
- Card
- Close
- Column
- Comment
- Container
- Countdown
- Cover
- Description List
- Divider
- Dotnav
- Drop
- Dropbar
- Dropdown
- Dropnav
- Filter
- Flex
- Form
- Grid
- Heading
- Height
- Icon
- Iconnav
- Image
- Inverse
- Label
- Leader
- Lightbox
- Link
- List
- Margin
- Marker
- Modal
- Nav
- Navbar
- Notification
- Off-canvas
- Overlay
- Padding
- Pagination
- Parallax
- Placeholder
- Position
- Progress
- Scroll
- Scrollspy
- Search
- Section
- Slidenav
- Slider
- Slideshow
- Sortable
- Spinner
- Sticky
- Subnav
- SVG
- Switcher
- Tab
- Table
- Text
- Thumbnav
- Tile
- Toggle
- Tooltip
- Totop
- Transition
- Upload
- Utility
- Video
- Visibility
- Width
Nếu bạn đã biết sử dụng Bootstrap thì chắc chắn sẽ sử dụng được UIkit.
Chúc các bạn thành công!
Không có bình luận.