دليل Bootstrap4 الأساسي

Jumbotron في Bootstrap4 الجداول في Bootstrap4

أشكال الصور في Bootstrap4

الصور متداولة جدًا في التصميم الحديث للصفحات الويب. لذلك، تعيين نمط الصورة ووضعها بشكل صحيح في الصفحة مهم جدًا لتحسين تجربة المستخدم

باستخدام الفئات المدمجة في Bootstrap، يمكنك بسهولة تعيين نمط الصورة، مثل إنتاج صورة بيضاوية أو دائرية، أو إعطاء لها تأثير شبيه بالشريط

صورة بزاوية

.rounded الكلاس يمكنه جعل الصورة تظهر بزاوية:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>صورة بزاوية</h2>
　　<p>.rounded الكلاس يمكنه جعل الصورة تظهر بزاوية:</p>　　　　　　　　　　　　
　　<img src="https://ar.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

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

صورة بيضاوية

.rounded-circle الكلاس يمكنه تعيين صورة بيضاوية:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>صورة بيضاوية</h2>
　　<p>.rounded-circle الكلاس يمكنه تعيين صورة بيضاوية:</p>　　　　　　　　　　　　
　　<img src="https://ar.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>

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

صورة المصغرة

فئة .img-thumbnail تستخدم لضبط صورة المصغرة (صورة مع حواف):

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>صورة المصغرة</h2>
　　<p>فئة .img-thumbnail تستخدم لضبط صورة المصغرة (صورة مع حواف):</p>　　　　　　　　　　　　
　　<img src="https://ar.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>

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

طريقة ضبط الصور

استخدم فئة .float-right لضبط الصور على اليمين، واستخدم فئة .float-left لضبط الصور على اليسار:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>طريقة ضبط الصور</h2>
　　<p>استخدم فئة .float-right لضبط الصور على اليمين، واستخدم فئة .float-left لضبط الصور على اليسار:</p>
　　<img src="https://ar.oldtoolbag.com/run/images/paris.jpg" class="float-left">　
　　<img src="https://ar.oldtoolbag.com/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>

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

صور تفاعلية

لدي الصور أبعاد مختلفة، ونحتاج إلى التكيف مع حجم الشاشة تلقائيًا.

يمكننا تعيين الصور التفاعلية من خلال إضافة فئة .img-fluid إلى علامة <img>.

.img-fluid يحدد max-width: 100%; 、 الارتفاع: تلقائي;

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>الصورة التفاعلية</h2>
　　<p>يمكن تعيين الصورة التفاعلية باستخدام صفة .img-fluid، قم بتغيير حجم المتصفح لرؤية التأثير:</p>
　　<img src="https://ar.oldtoolbag.com/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>

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

Jumbotron في Bootstrap4 الجداول في Bootstrap4