هناك العديد من أطر CSS القائمة التي تقدم تصميم مجيب.
هم أحرار، وسهلة الاستخدام.
باستخدام W3.CSS
وهناك طريقة رائعة لخلق تصميم استجابة لاستخدام ورقة أنماط الاستجابة، مثل W3.CSS
W3.CSS يجعل من السهل لتطوير المواقع التي تبدو لطيفة في أي حجم. سطح المكتب، وكمبيوتر محمول، الكمبيوتر اللوحي، أو الهاتف:
W3.CSS تجريبي
تغيير حجم الصفحة لمشاهدة responsivenes!
لندن
لندن هي عاصمة إنجلترا.
وهي المدينة الأكثر اكتظاظا بالسكان في المملكة المتحدة، مع المنطقة الحضرية لأكثر من 13 مليون نسمة.
باريس
باريس هي عاصمة فرنسا.
منطقة باريس هي واحدة من أكبر المراكز السكانية في أوروبا، مع أكثر من 12 مليون نسمة.
طوكيو
طوكيو هي عاصمة اليابان.
ومن وسط طوكيو الكبرى، ومنطقة العاصمة الأكثر اكتظاظا بالسكان في العالم.
مثال
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<div
class="w3-container orange">
<h1>w3ii 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 التعليمي .
التمهيد
الإطار شعبي آخر هو التمهيد، فإنه يستخدم HTML، CSS ومسج لجعل صفحات الويب استجابة.
مثال
<!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> انها محاولة لنفسك » لمعرفة المزيد عن التمهيد، انتقل إلى لدينا التمهيد التعليمي .
هيكل عظمي
الإطار شعبي آخر هو الهيكل العظمي، ويستخدم CSS فقط لجعل صفحات الويب استجابة.
مثال
<!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> انها محاولة لنفسك »