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

تصاویر در bootstrap

تصاویر تویتربوت استرپ

در این آموزش چگونگی طراحی تصاویر، گریدهای تصاویر، ویدئوها و متن و غیره را با تویتر بوت استرپ فراخواهید گرفت.

طراحی تصاویر با تویتر بوت استرپ

در طراحی مدرن وب وجود تصاویر بسیار متداول است، بنابراین طراحی تصاویر و قرار دادن درست آنها روی صفحات وب برای بالا بردن تجربه ی یوزر بسیار مهم است. با استفاده از گروه های داخلی بوت استرپ می توانید به راحتی تصاویر را طراحی کنید، به عنوان مثال طراحی تصاویر با گوشه های گرد و یا دادن افکت به تصاویر.

مثال :

	    Rounded Image

        Circular Image

        Polaroid Image

خروجی مثال بالا مانند زیر می باشد:

Bootstrap
نکته:

گروه های .img-rounded و .img-circle در IE8و ورژن پایین تر آن به خاطر پشتیبانی نشدن ویژگی CSS border –radiusکار نمی کنند.

تصاویر کوچک تویتر بوت استرپ

مولفه های تصاویر کوچک تویتر بوت استرپ برای ایجاد گریدهایی از تصاویر یا ویدئوها، لیست هایی از تولیدات، موجودی و غیره بسیار مفید می باشند. مثال زیر به شما نشان می دهد که برای نمایش لینک های تصاویر، تصاویر کوچکی ایجاد کنید.

مثال :

	
	
Bootstrap

همچنین می توانید مولفه های HTML مانند تیتر، پاراگراف و یا دکمه هایی را به این تصاویر اضافه کنید.

مثال :

	
Sample Image

Thumbnail label

Thumbnail description…

ShareDownload

Sample Image

Thumbnail label

Thumbnail description…

ShareDownload

نکته:

مولفه ی تصاویر کوچک از گروه های گرید موجود مانند .col-xs-*و .col-sm-* و .col-md-*و .col-lg-*برای کنترل ابعاد تصاویر استفاده می کند.

ایجاد فرم Layout افقیآبجکت های مدیا در تویتر بوت استرپ

گاهی اوقات ممکن است تمایل داشته باشید لی اوتی ایجاد کنید که دارای تصویر تنظیم شده در راست یا چپ به همراه محتوای متنی مانند تعدادی کامنت باشد. شما این کار را به راحتی می توانید از طریق مولفه ی مدیا بوت استرپ که تازه معرفی شده انجام دهید.

مثال :

Sample Image

Jhon Carter Posted on January 10, 2014

Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.

خروجی مثال بالا مانند زیر می باشد. همچنین می توانید با استفاده از مولفه ی لیست مدیا، لیستی از اشیا مدیا یا اشیا مدیای تو در تو ایجاد کنید، که می تواند برای اظهار نظر موضوعات و لیست های مقاله مفید باشد.

مثال :

  • Sample Image

    Media Heading

    Lorem ipsum dolor sit amet, consectetur adipis elit…

    Sample Image

    Nested Media Heading

    Vestibulum consectetur scelerisque faucibus…

    Sample Image

    Nested Media Heading

    Integer pulvinar leo id risus tempor…

    Sample Image

    Nested Media Heading

    Phasellus vitae suscipit justo mauris…

  • Sample Image

    Media Heading

    Quisque pharetra velit id velit iaculis pretium…

  • 2918
  •    1822
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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