اذهب إلى المحتوى

السؤال

نشر

بسم الله الرحمن الرحيم
شاهدتُ مجتمعات حسوب وطريقة العرض الموجودة الخاصة بها بأسلوب متجاوب responsive وأرغب في تعلّم تلك الطريقة الموزعة،هل يوجد framework جاهز أم لا، لأنه حتى ال bootstrap لا يستطيع التوزيع بتلك الطريقة.

وشكرًا لكم

Recommended Posts

  • 0
نشر

يمكنك عمل Cards تشبه طريقة عرض مجتمعات حسوب عن طريق CSS بدون استعمال أي framework (عن طريق media query لجعل التصميم متجاوب ...) ، ولكن عملها عن طريق bootstrap سيكون أسهل بكثير حيث يكفي أن تقوم ببعض التعديلات عن طريق ملف CSS آخر وسيظهر التصميم كما تريد.

  • 0
نشر
بتاريخ On 6/18/2016 at 03:22 قال hassenzouari98:

يمكنك عمل Cards تشبه طريقة عرض مجتمعات حسوب عن طريق CSS بدون استعمال اي framework (عن طريق media query لجعل التصميم متجاوب ...) ، ولكن عملها عن طريق bootstrap سيكون اسهل بكثير حيث يكفي ان تقوم ببعض التعديلات عن طريق ملف CSS اخر وسيظهر التصميم كما تريد ... 

قمت بتطبيق ما ذكرته، لكني لا أعرف طريقة عمل التوزيع العشوائي والـ bootstrap  ليقوم بتوزيع المربعات بطريقة ومسافات مُعينة. 
أحيانًا إذا جاء أحد الـ card أطول من غيره سوف يكون فراغات كثيرة بدون فائدة. 

عكس مجتمعات حسوب كل مجتمع يتواجد أسفل المجتمع الآخر بمسافة معينة مهما اختلف وصف المجتمع عن غيره.

  • 0
نشر
بتاريخ On 6/18/2016 at 04:44 قال Hasan Hatem:

فهمان عليك وعملت نفس الشي 
بس الترتيب التي تظهر به فوق بعضها بمسافات محددة 
وتوزيع عشوائي لا اعرف طريقة عمل التوزيع العشوائي وال bootstrap 

يقوم بتوزيع بطريقة ومسافات معيينة 
احيانا اذا جاء أحد ال card اطول من غيرها سوف يكون فراغات كثيرة بدون فائدة 

عكس مجتمعات حسوب كل مجتمع يتواجد اسفل المجتمع الآخر بمسافة معينة مهما اختلف وصف المجتمع عن غيره

 
 

باختصار أخي يمكنك عمل صفحة مثل هذه بالاعتماد على خاصية box-sizing المتوفرة منذ css3 أو عن طريق خاصية float (أصعب قليلا).

أما بالنسبة للتوزيع العشوائي فهي تتم عن طريق لغة البرمجة عن طريق خاصية random عن جلب محتوى من قاعدة البيانات.

  • 0
نشر
بتاريخ On 6/18/2016 at 05:22 قال hassenzouari98:

باختصار اخي يمكنك عمل صفحة مثل هذه بالاعتماد على خاصية box-sizing المتوفرة منذ css3 او عن طريق خاصية float (أصعب قليلا)

اما بالنسبة للتوزيع العشوائي فهي تتم عن طريق لغة البرمجة عن طريق خاصية random عن جلب محتوى من قاعدة البيانات.

لا أقصد الجلب من قاعدة البيانات

لكن الـ border-box لا تفي بالغرض.

  • 0
نشر
بتاريخ On 6/18/2016 at 05:54 قال Hasan Hatem:

لا اقصد الجلب من قاعدة البيانات

لكن ال border-box لا تفي بالغرض

 

خاصية الـ box-sizing تفي بالغرض أو عن عن طريق جعلهم span ومن ثم اعطائهم خاصية display :inline-block; ومن عمل float وستظهر تقريبا كما هي في hsoub io  
الكود تقريبا : http://codepen.io/hassenzouari98/pen/KMggza

  • 0
نشر
بتاريخ 22 ساعات قال hassenzouari98:

 

اخي كما قلت لك سابقا خاصية ال box-sizing تفي بالغرض او عن عن طريق جعلهم span ومن ثم اعطائهم خاصية display :inline-block; ومن عمل float وستظهر تقريبا كما هي في hsoub io  
الكود تقريبا : http://codepen.io/hassenzouari98/pen/KMggza

مشكور جدا أخي 
لكن توجد مشكلة بسيطة .
عند تصغير الشاشة الي الأخير يعني عند فتح الموقع بحجم بالأيفون أو أي موبايل آخر ،تظهر 2 Cards بجانب بعض 

أريد أن تظهر كل card فوق بعضا وليس اثنان اثنان فوق بعض.

  • 0
نشر
بتاريخ 16 ساعات قال hassenzouari98:

انا في الخدمة في اي وقت اخي :) 

تم تعديله ليظهر كما تريد

أنت فنان ومبدع شكرا لك يا غالي
صراحة أنا كتير متعمق بالبرمجة أكثر من التصميم.

لكن لفتت نظري الي اشياء جديدة سوف اقوم بالتعلم لها من جديد وشكرا لك مرة أخرى.
هل لي بالكورس الذي قمت بمتابعته ؟
لمعرفة هذه الخصائص ؟

  • 0
نشر

العفو هذا واجبي أخي

كذلك أنا مثلك في البداية تعمقة في البرمجة كثيرًا ظنا مني أنه لافائدة من التصميم (أي أنه أمر ثانوي) ولكني مع مرور الزمن اكتشفت اني مخطأ وأن التصميم من الأمور الأساسية والمهمة جدًا ، وكنصيحة اخرى ابدا بتعلم الأساسيات ولاتتعجل في استعمال أطر العمل.
اما عن الكورس فأنصحك بأن تتابع الدروس التي تُنشر هنا في أكاديمية حسوب، مثل سلسلة دروس المبتدأين 101 والتي تُنشر تباعًا، كذلك دروس css، و دروس html.

  • 0
نشر
بتاريخ On ١٩‏/٦‏/٢٠١٦ at 04:17 قال hassenzouari98:

العفو هذا واجبي أخي

كذلك أنا مثلك في البداية تعمقة في البرمجة كثيرًا ظنا مني أنه لافائدة من التصميم (أي أنه أمر ثانوي) ولكني مع مرور الزمن اكتشفت اني مخطأ وأن التصميم من الأمور الأساسية والمهمة جدًا ، وكنصيحة اخرى ابدا بتعلم الأساسيات ولاتتعجل في استعمال أطر العمل.
اما عن الكورس فأنصحك بأن تتابع الدروس التي تُنشر هنا في أكاديمية حسوب، مثل سلسلة دروس المبتدأين 101 والتي تُنشر تباعًا، كذلك دروس css، و دروس html.

مسا الخير أخي 
انا مرة طلبت منك تصميم Cards 
إن التصميم يعمل على ال Google Chrome بشكل ممتاز
لكن على ال Mozilla لا يعمل تظهر ال Cards فوق بعضها البعض

لم أعرف الحل أخي ... هل لي بمساعدة .؟

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...