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

المشروعات الإعلامية في Bootstrap4

إذا كنت ترغب في إنشاء تصميم يحتوي على عنصر وسائط مركزى يسارًا أو يمينًا (مثل الصور أو الفيديوهات) و محتوى نصي (مثل تعليقات المدونات، التويترات، إلخ)، يمكنك القيام بذلك بسهولة باستخدام مكونات وسائط Bootstrap الجديدة.

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

العنصر الأساسي للمتعددة الوسائط

لإنشاء عنصر متعدد الوسائط، يمكنك إضافة .media إلى عنصر الحاوية، ثم وضع محتوى المتعدد الوسائط في الحاوية الفرعية، ثم إضافة الهوامش، والملامح الداخلية، وما إلى ذلك:

مثال

<!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 mt-3">
　　<h2>عنصر وسائط</h2>
　　<p>لإنشاء عنصر متعدد الوسائط، يمكنك إضافة .media إلى عنصر الحاوية، ثم وضع محتوى المتعدد الوسائط في الحاوية الفرعية، ثم إضافة الهوامش، والملامح الداخلية، وما إلى ذلك:</p>
　　<div class="media border p-3">
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>موقع تعليم الأساسيات</h4>
　　　　　　<p>تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>

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

النتيجة بعد التنفيذ كالتالي:

تداخل صور العناصر المتعددة الوسائط

يمكن لصور العناصر المتعددة الوسائط أن تكون متداخلة (يمكن أن تحتوي صورة متعددة الوسائط على صورة متعددة الوسائط أخرى)

للتحكم في تداخل صور العناصر المتعددة الوسائط، يمكنك وضع .media داخل .media-body:

مثال

<!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 mt-3">
　　<h2>تداخل صور العناصر المتعددة الوسائط</h2>
　　<p>يمكن لصور العناصر المتعددة الوسائط أن تكون متداخلة (يمكن أن تحتوي صورة متعددة الوسائط على صورة متعددة الوسائط أخرى):</p><br>
　　<div class="media border p-3">
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>موقع تعليم الأساسيات</h4>
　　　　　　<p>تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>
　　　　　　<div class="media p-3">
　　　　　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4>موقع تعليم الأساسيات</h4>
　　　　　　　　　　<p>تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>
　　　　　　　　</div>
　　　　　　</div>　　
　　　　</div>
　　</div>
</div>
</body>
</html>

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

عرض صورة العنصر المتعدد الوسائط على الجانب الأيمن

إذا كنت ترغب في عرض صورة الرأس على الجانب الأيمن، يمكنك إضافة الصورة بعد .media-body:

مثال

<!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 mt-3">
　　<h2>عرض الصورة على الجانب الأيمن</h2>
　　<p>إذا كنت ترغب في عرض صورة الرأس على الجانب الأيمن، يمكنك إضافة الصورة بعد .media-body:</p>
　　<div class="media border p-3">
　　　　<div class="media-body">
　　　　　　<h4>موقع تعليم الأساسيات</h4>
　　　　　　<p>تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>　　　　　　
　　　　</div>
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
　　</div>
</div>
</body>
</html>

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

تحديد موقع صورة المتعددة الوسائط

يمكننا استخدام كلاسيكيات align-self-* لضبط موقع عرض صورة عنصر الوسائط:

مثال

<!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 mt-3">
　　<h2>عنصر وسائط</h2>
　　<p>يمكننا استخدام كلاسيكيات align-self-* لضبط موقع عرض صورة عنصر الوسائط:</p><br>
　　<!--　الرأس -->
　　<div class="media">
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>الرأس -- تعليمي أساسي (oldtoolbag.com)</h4>
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　</div>
　　</div>
　　<!--　مركزي -->
　　<div class="media mt-3">
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>المركز -- تعليمية الأساس (oldtoolbag.com)</h4>
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　</div>
　　　</div>
　　<!-- القاعدة -->
　　<div class="media mt-3">
　　　　<img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>القاعدة -- تعليمية الأساس (oldtoolbag.com)</h4>
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　　　<p>تعلم الأساسيات، حتى تتمكن من الذهاب أبعد！！
　　　　</div>
　　</div>
</div>
</body>
</html>

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

تخطيط Flex في Bootstrap4