Bootstrap 4 ابدأ

ما هو Bootstrap؟

Bootstrap هو إطار عمل مجاني للواجهة الأمامية لتطوير الويب بشكل أسرع وأسهل
يتضمن Bootstrap قوالب تصميم تستند إلى HTML و CSS للطباعة ، والنماذج ، والأزرار ، والجداول ، والتنقل ، والنماذج ، ودوارات الصور والعديد من المكونات الأخرى ، بالإضافة إلى مكونات JavaScript الإضافية الاختيارية
يمنحك Bootstrap أيضًا القدرة على إنشاء تصميمات سريعة الاستجابة بسهولة

ما هو تصميم الويب سريع الاستجابة؟

يتعلق تصميم الويب سريع الاستجابة بإنشاء مواقع ويب تضبط نفسها تلقائيًا لتبدو جيدة على جميع الأجهزة ، من الهواتف الصغيرة إلى أجهزة الكمبيوتر المكتبية الكبيرة.

مثال التمهيد 4

<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

يتبع هذا البرنامج التعليمي Bootstrap 4 ، الذي تم إصداره في 2018 ، كترقية إلى Bootstrap 3 ، بمكونات جديدة ، وورقة أنماط أسرع ، واستجابة أكثر ، وما إلى ذلك.

Bootstrap 5 (تم إصداره عام 2021) هو أحدث إصدار من Bootstrap ؛ يدعم أحدث الإصدارات الثابتة لجميع المتصفحات والأنظمة الأساسية. ومع ذلك ، لا يتم دعم Internet Explorer 11 والإصدارات الأقدم.

تتمثل الاختلافات الرئيسية بين Bootstrap 5 و Bootstrap 3 و 4 في أن Bootstrap 5 قد تحول إلى JavaScript بدلاً من jQuery .

ملاحظة: لا يزال Bootstrap 3 و Bootstrap 4 مدعومين من قبل الفريق لإصلاحات الأخطاء الحرجة وتغييرات الوثائق ، ومن الآمن تمامًا الاستمرار في استخدامها. ومع ذلك ، لن يتم إضافة ميزات جديدة إليها.

لماذا نستخدم Bootstrap؟

مزايا Bootstrap:

سهل الاستخدام: يمكن لأي شخص لديه معرفة أساسية فقط بـ HTML و CSS البدء في استخدام Bootstrap
الميزات المتجاوبة: تتكيف CSS المتجاوبة مع Bootstrap مع الهواتف والأجهزة اللوحية وأجهزة سطح المكتب
نهج الجوال أولاً: في Bootstrap ، تعد أنماط الجوال أولاً جزءًا من إطار العمل الأساسي
توافق المتصفح: Bootstrap 4 متوافق مع جميع المتصفحات الحديثة (Chrome و Firefox و Internet Explorer 10+ و Edge و Safari و Opera)

من أين تحصل على Bootstrap 4؟

هناك طريقتان لبدء استخدام Bootstrap 4 على موقع الويب الخاص بك.

أنت تستطيع:

قم بتضمين Bootstrap 4 من CDN
قم بتنزيل Bootstrap 4 من getbootstrap.com

Bootstrap 4 CDN

إذا كنت لا تريد تنزيل Bootstrap 4 واستضافته بنفسك ، فيمكنك تضمينه من CDN (شبكة توصيل المحتوى).

يوفر jsDelivr دعم CDN لكل من Bootstrap's CSS و JavaScript. يجب عليك أيضًا تضمين jQuery:

jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

إحدى مزايا استخدام Bootstrap 4 CDN: قام
العديد من المستخدمين بالفعل بتنزيل Bootstrap 4 من jsDelivr عند زيارة موقع آخر. نتيجة لذلك ، سيتم تحميله من ذاكرة التخزين المؤقت عندما يزورون موقعك ، مما يؤدي إلى وقت تحميل أسرع. أيضًا ، ستتأكد معظم شبكات CDN من أنه بمجرد أن يطلب المستخدم ملفًا منه ، سيتم تقديمه من الخادم الأقرب إليهم ، مما يؤدي أيضًا إلى وقت تحميل أسرع.

مسج وبوبر؟
يستخدم Bootstrap 4 jQuery و Popper.js لمكونات JavaScript (مثل الوسائط وتلميحات الأدوات والأشياء المنبثقة وما إلى ذلك). ومع ذلك ، إذا كنت تستخدم فقط جزء CSS من Bootstrap ، فلن تحتاجه.

تنبيهات قابلة للإغلاق
الأزرار ومربعات الاختيار / أزرار الاختيار لتبديل الحالات
دائري للشرائح وعناصر التحكم والمؤشرات
تصغير لتبديل المحتوى
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

تنزيل Bootstrap 4

إذا كنت ترغب في تنزيل Bootstrap 4 واستضافته بنفسك ، فانتقل إلى https://getbootstrap.com/ واتبع التعليمات الموجودة هناك.

إنشاء أول صفحة ويب باستخدام Bootstrap 4

1. أضف نوع مستند HTML5

يستخدم Bootstrap 4 عناصر HTML وخصائص CSS التي تتطلب نوع مستند HTML5.

قم دائمًا بتضمين نوع مستند HTML5 في بداية الصفحة ، جنبًا إلى جنب مع السمة lang ومجموعة الأحرف الصحيحة:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. يعد Bootstrap 4 هو الجوّال أولاً

تم تصميم Bootstrap 4 ليكون مستجيبًا للأجهزة المحمولة. تعد أنماط الجوال أولاً جزءًا من إطار العمل الأساسي.

لضمان العرض الصحيح والتكبير باللمس ، أضف <meta>العلامة التالية داخل <head>العنصر:

يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).

يضبط الجزء initial-scale=1مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.

3. الحاويات

يتطلب Bootstrap 4 أيضًا عنصرًا يحتوي على محتويات الموقع.

هناك نوعان من فئات الحاويات للاختيار من بينها:

توفر .containerالفئة حاوية عرض ثابتة سريعة الاستجابة
يوفر .container-fluidالفصل حاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض

.وعاء

.container-fluid

اثنان أساسيان Bootstrap 4 صفحات

يوضح المثال التالي التعليمات البرمجية لصفحة Bootstrap 4 الأساسية (مع حاوية عرض ثابتة سريعة الاستجابة):

مثال حاوية

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

يوضح المثال التالي رمز صفحة Bootstrap 4 الأساسية (مع حاوية كاملة العرض):

مثال سائل الحاوية

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ سابق التالي ❯

البرنامج التعليمي Bootstrap 4

التمهيد 4 الشبكة

Bootstrap 4 أخرى

التمهيد 4 المرجع