Bootstrap 5 البدء

التوصيات للدورات

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

ما هو تصميم الويب المرونة؟

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

Bootstrap 5 مثال

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>صفحة Bootstrap الأولى لي</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>الصف الأول: الربيع</h3>
      <p>في يوم سعيد البحث عن الزهور على ضفاف نهر سيسي، المناظر الطبيعية غير محدودة، الجمال يحدث في اللحظة.</p>
      <p>بسهولة يمكن التعرف على وجه الريح الشرقية، دائمًا ما تكون الألوان المختلفة في الربيع.</p>
    </div>
    <div class="col-sm-4">
      <h3>الصف الثاني: قصيدة الشتاء</h3>
      <p>اللون الأحمر والأزرق قد أصبح رماداً، صوت الغراب في صوت الصيف الجديد.</p>
      <p>السواق من السدر والسنابل لا ينتهي، أدركت أنني إنسان في عهد السلام.</p>
    </div>
    <div class="col-sm-4">
      <h3>الصف الثالث: رحلة على الجبل</h3>
      <p>على جبل بارد، طريق من الحجر منحرف، هناك منازل في مكان العبق.</p>
      <p>استراحة على شجرة الأبنوس في وقت الليل، ألوان الربيع أكثر حيوية من زهور فبراير.</p>
    </div>
  </div>
</div>

جربها بنفسك

إصدارات Bootstrap

Bootstrap 5 (منشور في عام 2021) هو أحدث إصدار لـ Bootstrap (منشور في عام 2013)；باستخدام مكونات جديدة، وتشكيلات أسرع، يقدم قدرة تفاعلية أسرع.

Bootstrap 5 يدعم جميع إصدارات المتصفحات والمنصات الرئيسية الأحدث. ولكن لا يدعم Internet Explorer 11 أو الإصدارات الأقدم.

الفرق الرئيسي بين Bootstrap 5 و Bootstrap 3 & 4 هو أن Bootstrap 5 قد انتقل إلى Vanilla JavaScript بدلاً من jQuery.

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

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

مزايا Bootstrap:

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

ملاحظة:إذا كنت بحاجة إلى دعم IE11 أو إصداراتها الأحدث، يجب استخدام BS4 أو BS3.

من أين يمكنك الحصول على Bootstrap 5؟

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

يمكنك:

  • يحتوي على Bootstrap 5 من CDN
  • تنزيل Bootstrap 5 من getbootstrap.com

Bootstrap 5 CDN

إذا لم تكن ترغب في تنزيل Bootstrap 5 بنفسك وتخزينه، يمكنك تضمينه من CDN (شبكة التوزيع المحتوى).

يقدم CodeW3C.com دعم CDN لـ CSS وJavaScript لـ Bootstrap:

MaxCDN:

<!-- CSS المترجم وضغطه حديثاً -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript المترجم حديثاً -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

من مزايا استخدام CDN Bootstrap 5:

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

JavaScript؟

Bootstrap 5 يستخدم JavaScript لعدة مكونات (مثل النوافذ المنبثقة، والمشاهدات، والنوافذ المنبثقة، وما إلى ذلك). ولكن إذا كنت تستخدم فقط جزء CSS من Bootstrap، فإنه لا يحتاج إليها.

تنزيل Bootstrap 5

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

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

1. إضافة نوع مستند HTML5

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>مثال Bootstrap 5</title>
    <meta charset="utf-8">
  </head>
</html>

2. الأولوية للمحمول في Bootstrap 5

يهدف تصميم Bootstrap 5 إلى الأجهزة المحمولة. هيكل الأنماط الأولية هي جزء من الإطار الأساسي.

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

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width يحدد عرض الصفحة لتتبع عرض الشاشة الخاصة بالجهاز (وسيختلف من جهاز إلى آخر).

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

3. مكونات

Bootstrap 5 حاجة إلى عنصر يحتوي على محتوى الموقع.

هناك نوعان من أنواع وعاء العرض المتاحة للاختيار:

  1. .container يقدم وعاء عرضي ثابت عرضي
  2. .container-fluid يقدم وعاء عرضي شامل يغطي عرض النافذة بأكلمها

صفحتين أساسيتين لـ Bootstrap 5

مثال وعاء عرضي ثابت

في هذا المثال، يُظهر Bootstrap 5 الأساسي لصفحة النسخة (بمكونات وعاء عرضي ثابت عرضي):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>صفحة Bootstrap الأولى لي</h1>
  <p>هذه القسم في .container.</p>
  <p>.container تقدم وعاء عرضي ثابت عرضي.</p>
</div>
</body>
</html>

جربها بنفسك

مثال وعاء عرضي شامل

في هذا المثال، يُظهر Bootstrap 5 الأساسي لصفحة النسخة (بمكونات وعاء عرضي شامل):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>مثال Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>صفحة Bootstrap الأولى لي</h1>
  <p>هذه القسم في .container-fluid.</p>
  <p>.container-fluid تقدم وعاء عرضي شامل يغطي عرض النافذة بأكلمها.</p>
</div>
</body>
</html>

جربها بنفسك