دليل أساسي Bootstrap

Bootstrap إضافة مكونات

مجموعات المساعدات في Bootstrap أزرار Bootstrap

صور Bootstrap

في هذا الفصل، سنتعلم دعم Bootstrap للصور. يقدم Bootstrap ثلاثة فئات يمكن تطبيقها بسهولة على الصور لتحديد الأسلوب البسيط.

.img-roundedإضافة border-radius:6px للحصول على زوايا صورة دائرية.
.img-circleإضافة border-radius:50% لجعل الصورة بأكملها دائرية.
.img-thumbnailإضافة بعض الهوامش الداخلية (padding) وخطوط حاجبية رمادية.

انظروا إلى المثال التالي الذي يظهر

مثال على الإنترنت

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap مثال - الصور
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/run/images/download.png" class="img-rounded">
<img src="/run/images/download.png" class="img-circle">
<img src="/run/images/download.png" class="img-thumbnail">
</body>
</html>

الاختبار لرؤية ‹/›

النتيجة كما يظهر أدناه:

كلاس <img>

يمكن استخدام هذه الكلاسات في أي صورة.

كلاس	وصف	مثال
.img-rounded	إضافة زوايا دائرية إلى الصور (لا يدعم IE8)	تجربة
.img-circle	جعل الصور دائرية (لا يدعم IE8)	تجربة
.img-thumbnail	وظيفة الصور المصغرة	تجربة
.img-responsive	صور استجابية (سيتمدد بشكل جيد إلى العنصر الأم)	تجربة

صور استجابية

لجعل الصور تدعم التصميم الاستجابي، قم بإضافة كلاس .img-responsive إلى علامة <img>. 　سيتمدد الصور بشكل جيد إلى العنصر الأم.

.img-responsive كلاس تطبيق max-width: 100%; وheight: auto; على الصور:

مثال على الإنترنت

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>موقع دروس الأساس (oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2> الصور </h2>
	<p>  .img-responsive كلاس تجعل الصور تدعم الاستجابة، وسيعمل بشكل جيد للتوسع إلى العنصر الأم (من خلال تغيير حجم النافذة لرؤية التأثير):</p>　　　　　　　　　　　　　　　　　　
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

الاختبار لرؤية ‹/›

مجموعات المساعدات في Bootstrap أزرار Bootstrap