• 0

كيف اقوم بضبط التباعد في bootstrap ؟

السلام عليكم ورحمة الله اخواني

كيف اقوم بضبط التباعد ما بين الـ div الخاص بمحتوى الصفحة مع القائمة الجانبية sidebar

حيث أنه في ال bootstrap هناك div يأخذ الكلاس container ولكن هذا يجعل المحتوى بعيد نوعا ما عند يمين ويسار الصفحة 

يعني لو وضعت الsidebar في اليمين سيكون محتوى ال div الخاص بالمحتوى بعيد عن السايد بار 

 

ولو استخدمت في ال div كلاس container-fluid سيأخذ محتوى الصفحة كاملا

 

فكيف لي أن أوفق بين تقريب التباعد بين السايد بار و الديف الخاص بمحتوى الصفحة باستخدام ال bootstrap  ؟

 

2020-09-09_23-29-05.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

مرحبًا..

الرجاء إرفاق مثال لعمل قمت به و توضيح المشكلة التي تواجهك للوصول إلى النتيجة المرغوبة , حتى يتسنى لنا مساعدتك في إنجازه.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

مرحباً أبو تركي :
البوتستراب يستخدم fluid ليستفيد من الصفحة كاملة أما بداخل ال fluid يستخدم ال grid system أو نظام الشبكة ( وهو نظام يقو بتقسيم ال container ل 12 عمود ) لتوزيع العناصر بالمساحات التي يرغبون بها فمثلاً ال sidebar يأخذ مساحة 3 أعمدة من ال fluid وباقي الصفحة تأخذ 9 أعمدة  من ال fluid ... أرجو أن تدرس ال grid-system من هذا المثال وأعتقد هذا المثال مقارب لما تبحث عنه  

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 15 ساعات قال Nezar Madi:

مرحبًا..

الرجاء إرفاق مثال لعمل قمت به و توضيح المشكلة التي تواجهك للوصول إلى النتيجة المرغوبة , حتى يتسنى لنا مساعدتك في إنجازه.

هذا المطلوب 

هل يمكن وضع تصور عام لأطبق لدي في الكود؟

2020-09-10_16-51-02.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
اقتباس

هذا المطلوب 

هل يمكن وضع تصور عام لأطبق لدي في الكود؟

مرحبَا أبوتركي..

هذا تنسيق (layout) بسيط جدًا قمت بتنفيذه الأن لعمل صفحة بنفس التنسيق الذي ترغبه :

<body>
    <div class="row">
        <!-- عمود المحتوى -->
        <div class="col-9">
            <!-- الناف بار -->
            <div class="row">
            </div>
            <!-- المحتوى الرئيسي -->
            <div class="row">
            </div>
            <!-- الفوتر -->
            <div class="row">
            </div>
        </div>
        <!-- عمود القائمة الجانبية -->
        <div class="col-3">
        </div>
    </div>
</body>

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

الصفحة تتكون من صف رئيسي مقسم إلى عمودين العمود الأول على يسار الشاشة سيأخد مساحة 9 أعمدة من أصل 12 عمود أما العمود التاني سيظهر على يمين الشاشة و سيأخد مساحة 3 أعمدة ( المتبقية ).

داخل العمود الأيسر قمنا بتقسيمه إلى 3 صفوف : الصف الأول للناف بار , الصف التاني للمحتوى , الصف الثالث للفوتر.

أما العمود الأيمن بإمكانك وضع داخلة محتويات السايد بار.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 7 ساعات قال Nezar Madi:

مرحبَا أبوتركي..

هذا تنسيق (layout) بسيط جدًا قمت بتنفيذه الأن لعمل صفحة بنفس التنسيق الذي ترغبه :


<body>
    <div class="row">
        <!-- عمود المحتوى -->
        <div class="col-9">
            <!-- الناف بار -->
            <div class="row">
            </div>
            <!-- المحتوى الرئيسي -->
            <div class="row">
            </div>
            <!-- الفوتر -->
            <div class="row">
            </div>
        </div>
        <!-- عمود القائمة الجانبية -->
        <div class="col-3">
        </div>
    </div>
</body>

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

الصفحة تتكون من صف رئيسي مقسم إلى عمودين العمود الأول على يسار الشاشة سيأخد مساحة 9 أعمدة من أصل 12 عمود أما العمود التاني سيظهر على يمين الشاشة و سيأخد مساحة 3 أعمدة ( المتبقية ).

داخل العمود الأيسر قمنا بتقسيمه إلى 3 صفوف : الصف الأول للناف بار , الصف التاني للمحتوى , الصف الثالث للفوتر.

أما العمود الأيمن بإمكانك وضع داخلة محتويات السايد بار.

تحديث :

اختفاء الديف الذي في الاعلى يكون هكذا عندما اعطي للناف بار fixed-top واذا أزلتها يعود الديف لوضعه الطبيعي 

2020-09-11_0-30-06.png

تمّ تعديل بواسطة ابو تركي_2020
اضافة

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن