ابو تركي_2020 نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 السلام عليكم ورحمة الله اخواني كيف اقوم بضبط التباعد ما بين الـ div الخاص بمحتوى الصفحة مع القائمة الجانبية sidebar حيث أنه في ال bootstrap هناك div يأخذ الكلاس container ولكن هذا يجعل المحتوى بعيد نوعا ما عند يمين ويسار الصفحة يعني لو وضعت الsidebar في اليمين سيكون محتوى ال div الخاص بالمحتوى بعيد عن السايد بار ولو استخدمت في ال div كلاس container-fluid سيأخذ محتوى الصفحة كاملا فكيف لي أن أوفق بين تقريب التباعد بين السايد بار و الديف الخاص بمحتوى الصفحة باستخدام ال bootstrap ؟ اقتباس
0 Nezar Madi نشر 9 سبتمبر 2020 أرسل تقرير نشر 9 سبتمبر 2020 مرحبًا.. الرجاء إرفاق مثال لعمل قمت به و توضيح المشكلة التي تواجهك للوصول إلى النتيجة المرغوبة , حتى يتسنى لنا مساعدتك في إنجازه. 1 اقتباس
0 Mohammed Saber6 نشر 10 سبتمبر 2020 أرسل تقرير نشر 10 سبتمبر 2020 مرحباً أبو تركي : البوتستراب يستخدم fluid ليستفيد من الصفحة كاملة أما بداخل ال fluid يستخدم ال grid system أو نظام الشبكة ( وهو نظام يقو بتقسيم ال container ل 12 عمود ) لتوزيع العناصر بالمساحات التي يرغبون بها فمثلاً ال sidebar يأخذ مساحة 3 أعمدة من ال fluid وباقي الصفحة تأخذ 9 أعمدة من ال fluid ... أرجو أن تدرس ال grid-system من هذا المثال وأعتقد هذا المثال مقارب لما تبحث عنه 1 اقتباس
0 ابو تركي_2020 نشر 10 سبتمبر 2020 الكاتب أرسل تقرير نشر 10 سبتمبر 2020 بتاريخ 15 ساعات قال Nezar Madi: مرحبًا.. الرجاء إرفاق مثال لعمل قمت به و توضيح المشكلة التي تواجهك للوصول إلى النتيجة المرغوبة , حتى يتسنى لنا مساعدتك في إنجازه. هذا المطلوب هل يمكن وضع تصور عام لأطبق لدي في الكود؟ اقتباس
0 Nezar Madi نشر 10 سبتمبر 2020 أرسل تقرير نشر 10 سبتمبر 2020 اقتباس هذا المطلوب هل يمكن وضع تصور عام لأطبق لدي في الكود؟ مرحبَا أبوتركي.. هذا تنسيق (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 ابو تركي_2020 نشر 10 سبتمبر 2020 الكاتب أرسل تقرير نشر 10 سبتمبر 2020 (معدل) بتاريخ 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 واذا أزلتها يعود الديف لوضعه الطبيعي تم التعديل في 10 سبتمبر 2020 بواسطة ابو تركي_2020 اضافة اقتباس
السؤال
ابو تركي_2020
السلام عليكم ورحمة الله اخواني
كيف اقوم بضبط التباعد ما بين الـ div الخاص بمحتوى الصفحة مع القائمة الجانبية sidebar
حيث أنه في ال bootstrap هناك div يأخذ الكلاس container ولكن هذا يجعل المحتوى بعيد نوعا ما عند يمين ويسار الصفحة
يعني لو وضعت الsidebar في اليمين سيكون محتوى ال div الخاص بالمحتوى بعيد عن السايد بار
ولو استخدمت في ال div كلاس container-fluid سيأخذ محتوى الصفحة كاملا
فكيف لي أن أوفق بين تقريب التباعد بين السايد بار و الديف الخاص بمحتوى الصفحة باستخدام ال bootstrap ؟
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.