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

     

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

     

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

    • תמיכה בהקטנת והגדלת התמונה לפי המקום שיש לה, בעזרת שימוש במחלקה 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>