آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تصاویر در BootStrap

دوره های مرتبط با این مقاله

گوشه های گرد شده (Rounded Corners)

کلاسِ .img-rounded موجب گرد شدن گوشه ی عکس می شود (IE8 از این کلاس پشتیبانی نمی کند):

نمونه 1

    <img src="http://articles.tahlildadeh.com/image.axd?picture=cinqueterre_thumb_3.jpg" class="img-rounded" width="304" height="236">
 
امتحان کنید

دایره (Circle)

کلاسِ .img-circle موجب مدور شدن تصاویر شده و آنها را به صورت دایره ای نشان می دهد:

نمونه 2

    <img src="http://articles.tahlildadeh.com/image.axd?picture=cinqueterre_thumb_3.jpg" class="img-circle" width="304" height="236">
 

امتحان کنید

عکس بند انگشتی (Thumbnail)

کلاسِ .img-thumbnail عکس را به شکل بندانگشتی در می آورد:

نمونه 3

    <img src="http://articles.tahlildadeh.com/image.axd?picture=cinqueterre_thumb_3.jpg" class="img-thumbnail" width="304" height="236">
 

امتحان کنید

تصاویر واکنش گرا (Responsive Images)

عکس ها در همه ی سایزها وجود دارند. تصاویرِ Responsive برای تطبیقِ اندازه ی خود با سایزِ صفحه ی نمایشگر، به صورت خودکار تنظیم می شوند. برای ایجاد یک تصویرِ Responsive کافی است که کلاسِ .img-responsive را به تگِ بیفزایید. با این کار، عکس مورد نظر به سادگی خود را با مقیاسِ عنصر والد، تنظیم می کند. کلاسِ .img-responsive استایل های display: block;، max-width: 100%;، و height: auto; را به تصویر اضافه می کند:

نمونه 4

    <img class="img-responsive" src="http://articles.tahlildadeh.com/image.axd?picture=img_chania_thumb_4.jpg" alt="Chania">
 

امتحان کنید

گالری عکس (Image Gallery)

برای ایجاد گالری عکس می توان کلاسِ.thumbnail را به سیستم BootStrap’s Grid اضافه نمود:

نمونه 5

<div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="http://articles.tahlildadeh.com/image.axd?picture=lights_thumb_4.jpg">
                    <img src="http://articles.tahlildadeh.com/image.axd?picture=lights_thumb_4.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                        <p>Lorem ipsum...</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="http://articles.tahlildadeh.com/image.axd?picture=nature_thumb_3.jpg">
                    <img src="http://articles.tahlildadeh.com/image.axd?picture=nature_thumb_3.jpg" alt="Nature" style="width:100%">
                    <div class="caption">
                        <p>Lorem ipsum...</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="http://articles.tahlildadeh.com/image.axd?picture=fjords_thumb_3.jpg">
                    <img src="http://articles.tahlildadeh.com/image.axd?picture=fjords_thumb_3.jpg" alt="Fjords" style="width:100%">
                    <div class="caption">
                        <p>Lorem ipsum...</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
امتحان کنید

Embed های واکنش گرا

استفاده از Embed های واکنش گرا (Responsive) موجب می شود که ویدئوها یا اسلایدها به درستی بر روی هر وسیله ای مقیاس بندی شوند. کلاس های مربوط به این استایل می توانند به راحتی برای عناصرِ <iframe> ،<embed>، <video> ، و <object> به کار گرفته شوند.
در مثال پایین یک ویدئوی Responsive با افزودنِ کلاسِ .embed-responsive-item به تگِ <iframe> ، ایجاد می شود.
محتوایِ تگِ <div> نسبت تصویر(Aspect Ratio) ویدئو را تعریف می کند:

نمونه 6

<div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
امتحان کنید

نسبت تصویر یا نسبت منظر (Aspect Ratio) عبارت است از رابطه ی بین پهنا و ارتفاع یک تصویر. دو نسبت تصویر ویدئویی رایج وجود دارد: 4:3 که فرمت جهانیِ ویدئویی در قرن بیستم می باشد، و 16:9 که فرمت جهانی برای تلویزیون های HD و تلویزیون های دیجیتال اروپایی است.
به صورت زیر می توان ابعاد دلخواه را انتخاب نمود:

  • 2471
  •    1004
  • تاریخ ارسال :   1395/10/07

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .