Source

میڈیا اعتراض

بوٹسٹریپ کے میڈیا آبجیکٹ کے لیے دستاویزات اور مثالیں انتہائی دہرائے جانے والے اجزاء جیسے بلاگ کے تبصرے، ٹویٹس اور اس طرح کی تعمیر کے لیے۔

مثال

میڈیا آبجیکٹ پیچیدہ اور دہرائے جانے والے اجزاء کو بنانے میں مدد کرتا ہے جہاں کچھ میڈیا مواد کے ساتھ کھڑا ہوتا ہے جو کہ میڈیا کے ارد گرد لپیٹ نہیں ہوتا ہے۔ اس کے علاوہ، یہ فلیکس باکس کی بدولت صرف دو مطلوبہ کلاسوں کے ساتھ کرتا ہے۔

ذیل میں ایک واحد میڈیا آبجیکٹ کی مثال ہے۔ صرف دو کلاسز درکار ہیں - ریپنگ .mediaاور .media-bodyآپ کے مواد کے ارد گرد۔ اختیاری پیڈنگ اور مارجن کو وقفہ کاری کی افادیت کے ذریعے کنٹرول کیا جا سکتا ہے ۔

Placeholder 64x64
میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12: ان لائن عناصر کو فلیکس آئٹمز کے طور پر نہیں سمجھا جاتا ہے۔

انٹرنیٹ ایکسپلورر 10-11 ان لائن عناصر جیسے لنکس یا تصاویر (یا ::beforeاور ::afterچھدم عناصر) کو فلیکس آئٹمز کے طور پر پیش نہیں کرتا ہے۔ واحد حل یہ ہے کہ ایک غیر ان لائن displayقدر (مثلاً، block, inline-block, یا flex) سیٹ کرنا ہے۔ ہم ایک آسان حل کے طور پر، .d-flexہماری ڈسپلے یوٹیلیٹیز میں سے ایک کو استعمال کرنے کا مشورہ دیتے ہیں ۔

ماخذ: GitHub پر Flexbugs

گھونسلہ

میڈیا آبجیکٹ کو لامحدود طور پر نیسٹ کیا جا سکتا ہے، حالانکہ ہم آپ کو کسی وقت رکنے کا مشورہ دیتے ہیں۔ ایک پیرنٹ میڈیا آبجیکٹ کے اندر .mediaاندر اندر اندر رکھیں ..media-body

Placeholder 64x64
میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
Placeholder 64x64
میڈیا ہیڈنگ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

سیدھ

میڈیا آبجیکٹ میں موجود میڈیا کو آپ کے مواد کے اوپر (پہلے سے طے شدہ)، درمیانی یا آخر میں flexbox کی افادیت کے ساتھ منسلک کیا جا سکتا ہے .media-body۔

Placeholder 64x64
اوپر سے منسلک میڈیا

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
مرکز سے منسلک میڈیا

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
نیچے سے منسلک میڈیا

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

ترتیب

خود HTML میں ترمیم کر کے، یا پراپرٹی کو سیٹ کرنے کے لیے کچھ حسب ضرورت فلیکس باکس CSS شامل کر کے میڈیا آبجیکٹ میں مواد کی ترتیب کو تبدیل orderکریں۔

میڈیا اعتراض
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

میڈیا کی فہرست

چونکہ میڈیا آبجیکٹ کے بہت کم ساختی تقاضے ہیں، آپ ان کلاسوں کو فہرست HTML عناصر پر بھی استعمال کر سکتے ہیں۔ اپنے <ul>یا پر <ol>، کسی بھی براؤزر کی ڈیفالٹ لسٹ اسٹائل کو ہٹانے کے لیے شامل کریں ، اور پھر اپنے s پر .list-unstyledلاگو کریں ۔ ہمیشہ کی طرح، جہاں بھی ضرورت ہو اسپیسنگ یوٹیلیٹیز کو ٹھیک کرنے کے لیے استعمال کریں۔.media<li>

  • Placeholder 64x64
    فہرست پر مبنی میڈیا آبجیکٹ
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
  • Placeholder 64x64
    فہرست پر مبنی میڈیا آبجیکٹ
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
  • Placeholder 64x64
    فہرست پر مبنی میڈیا آبجیکٹ
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>