تصميم موقع متجاوب مع الاجهزة الذكية

من الامور المهمه اثناء بناء وبرمجة اي موقع الكتروني مراعاة ملائمته مع جميع المتصفحات والاجهزه حتى تكون تجربة الزائر مثمرة وغير معقدة ، خصوصا اذا كان الموقع الالكتروني مختص في مجال التجارة الالكترونية لان الدقيقة الأولى للعميل في الموقع تحدد استمرايته بالتصفح او مغادرة الموقع في حال وجود عوائق تعيقة من اكمال تصفحه للموقع ،

حسنا لنبدأ بشرح الخطوات بسهولة

نحتاج بداية الى تحميل مكتبات Bootstrap وهذا الاخير يستخدم تقنيات js و jq و css لتحسين عرض الموقع مع جميع المتصفحات .

او بامكاننا استخدام شيفرات Bootstrap دون تحميلها اعتمادا على استضافة الموقع

اولا افتح صفحة html جديدة

واضف الشيفرات التالية بداخل وسم <head>

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


وقم باضافة كلاسين بداخل وسم <body>
الأول باسم jumbotron ويمثل رأس الصفحة ومساحة عنوان الموقع والأخر
بأسم container يمثل محتوى الموقع مثل النصوص الخ ..

مثال للاكواد
<div class="jumbotron">
  <h1>Fab2.info</h1>      
  <p>Welcome To Fab Tutorial</p>
</div>

<div class="container">
  <p>welcome to fab</p>      
  <p>www.fab2.info</p>      
</div>

مثال مصور لجهاز سطح المكتب 

مثال لمتصفح الجوال 



لاستخدام مصدر الاكواد كاملا والتعديل عليه :
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fab Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
  <h1>Fab2.info</h1>      
  <p>Welcome To Fab Tutorial</p>
</div>

<div class="container">
  <p>welcome to fab</p>      
  <p>www.fab2.info</p>      
</div>

</body>
</html>
اسعد بتواصلكم معي من خانة الردود في حال وجود اي استفسار 

تعليقات

المشاركات الشائعة من هذه المدونة

طريقة حساب الغياب المسموح به قبل الحرمان من المقرر

تجربتي في استخراج بطاقة احوال بدل فاقد

انشاء سكربت php لاإدخال البيانات الى قاعدة بيانات mysql