Thiết kế web đáp ứng - Khung công tác
Có rất nhiều CSS Framework 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 thiết kế đáp ứng là sử dụng biểu định kiểu đáp ứng, như W3.CSS
W3.CSS giúp bạn 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 khả năng phản hồi!
London
Luân Đôn là thành phố thủ đô của nước Anh.
Đây là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 13 triệu dân.
Paris
Paris là thủ đô của 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 Đại Tokyo, và là khu vực đô thị đông dân nhất trên thế giới.
Thí dụ
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>W3Schools 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>
Để tìm hiểu thêm về W3.CSS, hãy đọc Hướng dẫn về W3.CSS của chúng tôi .
Bootstrap
Một khuôn khổ phổ biến khác là Bootstrap. Nó sử dụng HTML và CSS để tạo các trang web đáp ứng:
Thí 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>
Để tìm hiểu thêm về Bootstrap, hãy đi tới Hướng dẫn về Bootstrap của chúng tôi .
Bạn đã từng nghe về W3Schools Spaces ? 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