كيفية استخدام Bootstrap لتصميم صفحات HTML

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

ما هو Bootstrap؟
كيفية إعداد Bootstrap في مشروع HTML
نظام الشبكة (Grid System) في Bootstrap
استخدام مكونات Bootstrap الجاهزة
الخلاصة

يعتبر Bootstrap أحد أكثر أطر العمل (Frameworks) شهرة في تصميم الويب، إذ يتيح للمطورين إنشاء صفحات ويب استجابية (Responsive) بشكل سريع وفعال. يحتوي Bootstrap على مجموعة واسعة من الأدوات التي تشمل الشبكة (Grid system)، الأزرار، القوائم المنسدلة، والمزيد من المكونات الجاهزة. في هذا المقال، سنستعرض كيفية استخدام Bootstrap لتصميم صفحات HTML بطرق فعالة وسهلة.

ما هو Bootstrap؟

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

كيفية إعداد Bootstrap في مشروع HTML

للبدء في استخدام Bootstrap في مشروع HTML الخاص بك، يمكنك إما تحميل Bootstrap محليًا أو ربطه عبر شبكة CDN (شبكة توصيل المحتوى). الطريقة الأسهل هي استخدام CDN. إليك كيفية إعداد Bootstrap باستخدام CDN.

1. تضمين Bootstrap باستخدام CDN

لإضافة Bootstrap إلى مشروعك، ما عليك سوى إضافة روابط CSS و JavaScript الخاصة بـ Bootstrap إلى ملف HTML الخاص بك داخل قسم <head>:


            <head>

                <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>

            </head>

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

نظام الشبكة (Grid System) في Bootstrap

يعد نظام الشبكة من أهم الميزات في Bootstrap، حيث يتيح لك تقسيم الصفحة إلى أعمدة وصفوف لتصميم صفحات استجابية بسهولة. الشبكة تعتمد على 12 عموداً في كل صف، ويمكنك تحديد عدد الأعمدة التي يشغلها كل عنصر.

مثال بسيط على نظام الشبكة

في هذا المثال، سنقوم بإنشاء ثلاثة أعمدة تشغل كل منها مساحة 4 أعمدة من الشبكة (من أصل 12 عموداً):


            <div class="container">

                <div class="row">

                    <div class="col-md-4">Column 1</div>

                    <div class="col-md-4">Column 2</div>

                    <div class="col-md-4">Column 3</div>

                </div>

            </div>

في هذا المثال:

container: يحدد حاوية المحتوى ويضبط الهوامش التلقائية (margins).
row: يمثل صفاً يحتوي على أعمدة.
col-md-4: يمثل عمودًا يشغل 4 أعمدة من الشبكة على الشاشات المتوسطة (Medium).

استخدام مكونات Bootstrap الجاهزة

Bootstrap يقدم مجموعة كبيرة من المكونات الجاهزة التي يمكنك استخدامها بسهولة. من بين هذه المكونات: الأزرار، القوائم المنسدلة، البطاقات، الجداول، والقوائم التنقلية. دعونا نلقي نظرة على بعض الأمثلة.

1. الأزرار (Buttons)

يتيح لك Bootstrap إضافة أزرار بشكل سريع باستخدام أصناف (Classes) معينة. على سبيل المثال، يمكنك استخدام btn وbtn-primary لإنشاء زر أزرق:


            <button class="btn btn-primary">Click me</button>

يمكنك أيضاً استخدام أصناف أخرى لتغيير ألوان الأزرار مثل:

btn-secondary: لإنشاء زر رمادي.
btn-success: لإنشاء زر أخضر.
btn-danger: لإنشاء زر أحمر.
btn-warning: لإنشاء زر أصفر.

2. القوائم التنقلية (Navbars)

يمكنك إنشاء قوائم تنقلية جذابة باستخدام مكونات navbar في Bootstrap. إليك مثال بسيط على قائمة تنقلية:


            <nav class="navbar navbar-expand-lg navbar-light bg-light">

                <a class="navbar-brand" href="#">My Website</a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">

                    <span class="navbar-toggler-icon"></span>

                </button>

                <div class="collapse navbar-collapse" id="navbarNav">

                    <ul class="navbar-nav">

                        <li class="nav-item">

                            <a class="nav-link" href="#">Home</a>

                        </li>

                    </ul>

                </div>

            </nav>

في هذا المثال:

navbar: يمثل العنصر الرئيسي للقائمة التنقلية.
navbar-toggler: يتيح فتح القائمة في الشاشات الصغيرة.
collapse: يتيح إخفاء أو إظهار القائمة بناءً على حجم الشاشة.

3. البطاقات (Cards)

البطاقات هي عناصر متعددة الاستخدامات يمكن استخدامها لعرض المحتوى مع صورة أو نص. إليك مثال على بطاقة بسيطة:


            <div class="card">

                <img src="image.jpg" class="card-img-top" alt="...">

                <div class="card-body">

                    <h5 class="card-title">Card Title</h5>

                    <p class="card-text">Some quick example text.</p>

                    <a href="#" class="btn btn-primary">Go somewhere</a>

                </div>

            </div>

الخلاصة

Bootstrap هو أداة قوية تمكن المطورين من بناء صفحات ويب متجاوبة بسرعة وكفاءة. باستخدام نظام الشبكة والمكونات الجاهزة مثل الأزرار والقوائم التنقلية والبطاقات، يمكنك تصميم صفحات ويب ذات مظهر احترافي بسهولة. مع مرور الوقت، يمكنك تخصيص Bootstrap بشكل أكبر ليناسب احتياجاتك الخاصة.