Thiết kế Web tương tác HTML

Thiết kế Web Responsive là gì?

  • RWD là viết tắt của Responsive Web Design (Thiết kế Web Responsive)
  • RWD có thể truyền trang web với kích thước thay đổi
  • RWD là bắt buộc đối với máy tính bảng và thiết bị di động

Tạo thiết kế response của riêng bạn

Một cách để tạo thiết kế response là tự tạo nó:

!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com Demo</h1>
<h2>Điều chỉnh kích thước trang web响应 này!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London là thành phố thủ đô của Anh.</p>
<p>Đó là thành phố đông dân nhất ở Vương quốc Anh,</p>
<p>với khu vực đô thị hơn 13 triệu người.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,</p>
và khu vực đô thị đông dân nhất trên thế giới.</p>
</div>
</body>
</html>

Thử ngay

Sử dụng Bootstrap

Một cách khác để tạo thiết kế响应 là sử dụng các khung CSS sẵn có.

Bootstrap là khung công tác HTML, CSS và JS phổ biến nhất để phát triển web响应.

Bootstrap giúp bạn phát triển các trang web có外观出众 trên mọi kích thước: màn hình, laptop, máy tính bảng hoặc điện thoại:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com Demo</h1> 
  <p>Thay đổi kích thước trang này!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London là thành phố thủ đô của Anh.</p>
    <p>Đó là thành phố đông dân nhất ở Vương quốc Anh,</p>
    <p>với khu vực đô thị hơn 13 triệu người.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris là thủ đô và thành phố đông dân nhất của Pháp.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,</p>
    và khu vực đô thị đông dân nhất trên thế giới.</p>
  </div>
</div>
</div>
</body>
</html>

Thử ngay

Nếu bạn muốn học thêm về Bootstrap, hãy đọc Hướng dẫn Bootstrap.