English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
في هذا الفصل سنشرح المتعدد الوسائط في Bootstrap، مثل: الصور، الفيديوهات، والأصوات. يمكن استخدام أنماط المتعدد الوسائط لإنشاء أنواع مختلفة من العناصر (مثل: تعليقات المدونة)، حيث يمكن استخدام خليط من النصوص والصور، ويمكن أن تكون الصور متجهة إلى اليسار أو اليمنى. يمكن استخدام العنصر الوسائطي بكمية أقل من الكود لتحقيق مزيج من النصوص والصور.
لنبدأ أولاً بمراجعة مثال:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال Bootstrap - العنصر الوسائطي الافتراضي</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>استخدام كلاس "media-left" لتحديد التوجيه اليساري للمتعدد الوسائط. يجب أن يتم وضع النص بعد الصورة.</p> <p>يستخدم كلاس "media-right" لتحديد التوجيه اليمني للمتعدد الوسائط.</p><br> <!-- التوجيه اليساري --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">التوجيه اليساري</h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> <hr> <!-- التوجيه اليمني --> <div class="media"> <div class="media-body"> <h4 class="media-heading">التوجيه اليمني</h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> <div class="media-right"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> </div> </div> </body> </html>اختبار النظر ‹/›
النتيجة كما ترون فيما يلي:
إضافة كلاس .media إلى علامة <div> لإنشاء عنصر متعدد الوسائط.
استخدام كلاس .media-left لتحقيق التوجيه اليساري للمتعدد الوسائط (الصور)، وكذلك كلاس .media-right لتحقيق التوجيه اليمني.
محتويات النص توضع داخل div، وإذا كانت الصورة على اليسار يتم وضعها قبل، وإذا كانت الصورة على اليمين يتم وضعها بعد.}
بالإضافة إلى ذلك، يمكنك أيضًا استخدام فئة .media-heading لتحديد العنوان.
لنلقي نظرة على مثال أدناه حول قائمة وسائط .media-list
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap مثال - عناصر وسائط</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>يمكن تكوين عناصر وسائط المتعددة لتكون في الأعلى، في الأسفل، أو في الوسط، وتكون الفئات المتبادلة "media-top"، "media-middle"، "media-bottom":</p><br> <div class="media"> <div class="media-left media-top"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">في الأعلى</h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-middle"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">في الوسط</h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-bottom"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">في الأسفل</h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> </div> </body> </html>اختبار النظر ‹/›
النتيجة كما ترون فيما يلي:
يمكن أن يحتوي عناصر وسائط متعددة أيضًا على عناصر وسائط متعددة أخرى:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap مثال - عناصر وسائط</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>يمكن إدراج موضوع وسائط مدمج داخل موضوع آخر:</p><br> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>نشر في 19 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>نشر في 19 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>نشر في 19 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>اختبار النظر ‹/›
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap مثال - عناصر وسائط</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>يمكن إدراج موضوع وسائط مدمج داخل موضوع آخر:</p><br> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>نشر في 19 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>نشر في 20 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>نشر في 21 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> </div> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-4 <small><i>نشر في 20 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> </div> </div> <!-- موضوع وسائط مدمج --> <div class="media"> <div class="media-left"> <img src="https://ar.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-5 <small><i>نشر في 19 فبراير 2016</i></small></h4> <p>هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال. هذه بعض النصوص المثال.</p> </div> </div> </div> </div> </body> </html>اختبار النظر ‹/›