Thiết kế web đáp ứng - Khung
Có rất nhiều Khung CSS miễn phí cung cấp Thiết kế đáp ứng.
Sử dụng W3.CSS
Một cách tuyệt vời để tạo ra một thiết kế đáp ứng là sử dụng biểu định kiểu đáp ứng, như W3.CSS
W3.CSS giúp dễ dàng phát triển các trang web trông đẹp mắt ở mọi kích thước!
Bản trình diễn W3.CSS
Thay đổi kích thước trang để xem phản hồi!
London
London là thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với khu vực đô thị hơn 13 triệu dân.
Paris
Paris là thủ đô của nước Pháp.
Khu vực Paris là một trong những trung tâm dân số lớn nhất ở châu Âu, với hơn 12 triệu dân.
Tokyo
Tokyo là thủ đô của Nhật Bản.
Đây là trung tâm của Khu vực Greater Tokyo và là khu vực đô thị đông dân nhất thế giới.
Ví dụ
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.example.com.vn/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>Example.com.vn Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html> Hãy tự mình thử »Để tìm hiểu thêm về W3.CSS, hãy đọc Hướng dẫn W3.CSS của chúng tôi.
Khởi động
Một framework phổ biến khác là Bootstrap. Nó sử dụng HTML và CSS để tạo các trang web phản hồi:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 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-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html> Hãy tự mình thử »Để tìm hiểu thêm về Bootstrap, hãy truy cập Hướng dẫn Bootstrap của chúng tôi.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng
