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

كيفية عمل Cards تشبه طريقة عرض مجتمعات حسوب؟

Hasan Hatem

السؤال

بسم الله الرحمن الرحيم
شاهدتُ مجتمعات حسوب وطريقة العرض الموجودة الخاصة بها بأسلوب متجاوب 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

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

بتاريخ 37 دقائق مضت قال Hasan Hatem:

اريد أن تظهر كل 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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...