031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » آموزش bootstrap – تصاویر در بوت استرپ

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

۲۹ام مرداد ۱۳۹۶
مرضیه خیرخواه
127

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

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

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

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

 
استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد.
کلاس 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 – تصاویر در بوت استرپ
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی میک رویال

طراحی سایت فروشگاه اینترنتی میک رویال طراحی سایت فروشگاهی میک رویال با رعایت اصول سئو در کدنویسی یکی از نمونه کارهای حرفه ای تیم طراحی سایت وب یار است. فروشگاه میک رویال در زمینه ی فروش قاب موبایل ، تیشرت ، گردنبند ، دستبند ، سرکلیدی ، کوسن ، بالشت و رو تختی فعالیت دارد. […]

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی عرضه تخمه

طراحی سایت فروشگاهی عرضه تخمه طراحی سایت اختصاصی طعم آفرین بهاران عرضه کننده انواع تخمه های کدو / هندوانه و آفتابگردان وارداتی در اصفهان  از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاهی طعم آفرین بهاران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید