English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
هذا الفصل سيتناول شريط العرض Bootstrap. معظم المواقع تحتاج إلى ترتيب الصور والفيديوهات والنصوص في الشبكة. يقدم Bootstrap طريقة سهلة لإنشاء شريط العرض. الخطوات التالية لإنشاء شريط العرض باستخدام Bootstrap هي:
إضافة class حول الصورة .thumbnail الـ <a>.
هذا سيضيف حشوة داخلية (padding) قدرها أربعة بكسل وأطراف حمراء.
عند وضع الفأرة فوق الصورة، سيظهر محيط الصورة بشكل ديناميكي.
السطر التالي يوضح الصورة المصغرة الافتراضية:
<!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="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> </a> </div> </div> </body> </html>التحقق من ذلك ‹/›
النتيجة كما يلي:
الآن لدينا صورة مصغرة أساسية، يمكننا إضافة أنواع مختلفة من محتويات HTML إلى الصورة المصغرة، مثل العناوين، الفقرات أو الأزرار. الخطوات التالية هي:
تغيير class .thumbnail تعديل <a> إلى <div>.
في داخل <div>، يمكنك إضافة أي شيء تريد إضافته. لأن هذا هو <div>، يمكننا استخدام قواعد التسمية القياسية القائمة على span لتعديل الحجم.
إذا كنت ترغب في تجميع عدة صور، فأضفها في قائمة غير مرتبة، واترك كل عنصر في القائمة يطفو إلى اليسار.
السطر التالي يوضح هذا النقطة:
<!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="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> <div class="caption"> <h2>عنوان الصورة المصغرة</h2> <p>بعض النصوص المثالية. بعض النصوص المثالية.</p> <p> <a href="#" class="btn btn-primary" role="button"> زر </a> <a href="#" class="btn btn-default" role="button"> زر </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> <div class="caption"> <h2>عنوان الصورة المصغرة</h2> <p>بعض النصوص المثالية. بعض النصوص المثالية.</p> <p> <a href="#" class="btn btn-primary" role="button"> زر </a> <a href="#" class="btn btn-default" role="button"> زر </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> <div class="caption"> <h2>عنوان الصورة المصغرة</h2> <p>بعض النصوص المثالية. بعض النصوص المثالية.</p> <p> <a href="#" class="btn btn-primary" role="button"> زر </a> <a href="#" class="btn btn-default" role="button"> زر </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="صورة مكانة بديلة مصغرة"> <div class="caption"> <h2>عنوان الصورة المصغرة</h2> <p>بعض النصوص المثالية. بعض النصوص المثالية.</p> <p> <a href="#" class="btn btn-primary" role="button"> زر </a> <a href="#" class="btn btn-default" role="button"> زر </a> </p> </div> </div> </div> </div> </body> </html>التحقق من ذلك ‹/›
النتيجة كما يلي: