آموزش bootstrap – تصاویر در بوت استرپ

آخرین بروز رسانی: شهریور ۱۶, ۱۳۹۶
آموزش تصاویر در بوت استرپ

آموزش تصاویر در بوت استرپ  

ایجاد عکس واکنش گرا در بوت استرپ

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

انواع تصاویر در بوت استرپ

 
استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس img-rounded باعث گرد شدن گوشه های عکس می شود.
کلاس img-circle عکس را به صورت دایره نمایش می دهد.
کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد.
در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید.

<img src="img/index.jpg" class="img-rounded" alt="tabiat" width="200" height="140"> <img src="img/images.jpg" class="img-circle" alt="tabiat" width="140" height="140"> <img src="img/index.jpg" class="img-thumbnail" alt="tabiat" width="200" height="140">

 

در شکل زیر می توانید انواع تصاویر در بوت استرپ را که با کد بالا ایجاد می شود را ببینید.

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

ایجاد عکس واکنش گرا در بوت استرپ

 
عکس واکنش گرا به طور اتوماتیک با تغییر سایز نمایشگر تغییر پیدا می کند. برای ایجاد عکس واکنش گرا در بوت استرپ کافی است کلاس img-responsive را به تگ img اضافه کنید. این کلاس در واقع کد max-width:100%  و height:auto را به عکس اضافه می کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <img src="img/MhCNf4uuGg.jpg" class="img-responsive" alt="tabiat" width="500" height="420"> </div> </body> </html>

این کد را در ++notepad بنویسید، سپس سایز مرورگرتان را تغییر دهید و نتیجه را مشاهده کنید.

 

ایجاد گالری تصاویر در بوت استرپ

 
برای ایجاد گالری تصاویر در بوت استرپ می توان از سیستم شبکه بندی بوت استرپ و کلاس thumbnail استفاده کرد. برای مثال فرض کنید که می خواهیم برای نمونه کارهای سایت وب یار یک گالری تصاویر ایجاد کنیم که در یک سطر، سه نمونه کار نشان داده شود. برای این کار در یک div با کلاس row ، سه div با کلاس col-md-4 قرار می دهیم زیرا می خواهیم در یک سطر سه نمونه کار قرار دهیم. سپس در هر کدام از این سه div یک div با کلاس thumbnail می گذاریم و در آن نمونه کار را قرار می دهیم. به کد زیر دقت کنید.

<div class="container" style="padding:5px 50px;"> <div class="row">  <div class="col-md-4">    <div class="thumbnail">      <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">      <img src="img/1.PNG" alt="نمونه کار وب یار" width="150" height="100"><br>      <div class="caption">       <p style="text-align:center;">طراحی سایت مشاور املاک</p>      </div>      </a>    </div>  </div>  <div class="col-md-4">   <div class="thumbnail">      <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">      <img src="img/2.PNG" alt="نمونه کار وب یار" width="150" height="100">      <div class="caption">       <p style="text-align:center;">طراحی سایت فروش ساعت</p>      </div>      </a>   </div>  </div>  <div class="col-md-4">   <div class="thumbnail">    <a href="https://www.webyar.net/category/sample-webdesign/" target="_blank">    <img src="img/3.PNG" alt="نمونه کار وب یار" width="150" height="100"><br>    <div class="caption">     <p style="text-align:center;">طراحی سایت صنعتی توربو</p>    </div>    </a>   </div>   </div>  </div> </div>

با استفاده از کلاس caption می توان برای عکس ها یک توضیح ارائه داد. خروجی به صورت زیر است.

 

ایجاد گالری تصاویر در بوت استرپ

 

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

نوشته آموزش bootstrap – تصاویر در بوت استرپ اولین بار در طراحی سایت اصفهان | سئو سایت در اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت در اصفهان

پربازدیدترین اخبار
طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

دانلود آهنگ جدید دانلود آهنگ جدید – دانلود موزیک دانلود آهنگ ملانی محال دیگه برگردم DL New Hit Music , Melani Called Mahale Dg Bargardam ملانی محال دیگه برگردم محال دیگه برگردم ملانی قسمتی از متن آهنگ قبلی خیالاتی : دوباره من و شب و بیداری و فکر توی لعنتی تا دم دمای صبح دوباره […]

Apowersoft Streaming Video Recorder نرم افزاری بسیار ساده اما قدرتمند و فوق العاده مفید در زمینه دانلود و ضبط ویدئوهای آنلاینی است که در سایت های مختلف وجود دارد و بیشتر اوقات امکان دریافت آن ها وجود ندارد. این ابزار کمک می کند به راحتی بتوان این ویدئوها را دانلود نموده و در سیستم رایانه […]

یكی از بهترین نرم افزار های رایت سی دی، دی وی دی، دیسك های Blu-ray ،HD DVD، و شكستن بسیار آسان قفل و همچنین شما می توانید از دی وی دی هائی كه در برابر رایت محافظت شده اند را به راحتی از آن كپی برداری كنید. AnyDVD به مانند یک درایور در پشت صحنه […]

دانلود آهنگ جدید دانلود آهنگ جدید – دانلود موزیک دانلود آهنگ جدید محسن چاوشی فندک تب دار DL New Hit Music , Mohsen Chavoshi Called Fandak Tabdar محسن چاوشی فندک تب دار فندک تبدار محسن چاوشی قسمتی از متن آهنگ : خط رو پیشونیم چشمای بارونیم دستای لرزونم پاهای بی جونم روح سرگردونم گلای ایوونم […]