استخدام Bootstrap لتقسيم الصفوف

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

في حالتك، تريد واحدة من الأعمدة أن تحتل 12 والأخرى 4. يمكن تحقيق ذلك بالشكل التالي:

htmlCopy code
<div class="container">
    <div class="row">
        <div class="col-12">
            
            <div style="background-color: #f2f2f2; padding: 20px;">
                <p>This is a content inside 12 columns div.p>
            div>
        div>
        <div class="col-4">
            
            <div style="background-color: #ccc; padding: 20px;">
                <p>This is a content inside 4 columns div.p>
            div>
        div>
    div>
div>

هنا، قمنا بتقسيم الصف إلى عمودين. العمود الأول يحتل 12 عمودًا بينما يحتل العمود الثاني 4 فقط. ثم وضعنا المحتوى داخل كل عمود بالشكل المناسب.

هذا يعني أن العنصر الذي يحتوي على 4 عمود سيظهر بجانب العنصر الذي يحتوي على 12 عمود في نفس الصف.

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

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

في المثال السابق، استخدمنا الصف (row) كعنصر أساسي لتحديد الصف الذي يحتوي على العناصر، ثم استخدمنا الأعمدة (col-*) لتقسيم هذا الصف إلى أعمدة متعددة.

مهمة الصف (row) في Bootstrap هي تحديد مجموعة من الأعمدة. كما أنه يساعد في تحديد مكان كل عمود داخل الشبكة. أما الأعمدة (col-*) فتحدد حجم وتوزيع العناصر داخل الصف.

عندما نستخدم الأعمدة في Bootstrap، يتم تقسيم كل صف (row) إلى 12 عمود. وهذا يعني أن مجموع عدد الأعمدة التي يمكنك استخدامها في الصف هو 12. يمكنك تحديد حجم كل عمود باستخدام أحد الأطوال المقدمة من Bootstrap مثل col-1، col-2، وهكذا، حتى col-12.

وفي المثال الذي قدمته، أردت أن يحتوي الصف على عمودين، واحد يحتوي على 12 عمودًا والآخر يحتوي على 4 فقط. لتحقيق هذا، قمنا بتعيين العمود الأول ليكون col-12 والعمود الثاني ليكون col-4. هذا يعني أن العنصر في العمود الثاني سيكون أصغر وسيظهر بجانب العنصر في العمود الأول.

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