Bootstrap – המדריך – פרק 6 – עבודה עם תמונות

24 בנובמבר 2015

תגיות: , ,
אין תגובות

לתוכן העניינים.

 

בפרק הקודם למדנו על טבלאות, הפעם נראה מה יש לספרייה להציע לנו בעבודה עם תמונות.

 

הספרייה נותנת שני שירותים עיקריים בעבודה עם תמונות:

  • תמיכה בהקטנת והגדלת התמונה לפי המקום שיש לה, בעזרת שימוש במחלקה img-responsive.
  • מתן “מסגרת” לתמונה בעזרת אחד משלושת המחלקות הבאות:
    • img-rounded – המעגל את הפינות של התמונה.
    • img-circle – המעגל את כל התמונה
    • img-thumbnail – הנותן מסגרת לתמונות.

 

כל תמונה הנמצאת בתוך col-[SIZE]-xx כלשהו (size כמובן זה הרזולוצייה הרלוונטית, כפי שלמדנו כאן) ו – xx זה המקום שניתן לעמודה (בין 1 ל – 12), התמונה תגדל ותקטן בהתאם למקום שיש לה תוך שמירה על יחס רוחב-גובה.

כל תמונה שתקבל את אחת משלושת המחלקות של המסגרת, תקבל את העיצוב המתאים.

image

 

הקוד הרלוונטי הוא כדלהלן:

Code Snippet
<div class="row">
<div class="col-xs-4">
<img src="../Content/images/p1.jpg" class="img-responsive img-circle" />
</div>
<div class="col-xs-4">
<img src="../Content/images/p2.jpg" class="img-responsive img-rounded" />
</div>
<div class="col-md-4">
<img src="../Content/images/p3.jpg" class="img-responsive img-thumbnail" />
</div>
</div>

 

בפרק הבא נלמד על Well

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *