Bootstrap الأشكال صورة
زوايا مدورة:
دائرة:
صورة مصغرة:
زوايا مدورة
و .img-rounded الطبقة يضيف تقريب زوايا لصورة (IE8 لا يدعم تدوير زوايا):
مثال
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> انها محاولة لنفسك » دائرة
و .img-circle الدرجة الأشكال الصورة إلى دائرة (IE8 لا يدعم تدوير زوايا):
مثال
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> انها محاولة لنفسك » صورة مصغرة
و .img-thumbnail الطبقة الأشكال صورة إلى صورة مصغرة:
مثال
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> انها محاولة لنفسك » صور تستجيب
الصور تأتي في جميع الأحجام. وكذلك الحال بالنسبة الشاشات. صور تستجيب ضبطها آليا لتتناسب مع حجم الشاشة.
خلق صور تستجيب بإضافة .img-responsive فئة إلى <img> العلامة. فإن الصورة ثم تحجيم بشكل جيد لعنصر الأم.
و .img-responsive تنطبق الطبقة display: block; و max-width: 100%; و height: auto; إلى الصورة:
معرض الصور
يمكنك أيضا استخدام Bootstrap's نظام الشبكة بالتعاون مع .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> انها محاولة لنفسك » التضمينات استجابة
دعونا أيضا أشرطة الفيديو أو عرض الشرائح مقياس صحيح على أي جهاز.
ويمكن تطبيق دروس مباشرة إلى <iframe>, <embed>, <video> ، و <object> العناصر.
يقوم المثال التالي فيديو استجابة بإضافة .embed-responsive-item الطبقة إلى <iframe> العلامة (لن الفيديو ثم تحجيم بشكل جيد لعنصر الأم). وتحتوي <div> يحدد نسبة العرض إلى الارتفاع الفيديو:
مثال
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> انها محاولة لنفسك » ما هي نسبة الجانب؟
نسبة العرض إلى الارتفاع صورة توضح علاقة طردية بين عرضه وارتفاعه. اثنين من نسب الفيديو الشائعة هي 4: 3 (على شكل شريط فيديو عالمي من القرن 20th)، و 16: 9 (عالمي لHD التلفزيون والتلفزيون الرقمي الأوروبي).
يمكنك الاختيار بين فئتين نسبة الارتفاع:
<!-- 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>اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»
كامل Bootstrap صورة المرجعي
للإشارة كاملة من جميع الطبقات صورة، انتقل إلى لدينا كامل Bootstrap صورة المرجعي .