تصميم الويب سريع الاستجابة - الأطر
هناك العديد من أطر CSS المجانية التي تقدم تصميمًا مستجيبًا.
باستخدام W3.CSS
من الطرق الرائعة لإنشاء تصميم سريع الاستجابة استخدام ورقة أنماط سريعة الاستجابة ، مثل W3.CSS
يجعل W3.CSS من السهل تطوير المواقع التي تبدو جميلة بأي حجم!
عرض W3.CSS
تغيير حجم الصفحة لرؤية الاستجابة!
لندن
لندن هي عاصمة إنجلترا.
إنها المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، حيث يبلغ عدد سكانها أكثر من 13 مليون نسمة.
باريس
باريس هي عاصمة فرنسا.
تعد منطقة باريس واحدة من أكبر المراكز السكانية في أوروبا ، حيث يبلغ عدد سكانها أكثر من 12 مليون نسمة.
طوكيو
طوكيو هي عاصمة اليابان.
إنها مركز منطقة طوكيو الكبرى ، وهي المنطقة الحضرية الأكثر اكتظاظًا بالسكان في العالم.
مثال
<!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>
لمعرفة المزيد حول W3.CSS ، اقرأ برنامج W3.CSS التعليمي الخاص بنا .
التمهيد
إطار عمل شائع آخر هو Bootstrap. يستخدم HTML و CSS لإنشاء صفحات ويب سريعة الاستجابة:
مثال
<!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>
لمعرفة المزيد حول Bootstrap ، انتقل إلى البرنامج التعليمي Bootstrap الخاص بنا .
هل سمعت عن W3Schools Spaces ؟ هنا يمكنك إنشاء موقع الويب الخاص بك من البداية أو استخدام قالب واستضافته مجانًا.
ابدأ مجانًا ❯* بطاقة الإئتمان غير مطالب بها