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 مما يسهل عليك استخدامها بدلاً من كتابتها من الصفر .

هام

What is Responsive Web Design ما هي صفحات الويب المتجاوبة؟

Responsive Web Design هو تجاوب تطبيقات الويب تلقائياً مع جميع الاجهزة Desktop,Labtop,Mobile,Tablet حيث تتغير احجام العناصر ويتم اعادة هيكلة الصفحة تلقائيا اعتمادا على حجم شاشة كل زائر.

</> 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.

<!-- 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>

CDN

إحدى الميزات الكبيرة لاستخدام ال CDN المستضاف من CDN Network:

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

لتحميل ال bootstrap واستضافته علي جهازك او للتدريب يمكن زيارة موقعه الرسمي getbootstrap.com

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

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

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

Starter Template

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

<!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>

جربها بنفسك

Optional

الروابط الموجودة في اسفل ملف HTML قبل نهاية عنصر body والمكتوبة بعد تعليق option 2 هي اختيارية على حسب الحاجة.

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات BootStrap Introduction Bootstrap