Utilities trong bootstrap 5
Utilities trong Bootstrap 5 cho bạn rất nhiều class tiện ích/trợ giúp để tạo kiểu các phần tử thật nhanh mà không cần dùng tới code CSS.
Bài 28: Offcanvas trong Bootstrap 5
![]()
Chiều cao![]()
Khoảng cách
Đường viền
Dùng class border để thêm hoặc loại bỏ các đường viền khỏi một phần tử:
Code mẫu:
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Đường viền</h2>
<p>Dùng class border để thêm hoặc loại bỏ các đường viền khỏi một phần tử trên Sinitc.com:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
</div>
</body>
</html>
![]()
Độ rộng đường viền
Dùng .border-1 tới .border-5 để thay đổi độ rộng của đường viền:
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Thay đổi độ rộng đường viền trên Sinitc.com</h2>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
</div>
</body>
</html>
![]()
Màu đường viền
Tô màu đường viền với bất kỳ class màu đường viền theo ngữ cảnh:
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Thay đổi các kiểu màu đường viền trên Sinitc.com</h2>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
![]()
Bán kính đường viền
Thêm các góc bo tròn vào một phần tử với class rounded:
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container mt-3">
Bo tròn các góc của một phần tử bằng class rounded để khoanh tròn các ý chính trên Sinitc.com</p>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<br>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
</div>
</body>
</html>
![]()
Float và Clearfix
Chuyển một phần tử sang phải với class .float-end hoặc sang trái với .float-start và loại bỏ các float bằng class .clearfix:
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Float</h2>
<p>Chuyển phần tử sang phải bằng .float-end class hoặc sang trái bằng .float-start, xóa float bằng class .clearfix.</p>
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
</div>
</body>
</html>
![]()
Float theo từng màn hình
Chuyển một phần tử sang trái hoặc phải theo độ rộng màn hình,v ới class float có tính đáp ứng (.float-*-start|end - nơi * là sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) hoặc xxl (>=1400px)):
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
Code mẫu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Float đáp ứng</h2>
<p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự thay đổi.</p>
<div class="clearfix">
<div class="float-sm-end">Chuyển sang phải trên màn hình nhỏ hoặc lớn hơn</div><br>
<div class="float-md-end">Chuyển sang phải trên màn hình trung bình trở lên/div><br>
<div class="float-lg-end">Chuyển sang phải cho màn hình lớn</div><br>
<div class="float-xl-end">Chuyển sang phải cho màn hình cực lớn</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Không float</div>
</div>
</div>
</body>
</html>
![]()
Căn giữa
Căn giữa một phần tử với class .mx-auto (thêm căn lề tự động trái và phải):
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Căn giữa</h1>
<p>Tự động căn giữa một phần tử bằng class .mx-auto:</p>
<div class="mx-auto bg-warning" style="width:150px">Căn giữa</div>
</div>
</body>
</html>
![]()
Độ rộng
Đặt chiều rộng của một phần tử với class w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100):
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>
</body>
</html>
Chiều cao
Thiết lập chiều cao của một phần tử với class h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Height Utilities</h1>
<p>Set the height of an element with the w-* classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
<div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>
</body>
</html>
Khoảng cách
Bootstrap 5 có một loạt các class tiện ích chỉnh margin và padding đáp ứng. Chúng hoạt động cho tất cả các điểm breakpoint: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) hoặc xxl (>=1400px)):
Các class được dùng ở định dạng: {property}{sides}-{size} cho xs và {property}{sides}-{breakpoint}-{size} cho sm, md, lg, xl và xxl.
Property là một trong số:
m-marginp-padding
Sides là một trong số:
t- đặtmargin-tophoặc padding-topb- đặtmargin-bottomhoặc padding-bottoms- đặtmargin-lefthoặc padding-lefte- đặtmargin-righthoặc padding-rightx- đặt cả haipadding-leftvà padding-righthoặcmargin-leftvàmargin-righty- đặt cả haipadding-topvàpadding-bottomhoặcmargin-topvàmargin-bottomblank- đặt mộtmarginhoặc padding trên tất cả các mặt của phần tử.
Size là một trong số:
0- đặtmarginhoặcpaddingsang01- đặtmarginhoặcpaddingsang.25rem2- đặtmarginhoặcpaddingsang.5rem3- đặtmarginhoặcpadding sang1rem4- đặtmarginhoặcpaddingsang1.5rem5- đặtmarginhoặcpaddingsang3remauto- đặtmarginthànhauto
Code mẫu
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Giãn cách các phần tử bằng class {property}{sides}-{breakpoint}-{size}. Bỏ qua breakpoint nếu bạn muốn phần đệm hoặc lề hoạt động trên mọi kích thước màn hình.</p>
<div class="pt-4 bg-warning">Tôi chỉ có một padding ở trên (1.5rem)</div>
<div class="p-5 bg-success">Chỉ có một padding trên toàn bộ slide (3rem)</div>
<div class="m-5 pb-5 bg-info">Một căn lề trên tất cả các trang (3rem) và 1 padding ở dưới cùng (3rem)</div>
</div>
</body>
</html>
Ví dụ về kiểu giãn cách khác
.m-# / m-*-# |
Căn lề tất các mặt |
.mt-# / mt-*-# |
Căn lề trên |
.mb-# / mb-*-# |
Căn lề dưới |
.ms-# / ms-*-# |
Căn lề trái |
.me-# / me-*-# |
Căn lề phải |
.mx-# / mx-*-# |
Căn lề trái và phải |
.my-# / my-*-# |
Căn lề trên và dưới |
.p-# / p-*-# |
Padding cho toàn bộ các mặt |
.pt-# / pt-*-# |
Padding phía trên |
.pb-# / pb-*-# |
Padding phía dưới |
.ps-# / ps-*-# |
Padding bên trái |
.pe-# / pe-*-# |
Padding bên phải |
.py-# / py-*-# |
Padding phía trên và dưới |
.px-# / px-*-# |
Padding bên trái và phải |
Đổ bóng
Dùng class shadow- để thêm bóng đổ vài một phần tử:
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Shadow</h1>
<div class="shadow-none p-4 mb-4 bg-light">Không shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Shadow nhỏ</div>
<div class="shadow p-4 mb-4 bg-white">Shadow mặc định</div>
<div class="shadow-lg p-4 mb-4 bg-white">Shadow lớn</div>
</div>
</body>
</html>
![]()
Căn chỉnh theo chiều dọc
Dùng class align- để thay đổi căn chỉnh các phần tử (chỉ hoạt động trên các phần tử ô nội tuyến, khối nội tuyến, bảng nội tuyến và bảng). Code mẫu:
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Tỷ lệ khung hình
Tạo video hay slideshow đáp ứng dựa trên chiều rộng của mục chính. Thêm class .ratio cùng với tỷ lệ khung hình bạn chọn .ratio-* vào phần tử cha, và thêm video hoặc iframe nhúng bên trong nó:
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Tỷ lệ khung hình</h2>
<p>Tạo một video đáp ứng và chia tỷ lệ phù hợp với phần tử gốc.</p>
<h2>Aspect ratio 1:1</h2>
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>
![]()
Hiển thị
Dùng class .visible hoặc .invisible để kiểm soát khả năng hiển thị của các nhân tố. Lưu ý: Những class này không thay đổi giá trị hiển thị CSS. Chúng chỉ thêm visibility:visible hoặc visibility:hidden:
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
Đóng icon
Dùng class .btn-close để tạo kiểu cho icon đóng. Class này thường được dùng cho các thông báo và modal.
Ví dụ:
<button type="button" class="btn-close"></button>
Screenreader
Dùng class .visually-hidden để ẩn một phần tử trên tất cả thiết bị, ngoại trừ trình đọc màn hình:
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
Màu sắc
Dưới đây là danh sách tất cả class màu văn bản và background:
text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body và .text-light:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Màu text theo ngữ cảnh</h2>
<p class="text-muted">Sinitc.com.</p>
<p class="text-primary">Sinitc.com.</p>
<p class="text-success">Sinitc.com.</p>
<p class="text-info">Sinitc.com.</p>
<p class="text-warning">Sinitc.com.</p>
<p class="text-danger">Sinitc.com.</p>
<p class="text-secondary">Sinitc.com.</p>
<p class="text-dark">Sinitc.com.</p>
<p class="text-body">Sinitc.com.</p>
<p class="text-light">Sinitc.com.</p>
<p class="text-white">Sinitc.com.</p>
</div>
</body>
</html>
![]()
Màu nền
Class cho màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Background theo ngữ cảnh</h2>
<p>Dùng các class backgroudn theo ngữ cảnh để cung cấp ý nghĩa qua màu sắc.</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
</body>
</html>
Class .bg-color ở trên không hoạt động tốt với text. Tuy nhiên, bạn có thể dùng class .text-color để màu text phù hợp với từng màu nền. Bạn cũng có thể sử dụng các class .text-bg-color và Bootstrap sẽ tự động xử lý màu text phù hợp cho từng màu background.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Màu nền tương phản với màu text</h2>
<p class="text-bg-primary">Thông tin quan trọng.</p>
<p class="text-bg-success">Thông báo thành công.</p>
<p class="text-bg-info">Đại diện cho một số thông tin.</p>
<p class="text-bg-warning">Đại diện cho cảnh báo.</p>
<p class="text-bg-danger">Cảnh báo nguy hiểm.</p>
<p class="text-bg-secondary">Sinitc.com.</p>
<p class="text-bg-dark">Kênh thông tin công nghệ.</p>
<p class="text-bg-light">Màu nền xám nhạt.</p>
</div>
</body>
</html>
Trên đây là tất cả những điều bạn cần biết về các tiện ích trong Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Chủ đề Tương tự
- Tags:
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!
S - Tech
Điện máy
Khoa học
Cuộc sống
Ô tô, Xe máy
Tiện ích
Công nghệ
Video
