دليل Bootstrap4 الأساسي

دليل Bootstrap4

Bootstrap هي مكتبة العناصر الأمامية الأكثر شعبية في العالم، مخصصة لتطوير مشاريع الويب التفاعلية والمرنة.

Bootstrap4 هو أحدث إصدار من Bootstrap، وهو مجموعة أدوات مفتوحة المصدر تستخدم لتطوير HTML و CSS و JS. باستخدام المتغيرات Sass التي نقدمها ومئات المكسس والمكونات المعدة للتوسع، والشبكة الشبكية التفاعلية، والنظام التفاعلي القوي القائم على jQuery، يمكنك تطوير نماذج أولية أو بناء تطبيقات كاملة بسرعة.

من هو مناسب لقراءة هذا الدليل؟

إذا كنت تملك معرفة أساسية بـ HTML و CSS، يمكنك قراءة هذا الدليل وتطوير موقعك الخاص. بعد انتهائك من هذا الدليل، يمكنك الوصول إلى مستوى متوسط في تطوير مشاريع الويب باستخدام Bootstrap.

المعرفة التي تحتاجها قبل قراءة هذا الدليل:

قبل البدء في قراءة هذا الدليل، يجب أن تكون على علم الأساسيات لـ HTML و CSS و JavaScript. إذا لم تكن تعرف هذه المفاهيم بعد، فنحن نوصي بقراءة هذه الدروس لدينا أولاً:

مثال Bootstrap4

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap4</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
　　<h1>صفحتي الأولى من Bootstrap</h1>
　　<p>أعد تغيير حجم المتصفح لرؤية التأثير!</p>　
</div>
　
<div class="container">
　　<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>
</body>
</html>

اختبار لرؤية النتيجة ‹/›

Bootstrap4 مع Bootstrap3

Bootstrap4 هو أحدث إصدار من Bootstrap، ويأتي مع المزيد من الفئات المحددة ودمج بعض الأجزاء ذات الصلة في المكونات ذات الصلة. كما أن حجم Bootstrap.min.css قد تم تقليله بنسبة تزيد عن 40%.

Bootstrap4 لم تعد تدعم IE8 وiOS 6، الآن تدعم فقط المتصفحات التي تعمل بأعلى من IE9 وiOS 7. إذا كنت بحاجة إلى استخدام متصفحات قديمة، فاستخدم Bootstrap3.

ملاحظة: بشكل افتراضي، Bootstrap 4 يستخدم أسلوب التفكير الأولي في الجوال للإجابة. Bootstrap 4.3 هو أحدث وأكثر استقرارًا إصدار Bootstrap. جميع المتصفحات الحديثة تدعم Bootstrap 4، مثل Google Chrome،Firefox،Safari،Internet Explorer 10 وما فوق.

تثبيت واستخدام Bootstrap4