من الامور المهمه اثناء بناء وبرمجة اي موقع الكتروني مراعاة ملائمته مع جميع المتصفحات والاجهزه حتى تكون تجربة الزائر مثمرة وغير معقدة ، خصوصا اذا كان الموقع الالكتروني مختص في مجال التجارة الالكترونية لان الدقيقة الأولى للعميل في الموقع تحدد استمرايته بالتصفح او مغادرة الموقع في حال وجود عوائق تعيقة من اكمال تصفحه للموقع ،
حسنا لنبدأ بشرح الخطوات بسهولة
نحتاج بداية الى تحميل مكتبات Bootstrap وهذا الاخير يستخدم تقنيات js و jq و css لتحسين عرض الموقع مع جميع المتصفحات .
او بامكاننا استخدام شيفرات Bootstrap دون تحميلها اعتمادا على استضافة الموقع
اولا افتح صفحة html جديدة
واضف الشيفرات التالية بداخل وسم <head>
وقم باضافة كلاسين بداخل وسم <body>
الأول باسم jumbotron ويمثل رأس الصفحة ومساحة عنوان الموقع والأخر
بأسم container يمثل محتوى الموقع مثل النصوص الخ ..
مثال للاكواد
حسنا لنبدأ بشرح الخطوات بسهولة
نحتاج بداية الى تحميل مكتبات 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>
الأول باسم 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>
اسعد بتواصلكم معي من خانة الردود في حال وجود اي استفسار
