آموزش 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 – تصاویر در بوت استرپ اولین بار در طراحی سایت اصفهان | سئو سایت در اصفهان پدیدار شد.

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

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

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

دانلود رام رسمی اندروید ۷ بتا نوقا برای هواوی آنر ۶ ایکس (Honor 6X) مدل BLN-L21 با لینک دانلود مستقیم و آموزش نصب و راه اندازی در این پست ارائه میشود. آنر ۶ ایکس محصول اکتبر ۲۰۱۶ یک دستگاه با صفحه نمایش ۵٫۵ اینچی و رزولوشن فول اچ دی است که با ارائه رم ۳ الی ۴ گیگابایتی و […]

صفحه فرود یا Landing Page  در آموزش های مباحث تبلیغات سایت ها امروز قصد داریم آموزش Landing Page  یا صفحه ی فرود که یکی از موارد مهم در بازاریابی اینترنتی و تجارت آنلاین می باشد را برای شما عزیزان مطرح کنیم  و به اهمیت و دلایل طراحی Landing Page بپردازیم. در ابتدا به توضیحی مختصر […]

صفحه فرود یا Landing Page  در آموزش های مباحث تبلیغات سایت ها امروز قصد داریم آموزش Landing Page  یا صفحه ی فرود که یکی از موارد مهم در بازاریابی اینترنتی و تجارت آنلاین می باشد را برای شما عزیزان مطرح کنیم  و به اهمیت و دلایل طراحی Landing Page بپردازیم. در ابتدا به توضیحی مختصر […]

بازاریابی محتوا و سئو   بازاریابی محتوا و سئو چه ارتباطی با یکدیگر دارند ؟   اگر شما یک کسب و کار اینترنتی یا آنلاین دارید برای ارتقای آن و توسعه تجارت خود باید بازدید و رتبه بندی مناسب در گوگل به دست بیاورید که این کار آسانی است اگر مقاله با ما تا انتهای […]