آموزش برنامه نویسی

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

اگر یادتون باشه در css برای اینکه روی عناصر کنترل داشته باشیم از خصوصیات استفاده می کردیم.

درcss کلاس ها را خودمان می نوشتیم اما این کنترل ها در بوت استرپ کلاس های از پیش تعریف شده هستند.

تصاویربوت استرپ به طور پیش فرض کلاس هایی برایشان تعریف شده است .

با استفاده ازاین کلاس ها می توان بدون استایل نویسی(همانند کاری که در css انجام می دادیم)به راحتی خصوصیات را به تصاویردربوت استرپ اضافه کرد.با ما همراه باشید تا به بررسی  این کلاس ها بپردازیم.

کلاس IMG – ROUNDED :

اولین کلاسی که می خواهم براتون در موردش صحبت کنم کلاس img-rounded. است.

اگریادتون باشه درcss برای این که  حاشیه های یک تصویررو گرد می کردیم از ویژگی border-radius  استفاده می کردیم.

گردکردن حاشیه تصاویر در بوت استرپ به طور پیش فرض تعریف شده است.

دربوت استرپ این کاررا با کلاس img-rounded انجام می دهیم به تصاویر زیر دقت نمایید.

نکته : IE این ویژگی را پشتیبانی نمی کند.

 

<div class="container">
 <h2>Rounded Corners</h2>
 <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p> 
 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

 

 

 

 

 

کلاس IMG – CIRCLE :

تصاویر بوت استرپ را می توان به وسیله کلاس img – circle به شکل دایره نمایش داد.

مرورگر IE8 از این ویژگی پشتیبانی نمی کند.

<div class="container">
 <h2>Circle</h2>
 <p>The .img-circle class shapes the image to a circle (not available in IE8):</p> 
 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> 
</div>

 

 

 

 

 

 

کلاس IMG-THUMBNAIL :

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

 

<div class="container">
 <h2>Thumbnail</h2>
 <p>The .img-thumbnail class creates a thumbnail of the image:</p> 
 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>

 

 

کلاس IMG-RESPONSIVE :

درcss برای ریسپانسیوکردن تصاویر از مدیا اسکرین ها استفاده می کردیم.

این کا را برای رزولوشن های مختلف انجام می دادیم و زمان زیادی از ما می گرفت .

تصاویر بوت استرپ را با کلاس img-responsive  می توان ریسپانسیو کرد.بدون نیاز به استایل نویسی برای رزولوشن های مختلف و این ویژگی بسیارخوب فریم ورک بوت استرپ یعنی کلاس های از پیش تعریف شده در ریسپانسیوکردن سایت که مهمترین ویژگی یک سایت می تواند باشد خود را نشان می دهد.

 

<div class="container">
 <h2>Image</h2> 
<p>
The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):
</p> <img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345"> 
</div>

 

به تصویر در رزولوشن های مختلف دقت کنید.

 

 

 

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

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

یکی از موثرترین قسمت هایی که یک وب سایت می تواند داشته باشد گالری تصاویر است.

در بوت استرپ می توان به راحتی با گرید بندی و کلاس thumbnail این بخش را ایجاد کرد.

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

در مورد کلاس thumbnail قبلا صحبت شده است.به مثال زیر دقت کنید.

 <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/w3images/lights.jpg">
          <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
          <div class="caption">
            <p>Lorem ipsum...</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/w3images/nature.jpg">
          <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
          <div class="caption">
            <p>Lorem ipsum...</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/w3images/fjords.jpg">
          <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
          <div class="caption">
            <p>Lorem ipsum...</p>
          </div>
        </a>
      </div>
    </div>
  </div>

 

 

کلاس EMBED-RESPONSIVE:

معنی لغوی این کلاس قراردادن ریسپانسیو است.ولی قطعا این معنی نمی تواند به شما کمک کند که کاربرد این کلاس را یاد بگیرید.پس با ما همراه باشید.

فرض کنید که می خواهید یک عنصر html مانند :عکس یا ویدیو و یایک آی فریم را طوری تنظیم کنید که نسبت به ابعاد عنصر والد خودریسپانسیو باشد.

این کلاس را به عنصر والد می دهیدبا ابعادی که برای عنصر والد مد نظرتان است و همین طور آن را به عنصر مد نظر به شکلی که در مثال زیر آورده شده است اعمال می کنید.این عنصر خود رابه صورت ریسپانسیو بانسبت ابعادی که برای عنصر والد تعریف شده است در رزولوشن های مختلف نمایش می دهد.

نسبت ابعاد چیست؟

نسبت ابعادتصویر یک رابطه متناسب بین عرض آن و ارتفاع آن را توصیف می کند.

نسبت 4:3 فرمت ویدیو های قرن بیستم و نسبت 16:9 نسبت جهانی برای تلویزیون HD و تلویزیون دیجیتالی اروپایی است.

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>

<div class="container">
  <h2>Responsive Embed</h2>
  <p>Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio</p>
  <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
 </div>

</body>
 </html>

شما می توانید از بین دو نسبت یکی را انتخاب کنید.به تفاوت آنها دقت کنید.

منبع :آموزش طراحی سایت همراه آی سی تی