CSS - RWD Templates قوالب التصميم المتجاوب
CSS - قوالب التصميم المتجاوب (Responsive Templates)
🔸 القوالب المتجاوبة هي ملفات HTML وCSS جاهزة، تم تصميمها لتتناسب مع جميع أحجام الشاشات تلقائيًا. يمكن استخدامها كنقطة انطلاق لمشاريعك لتوفير الوقت والجهد.
🧱 ما الذي تحتوي عليه القوالب عادة؟
- رأس (Header) متجاوب يحتوي شعار وقائمة تنقل.
- محتوى أساسي (Main Content) به نصوص أو صور أو بطاقات.
- تذييل (Footer) به روابط أو معلومات تواصل.
- تصميم شبكة (Grid System) باستخدام Flexbox أو CSS Grid أو Bootstrap.
🧪 مثال على قالب بسيط متجاوب
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
nav {
background-color: #f1f1f1;
padding: 15px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f4f4f4;
padding: 15px;
}
.main {
flex: 70%;
background-color: #fff;
padding: 15px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>عنوان الموقع</h1>
</header>
<nav>
<b>القائمة:</b> الرئيسية | من نحن | تواصل معنا
</nav>
<div class="row">
<div class="side">
<h2>القائمة الجانبية</h2>
<p>محتوى فرعي هنا</p>
</div>
<div class="main">
<h2>المحتوى الرئيسي</h2>
<p>نصوص وصور يتم عرضها هنا بطريقة متجاوبة.</p>
</div>
</div>
<footer>
© 2025 جميع الحقوق محفوظة
</footer>
</body>
</html>
💡 ملاحظات مهمة
- القالب يستخدم Flexbox لتقسيم الصفحة إلى أعمدة قابلة للتكيف مع العرض.
- عند عرض الصفحة على شاشات صغيرة، تتحول الأعمدة إلى صفوف تلقائيًا باستخدام media query.
- يفضل البدء بقالب بسيط ثم تخصيصه حسب الحاجة.
- يمكنك تحميل قوالب جاهزة من W3Schools أو مواقع مثل
startbootstrap.comوtemplatemo.com.
تعليقات
إرسال تعليق