گوشه های گرد
کلاس img-rounded. گوشه های یک تصویر را گرد می کند. (گوشه های گرد در مرورگر IE8 نمایش داده نمی شوند )
مثال :
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
دایره
کلاس img-circle. تصویر را به شکل دایره در می آورد (گوشه های گرد در مرورگر IE8 نمایش داده نمی شوند )
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
تصویر بند انگشتی
کلاس img-thumbnail. یک کلاس بند انگشتی از یک تصویر ایجاد می کند.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
تصاویر ریسپانسیو
تصاویر می توانند در اندازه های مختلف وجود داشته باشند. تصاویر ریسپانسیو به طور اتوماتیک با اندازه صفحه نمایش تنظیم می شوند.
تصاویر ریسپانسیو را با اضافه کردن کلاس img-responsive. به تگ <img> ایجاد کنید. پس از آن تصویر به مقیاس عنصر والد در خواهد آمد.
کلاس img-responsive. مقدار max-width را برابر max-width: 100% و مقدار height را برابر height: auto تنظیم خواهد کرد.
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
گالری تصاویر
همچنین شما می توانید از سیستم شبکه Bootstrap به همراه کلاس .thumbnail برای ایجاد گالری تصاویر استفاده کنید.
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock"style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="moustiers-sainte-marie.jpg" class="thumbnail">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
<img src="cinqueterre.jpg" alt="Cinque Terre"style="width:150px;height:150px">
</a>
</div>
</div>
Embedهای ریسپانسیو
این امکان وجود دارد که ویدئوها و اسلایدشوها نیز در هر دستگاهی با مقیاس درستی به نمایش درآیند.
کلاس ها می توانند مستقیما روی عناصر <iframe> ، <embed> ، <video> و <object> اعمال شوند.
مثال زیر با اضافه کردن کلاس embed-responsive-item. به تگ <iframe> یک ویدئو ریسپانسیو ایجاد می کند (پس از آن ویدئو به مقیاس عنصر والد در خواهد آمد). دیو containing نسبت ابعاد ویدئو را تعیین می کند.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Responsive Embed</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
</body>
</html>
نکته : aspect ratio (نسبت ابعاد) چیست؟
aspect ratio (نسبت ابعاد) یک تصویر رابطه تناسب بین عرض و ارتفاع آن تصویر را مشخص می کند. دو مقدار معمول برای aspect ratio وجود دارد، 4:3 (فرمت عمومی ویدئو در قرن 20 ام ) و 16:9 (فرمت عمومی برای تلویزیون های HD و تلویزیون های دیجیتال اروپایی )
شما می توانید یکی از این دو مقدار را برای aspect ratio انتخاب کنید.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>