ABA


"CSS משהו שאני מנסה לעשות כבר הרבה זמן ב Bootsrap"
גירסת הדפסה        
קבוצות דיון פיתוח, תיכנות ובניית אתרים נושא #21435 מנהל    סגן המנהל    מפקח   Winner    צל"ש   מומחה  
אשכול מספר 21435
כמה עוד לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 18.11.09
234 הודעות, 11 פידבק
   19:16   23.09.15   
אל הפורום  
  CSS משהו שאני מנסה לעשות כבר הרבה זמן ב Bootsrap  
 
   ולא ממש מצליח לעשות
אני רוצה לעשות עמוד חנות לדוגמא. ושבמסך גדול הוא יהיה עם 4 מוצרים בשורה
וכשאני מקטין את המסך הוא יהיה עם 3 מוצרים בשורה, ועוד הקטנה שיהיה עם 2 מוצרים בשורה ובסוף עם אחד

אני קצת מנסה להימנע למתת לכל colomn רוחב באחוזים, וכנראה שזה שאני עובד עם width זה מה שתוקע אותי
אשמח לעזרה

מצרף סקיצה של המצב ההתחלתי שאני רוצה שיהיה, 4 מוצרים בשורה


                                שתף        
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

  האשכול     מחבר     תאריך כתיבה     מספר  
  רספונסיביות Webstorm 23.09.15 19:51 1
     כן ניסיתי וזה לא כל כך הלך כמה עוד 24.09.15 10:22 3
         תגובה Webstorm 24.09.15 10:40 4
             תודה רבה על התשובה המפורטת כמה עוד 24.09.15 11:59 5
                 כל שורה זה 12 עמודות. inno3D 24.09.15 23:51 7
                 תגובה Webstorm 25.09.15 03:58 8
             + יש גם XS אם אני זוכר נכון שזה הכי קטן איציק2 24.09.15 22:30 6
  תחפש Bootstrap 3 Grid Zeet3x  24.09.15 00:27 2
  תראה משהו שעשיתי בלי BOOTSTRAP הכל CSS טהור aCoZz  01.10.15 00:54 9

       
Webstorm
חבר מתאריך 2.8.15
65 הודעות
   19:51   23.09.15   
אל הפורום  
  1. רספונסיביות  
בתגובה להודעה מספר 0
 
   ניסית את הקלאסים של שורות וטורים ?


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
כמה עוד לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 18.11.09
234 הודעות, 11 פידבק
   10:22   24.09.15   
אל הפורום  
  3. כן ניסיתי וזה לא כל כך הלך  
בתגובה להודעה מספר 1
 
   אולי עדיף לי לקבוע 4 טורים עם אחוזים ובתוך כל תור לשים ריבוע בשביל מוצר שיהיה בגודל קבוע?


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Webstorm
חבר מתאריך 2.8.15
65 הודעות
   10:40   24.09.15   
אל הפורום  
  4. תגובה  
בתגובה להודעה מספר 3
 
   למיטב ידיעתי , אתה בכלל לא צריך לשחק עם אחוזים...
האחוזים מחושבים בצורה אוטומטית ברגע שאתה מגדיר כמה רוחב כל עמודה תתפוס..
לדוגמא :
col-md-3 זו עמודה שתתפוס רבע מסך במסכים שהם בינוניים (laptops)
במידה ואתה נותן 3 div עם הקלאס הזה בשורה אחת זה אמור להסתדר לך.
כלומר :

<div class =row>
<div class=col-md-3> ריבוע </div>
<div class=col-md-3> ריבוע </div>
<div class=col-md-3> ריבוע </div>
</div>
שים לב שעמודות אלו יתפסו שליש כי הגריד בבוטסטרפ מורכב מ12 עמודות (4 עמודות שתופסות שליש ייתנו לך סה"כ 12)
כמובן שאתה צריך למלא את הקלאסים ל3 נקודות השבירה - (md - מסכים בינוניים , sm -סמארטפונים וטאבלטים, lg - מסכי מחשב , xl - טלוויזיות ) . bootstrap יודע לחשב את האחוזים לבד לפי ההגדרות הדפולטיביות שלו..
תגיד לי אם הצלחת.


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
כמה עוד לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 18.11.09
234 הודעות, 11 פידבק
   11:59   24.09.15   
אל הפורום  
  5. תודה רבה על התשובה המפורטת  
בתגובה להודעה מספר 4
 
   האמת שאני רוצה לעשות 4 מוצרים בהתחלה ולא 3
אז לעשות md של 4?

ומה שאמרת לגבי הנקודות שבירה, זה קלאסים נוספים שאני כותב ביחד לכל DIV או שאתה ממליץ לעבוד עם @media query?


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
inno3D
חבר מתאריך 21.4.02
4533 הודעות
   23:51   24.09.15   
אל הפורום  
  7. כל שורה זה 12 עמודות.  
בתגובה להודעה מספר 5
 
   אז אתה יכול לשים 3 div של 4 עמודות והם יהיו באותה שורה
אם בשורה מסויימת יהיה לך מעל 12 - הם יתפצלו ל 2 שורות


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Webstorm
חבר מתאריך 2.8.15
65 הודעות
   03:58   25.09.15   
אל הפורום  
  8. תגובה  
בתגובה להודעה מספר 5
 
   בגדול הקלאסים ייתנו לך את מה שאתה צריך.. שימוש בmedia query יבוא כאשר רוצים לשבור את הגריד הדיפולטיבי של boostrap....


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
איציק2
חבר מתאריך 26.4.08
2436 הודעות
   22:30   24.09.15   
אל הפורום  
  6. + יש גם XS אם אני זוכר נכון שזה הכי קטן  
בתגובה להודעה מספר 4
 
  


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
Zeet3x  לחץ כאן להצגת דירוג המשתמש
חבר מתאריך 14.2.12
9976 הודעות, 24 פידבק
   00:27   24.09.15   
אל הפורום  
  2. תחפש Bootstrap 3 Grid  
בתגובה להודעה מספר 0
 
   ויש לך גם את הלינדה הבאה שעוסקת בזה בצורה ממש טובה:
LYNDA_BOOTSTRAP_3_ESSENTIAL_TRAINING_TUTORIAL-kEISO


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד
aCoZz 
חבר מתאריך 19.7.06
17692 הודעות
   00:54   01.10.15   
אל הפורום  
  9. תראה משהו שעשיתי בלי BOOTSTRAP הכל CSS טהור  
בתגובה להודעה מספר 0
 
   אם זה הכיוון שלך דבר איתי אני יעזור לך.
רגיל :
http://up415.siz.co.il/up2/j2xihyymthc2.png
טאבלט :
http://up415.siz.co.il/up1/mt1fumcnzhmz.png
טלפון :
http://up415.siz.co.il/up1/lm2ngefmmz3y.png


                                                         (ניהול: מחק תגובה)
מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

תגובה מהירה  למכתב מספר: 
 
___________________________________________________________________

___________________________________________________________________
למנהלים:  נעל | תייק בארכיון | מחק | העבר לפורום אחר | מחק תגובות | עגן אשכול
       



© כל הזכויות שמורות ל-רוטר.נט בע"מ rotter.net