انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 01
دورة Bootstrap

مقدمة في اطار عمل BootStrapBootStrap Introduction

سوف تتعلم في هذا الدرس  اطار عمل BootStrap  ومميزاته واستخدامه ودوره في تطبيقات الويب.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
2
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,602
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

? What is Bootstrap ما هو بوتستراب

Bootstrap هو اطار عمل مجاني ومفتوح المصدر تم تصميمه لتسهيل عملية تطوير تطبيقات ويب متجاوبة باستخدام مجموعة من التصميمات المعدة مسبقا وتم بناءه بشكل اساسي اعتمادا على لغة HTML  و CSS و JavaScript.


اهم ما يميز اطار عمل bootstrap:

  • technologies: يتكون bootstrap من مجموعة مهام برمجية متكونه من مجموعة لغات ومكتبات وهي HTML5,CSS3,JavaScript,jQuery.
  • popularity: يعتبر bootstrap من اشهر اطارات العمل التي تنتج تطبيقات ويب متجاوبة مع جميع الاجهزة.
  • components: يتكون  bootstrap من components مكونات مجهزه مسبقاً مثل typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins مما يسهل عليك استخدامها بدلاً من كتابتها من الصفر .
ما هو بوتستراب

BootStrap Introduction مقدمة في اطار عمل BootStrap

مقدمة في اطار عمل BootStrap

Bootstrap Advantages مميزات بوتستراب

ما يميز اطار عمل bootstarp:

  • تطبيقات ويب متجاوبة: تصميم تطبيقات ويب متجاوبة مع جميع الاجهزة Desktop,Labtop,Tablet,Mobile.
  • توفير الوقت والجهد: يعتمد  bootstrap علي components مكونات اساسية يستخدمها المطورين بشكل مستمر.
  • سهل الاستخدام: يمكن لاي شخص استخدامة لا يتطلب الا اساسيات ال HTML وال CSS.
  • التجاوب مع الهواتف الذكية: من اولويات ال bootstrap عمل تطبيقات تعمل علي الهواتف الذكية.
  • التوافق مع المتصفحات:  bootstrap متوافق مع جميع المتصفحات الحديثة.
  • اكتب القليل ونفذ الكثير: بأوامر قليلة يمكن اختصار عدد سطور برمجية كثيره.
  • Responsive Grid: ياتي بوتستراب مع grid system نظام شبكة معرفا مسبقا يتكون هذا النظام من اعمدة وصفوف تجعلك في غنى عن استخدام اي media queries داخل ملف CSS.
  • Image System: يعمل بوتستراب بنظام classes واحد اهم هذه ال classes هو هذا image-responsive. هذه الجملة البرمجية البسيطة في بوتستراب كفيلة بجعل الصورة ذات حجم متجاوب تلقائيا مع جميع الشاشات بجيمع ابعادها.
  • Bootstrap Documentation: يوفر بوتستراب وثائق للمطورين الذين يرغبون في تعلم كيفية استخدامه لأول مرة. يمكنك زيارة صفحة توثيق بوتستراب من هنا.

Bootstrap Installation تثبيت بوتستراب

تحصل علي الاصدار الاحدث من Bootstrap بطريقتين:

  • استخدام  Bootstrap 5 عن طريق ال CDN.
  • استخدام  Bootstrap 5 عن طريق تحميله من موقعه من هنا.

ملحوظة: CDN هي اختصار لمصطلح Content Delivery Network وتعتبر الطريقة المفضلة في الاستخدام لانها ترفع من اداء تطبيقات الويب وعرض الصفحات بطريقة اسرع.

CDN

استخدام اطار عمل bootstrap بروابط مباشرة من شبكة bootstrap.

HTML 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- Popper JS -->
<script src=https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
لتحميل ال bootstrap واستضافته علي جهازك او للتدريب يمكن زيارة موقعه الرسمي getbootstrap.com

Starter template نموذج البداية

يجب عليك التحقق من عدة نقاط لضمان استخدام ال bootstrap بطريقة صحيحه :

  • اضافة meta tag من النوع viewport
    يحتوي عنصر meta على خاصيتين هما name و content.
  • اضافة ملف  Bootstrap CSS في عنصر head.
  • اضافة ملف JS وهو Bootstrap Bundle قبل <body/>.

Starter Template

مجموعة اوامر تتيح لك البدء في استخدام اطار عمل bootstrap.

HTML 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  
  </body>
</html>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…