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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تصاویر کوچک در بوت استرپ خواهیم پرداخت.
در این فصل در مورد تصاویر کوچک بوت استرپ بحث شده است. بسیاری از سایت ها به یک روش برای قرار دادن تصاویر، فیلم ها ، متن و غیره در یک شبکه نیاز دارند و Bootstrap یک روش آسان برای انجام این کار با تصاویر کوچک دارد. برای ایجاد ریز عکسها با استفاده از بوت استرپ –

تگ <a> را با کلاس thumbnail. در اطراف تصویر اضافه کنید.
با این کار چهار پیکسل padding و حاشیه خاکستری اضافه می شود.
در حالت شناور ، یک درخشش متحرک تصویر کلی را به تصویر می کشد.

مثال زیر یک تصویر کوچک پیش فرض را نشان می دهد –

&lt;div class = "row"&gt;
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;a href = "#" class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;a href = "#" class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;a href = "#" class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;a href = "#" class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/a&gt;
   &lt;/div&gt;
&lt;/div&gt;

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

Generic placeholder thumbnail

افزودن محتوای سفارشی

اکنون که یک تصویر کوچک پایه داریم، می توان هر نوع محتوای HTML مانند عنوان، پاراگراف یا دکمه را به تصاویر کوچک اضافه کرد. مراحل زیر را دنبال کنید –

تگ <a> را که دارای کلاس thumbnailو است به <div> تغییر دهید.
در داخل آن <div>، می توانید هر آنچه را که نیاز دارید اضافه کنید. از آنجا که این یک <div> است، می توانیم از قرارداد نامگذاری پیش فرض span-based برای اندازه گیری استفاده کنیم.
اگر می خواهید چندین تصویر را گروه بندی کنید ، آنها را در یک لیست غیر مرتب قرار دهید ، و هر مورد از لیست در سمت چپ شناور می شود.

مثال زیر این را نشان می دهد –

&lt;div class = "row"&gt;
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;div class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/div&gt;
      
      &lt;div class = "caption"&gt;
         &lt;h3&gt;Thumbnail label&lt;/h3&gt;
         &lt;p&gt;Some sample text. Some sample text.&lt;/p&gt;
         
         &lt;p&gt;
            &lt;a href = "#" class = "btn btn-primary" role = "button"&gt;
               Button
            &lt;/a&gt; 
            
            &lt;a href = "#" class = "btn btn-default" role = "button"&gt;
               Button
            &lt;/a&gt;
         &lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;div class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/div&gt;
      
      &lt;div class = "caption"&gt;
         &lt;h3&gt;Thumbnail label&lt;/h3&gt;
         &lt;p&gt;Some sample text. Some sample text.&lt;/p&gt;
         
         &lt;p&gt;
            &lt;a href = "#" class = "btn btn-primary" role = "button"&gt;
               Button
            &lt;/a&gt; 
            
            &lt;a href = "#" class = "btn btn-default" role = "button"&gt;
               Button
            &lt;/a&gt;
         &lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;div class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/div&gt;
      
      &lt;div class = "caption"&gt;
         &lt;h3&gt;Thumbnail label&lt;/h3&gt;
         &lt;p&gt;Some sample text. Some sample text.&lt;/p&gt;
         
         &lt;p&gt;
            &lt;a href = "#" class = "btn btn-primary" role = "button"&gt;
               Button
            &lt;/a&gt; 
            
            &lt;a href = "#" class = "btn btn-default" role =" button"&gt;
               Button
            &lt;/a&gt;
         &lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class = "col-sm-6 col-md-3"&gt;
      &lt;div class = "thumbnail"&gt;
         &lt;img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail"&gt;
      &lt;/div&gt;
      
      &lt;div class = "caption"&gt;
         &lt;h3&gt;Thumbnail label&lt;/h3&gt;
         &lt;p&gt;Some sample text. Some sample text.&lt;/p&gt;
         
         &lt;p&gt;
            &lt;a href = "#" class = "btn btn-primary" role = "button"&gt;
               Button
            &lt;/a&gt; 
            
            &lt;a href = "#" class = "btn btn-default" role = "button"&gt;
               Button
            &lt;/a&gt;
         &lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

</div>

<h3>Thumbnail label</h3>

<p>Some sample text. Some sample text.</p>

<p>

Button

</a>

Button

</a>

</p>

</div>

</div>

<h3>Thumbnail label</h3>

<p>Some sample text. Some sample text.</p>

<p>

Button

</a>

Button

</a>

</p>

</div>

</div>

<h3>Thumbnail label</h3>

<p>Some sample text. Some sample text.</p>

<p>

Button

</a>

Button

</a>

</p>

</div>

</div>

<h3>Thumbnail label</h3>

<p>Some sample text. Some sample text.</p>

<p>

Button

</a>

Button

</a>

</p>

</div>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

نویسنده مطلب saber

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

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

افزودن محتوای سفارشی

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

افزودن محتوای سفارشی

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه