آموزش Bootstrap > کار با CSS و Bootstrap
کار با تصاویر و عکس ( Images ) در Bootstrap

مقدمه کار با تصاویر و عکس ( Images ) در Bootstrap :

bootstrap دارای مجموعه ای از کلاس های آماده و از پیش تعریف شده است که به وسیله آنها می توانید افکت های خاصی را به تصاویر موجود در صفحات وب خود ، اعمال کنید .
برای مثال ، می توانید گوشه های تصاویر را گرد کرده و یا با آنها آلبوم عکس بسازید .
در این درس ، به بررسی کلاس های مرتبط با تصاویر ( Images ) خواهیم پرداخت . توجه داشته باشید که این کلاس ها به تگ <img> در HTML اعمال می شوند .

ایجاد تصاویر با گوشه های گرد در Bootstrap :

به وسیله کلاس img-rounded. در Bootstrap می توانید گوشه های یک عکس ( تگ <img> ) را به صورت گرد در بیاورید .  انجام این کار همانند استفاده از خاصیت border-radius در CSS 3 می باشد .
نکته مهم : این کلاس در IE 8 کار نمی کند !  .
به کد و مثال زیر دقت ونمایید :

Example
<div class="container">
     <h2> تصویر با گوشه های گرد </h2>
     <p>  باعث می شود تا گوشه های تصویر گرد شوند  img-rounded کلاس</p>
     <img   src="../../Pic/Exam_1.jpg"  class="img-rounded"   alt="Cinque Terre" width="200" height="180">
</div>
کد
خروجی

ایجاد یک تصویر به صورت گرد ( دایره مانند ) توسط Bootstrap :

به وسیله کلاس img-circle. در Bootstrap می توانید  یک عکس ( تگ <img> ) را به صورت گرد یا دایره مانند در بیاورید . 
نکته مهم : این کلاس در IE 8 کار نمی کند !  .
به کد و مثال زیر دقت ونمایید :

Example
<div class="container">
     <h2> تصویر گرد </h2>
     <p>  باعث می شود تا  تصویر گرد شود  img-circle کلاس</p>
     <img   src="../../Pic/Exam_1.jpg"  class="img-circle"   alt="Cinque Terre" width="200" height="180">
</div>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1