W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

响应式网页设计 - 框架



有许多提供响应式设计的CSS框架。

它们是免费并且简单灵活。


使用 W3.CSS

创建一个响应式设计是使用一个灵敏的样式表的一个很好的方式,像 W3.CSS

W3.CSS 易于开发网站,在任何大小的台式机,笔记本电脑,平板电脑或电话都有很好的效果:

W3.CSS Demo

Resize the page to see the responsivenes!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container orange">
  <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>
尝试一下 »

要了解更多关于W3.CSS的内容,请参阅我们的 W3.CSS 教程


Bootstrap

另一个流行的框架是 Bootstrap ,它使用HTML,CSS和jQuery来制作响应网页。

Example

<!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 rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
尝试一下 »

要了解更多关于Bootstrap的内容,请参阅我们的 Bootstrap 教程


Skeleton

另一个流行的框架是 Skeleton,它只使用CSS来制作响应网页。

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Skeleton Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="normalize.css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container">
  <h1>My First Skeleton Page</h1>
  <div class="row">
    <div class="one column">
      ...
    </div>
    <div class="eleven columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="one-half column">
      ...
    </div>
    <div class="one-half column">
      ...
    </div>
  </div>
</div>

</body>
</html>
尝试一下 »