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

[marzieh1270]

سلام
چطوری می تونم در سایتم گالری تصاویر با بوت استرپ ایجاد کنم؟

[shimasgs2]

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


<div class="container">
<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>

برای اطلاعات بیشتر توی این زمینه می توانید به سایت طراحی سایت (https://www.webyar.net) وب یار مراجعه کنید.

[m2n]

یعنی خودتون تاپیک میزنید خودتون هم بر می گردین جواب میدین :71: اینجوری پیش برین از دست میرین.

- - - Updated - - -

یعنی خودتون تاپیک میزنید خودتون هم بر می گردین جواب میدین :71: اینجوری پیش برین از دست میرین.