Muundo wa Web cha Kuwa Kipya cha HTML

什么是响应式 Web 设计？

  • RWD 指的是响应式 Web 设计（Responsive Web Design）
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

创建您自己的响应式设计

创建响应式设计的一个方法，是自己来创建它：

!DOCTYPE html

<head>

</head>
<body>
<h1> Demo ya CodeW3C.com</h1>

Resize this responsive page!





<h2>London</h2>
<p>London ina wakala wa Jamii wa England.</p>
<p>Itakuwa mji wa wakazi zaidi wa United Kingdom,</p>
<p>na eneo bora la wakazi wengi zaidi ya 13 milioni.</p>
</div>


<h2>Paris</h2>
<p>Paris ina wakala wa Jamii na mji wa wakazi zaidi wa Ufaransa.</p>
</div>


<h2>Tokyo</h2>
<p>Tokyo ina wakala wa Jamii ya Japan, kati ya Eneo Bora la Tokyo,</p>
na eneo bora zaidi la wakazi wa mji wa Dunia.</p>
</div>
</body>
</html>

Jifunze kwa kufikia

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap ina kusaidia kwa kuwa kwa uwanja wa uwanja wa kina kwa kina, kompyuta, tabaka ya kina au simu:

!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> Demo ya CodeW3C.com</h1> 
  <p>Wingia ukurungu wa ukurungu wa tovuti ya kawaida!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London ina wakala wa Jamii wa England.</p>
    <p>Itakuwa mji wa wakazi zaidi wa United Kingdom,</p>
    <p>na eneo bora la wakazi wengi zaidi ya 13 milioni.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris ina wakala wa Jamii na mji wa wakazi zaidi wa Ufaransa.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo ina wakala wa Jamii ya Japan, kati ya Eneo Bora la Tokyo,</p>
    na eneo bora zaidi la wakazi wa mji wa Dunia.</p>
  </div>
</div>
</div>
</body>
</html>

Jifunze kwa kufikia

Kuwa na ujumbe zaidi kuhusu Bootstrap, tafadhali sasa Mafunzo ya Bootstrap.