بدء تشغيل Bootstrap
ما هو Bootstrap؟
- Bootstrap هو إطار عمل مجاني للواجهة الأمامية لتطوير الويب بشكل أسرع وأسهل
- يتضمن Bootstrap قوالب تصميم تستند إلى HTML و CSS للطباعة ، والنماذج ، والأزرار ، والجداول ، والتنقل ، والنماذج ، ودوارات الصور والعديد من المكونات الأخرى ، بالإضافة إلى مكونات JavaScript الإضافية الاختيارية
- يمنحك Bootstrap أيضًا القدرة على إنشاء تصميمات سريعة الاستجابة بسهولة
ما هو تصميم الويب سريع الاستجابة؟
يتعلق تصميم الويب سريع الاستجابة بإنشاء مواقع ويب تضبط نفسها تلقائيًا لتبدو جيدة على جميع الأجهزة ، من الهواتف الصغيرة إلى أجهزة الكمبيوتر المكتبية الكبيرة.
مثال التمهيد
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
</div>
تاريخ التمهيد
تم تطوير Bootstrap بواسطة Mark Otto و Jacob Thornton في Twitter ، وتم إصداره كمنتج مفتوح المصدر في أغسطس 2011 على GitHub.
في يونيو 2014 ، كان Bootstrap هو المشروع رقم 1 على GitHub!
لماذا نستخدم Bootstrap؟
مزايا Bootstrap:
- سهل الاستخدام: يمكن لأي شخص لديه معرفة أساسية فقط بـ HTML و CSS البدء في استخدام Bootstrap
- الميزات المتجاوبة: تتكيف CSS المتجاوبة مع Bootstrap مع الهواتف والأجهزة اللوحية وأجهزة سطح المكتب
- نهج الجوال أولاً: في Bootstrap 3 ، تعد أنماط الجوال أولاً جزءًا من إطار العمل الأساسي
- توافق المتصفح: Bootstrap متوافق مع جميع المتصفحات الحديثة (Chrome و Firefox و Internet Explorer و Edge و Safari و Opera)
إصدارات Bootstrap
يتبع هذا البرنامج التعليمي Bootstrap 3 ، الذي تم إصداره في عام 2013. ومع ذلك ، فإننا نغطي أيضًا الإصدارات الأحدث ؛ Bootstrap 4 (تم إصداره عام 2018) و Bootstrap 5 (تم إصداره عام 2021) .
Bootstrap 5 هو أحدث إصدار من Bootstrap ؛ بمكونات جديدة وأوراق أنماط أسرع واستجابة أكثر وما إلى ذلك. وهو يدعم أحدث الإصدارات الثابتة لجميع المتصفحات والأنظمة الأساسية. ومع ذلك ، لا يتم دعم Internet Explorer 11 والإصدارات الأقدم.
تتمثل الاختلافات الرئيسية بين Bootstrap 5 و Bootstrap 3 و 4 في أن Bootstrap 5 قد تحول إلى JavaScript بدلاً من jQuery .
ملاحظة: لا يزال Bootstrap 3 و Bootstrap 4 مدعومين من قبل الفريق لإصلاحات الأخطاء الحرجة وتغييرات الوثائق ، ومن الآمن تمامًا الاستمرار في استخدامها. ومع ذلك ، لن يتم إضافة ميزات جديدة إليها.
من أين تحصل على Bootstrap؟
هناك طريقتان لبدء استخدام Bootstrap على موقع الويب الخاص بك.
أنت تستطيع:
- قم بتنزيل Bootstrap من getbootstrap.com
- قم بتضمين Bootstrap من CDN
تحميل Bootstrap
إذا كنت تريد تنزيل Bootstrap واستضافته بنفسك ، فانتقل إلى getbootstrap.com ، واتبع التعليمات الموجودة هناك.
Bootstrap CDN
إذا كنت لا تريد تنزيل Bootstrap واستضافته بنفسك ، فيمكنك تضمينه من CDN (شبكة توصيل المحتوى).
يوفر MaxCDN دعم CDN لكل من Bootstrap's CSS و JavaScript. يجب عليك أيضًا تضمين jQuery:
ماكس CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
إحدى مزايا استخدام Bootstrap CDN: قام
العديد من المستخدمين بالفعل بتنزيل Bootstrap من MaxCDN عند زيارة موقع آخر. نتيجة لذلك ، سيتم تحميله من ذاكرة التخزين المؤقت عندما يزورون موقعك ، مما يؤدي إلى وقت تحميل أسرع. أيضًا ، ستتأكد معظم شبكات CDN من أنه بمجرد أن يطلب المستخدم ملفًا منه ، سيتم تقديمه من الخادم الأقرب إليهم ، مما يؤدي أيضًا إلى وقت تحميل أسرع.
يستخدم jQuery
Bootstrap jQuery لمكونات JavaScript الإضافية (مثل الوسائط وتلميحات الأدوات وما إلى ذلك). ومع ذلك ، إذا كنت تستخدم فقط جزء CSS من Bootstrap ، فلن تحتاج إلى jQuery.
إنشاء أول صفحة ويب باستخدام Bootstrap
1. أضف نوع مستند HTML5
يستخدم Bootstrap عناصر HTML وخصائص CSS التي تتطلب نوع مستند HTML5.
قم دائمًا بتضمين نوع مستند HTML5 في بداية الصفحة ، جنبًا إلى جنب مع السمة lang ومجموعة الأحرف الصحيحة:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. يعتبر Bootstrap 3 هو الجوّال أولاً
تم تصميم Bootstrap 3 ليكون مستجيبًا للأجهزة المحمولة. تعد أنماط الجوال أولاً جزءًا من إطار العمل الأساسي.
لضمان العرض الصحيح والتكبير باللمس ، أضف <meta>العلامة التالية داخل
<head>العنصر:
<meta name="viewport" content="width=device-width, initial-scale=1">
يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).
يضبط الجزء initial-scale=1مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.
3. الحاويات
يتطلب Bootstrap أيضًا عنصرًا يحتوي على محتويات الموقع.
هناك نوعان من فئات الحاويات للاختيار من بينها:
- توفر
.containerالفئة حاوية عرض ثابتة سريعة الاستجابة - يوفر
.container-fluidالفصل حاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض
صفحتان أساسيتان للتمهيد
يوضح المثال التالي التعليمات البرمجية لصفحة Bootstrap أساسية (مع حاوية عرض ثابتة سريعة الاستجابة):
مثال
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
يوضح المثال التالي التعليمات البرمجية لصفحة Bootstrap أساسية (مع حاوية كاملة العرض):
مثال
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>