Source

میڈیا اعتراض

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

مثال

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

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

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 class="mr-3" src="..." alt="Generic placeholder image">
  <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

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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
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 class="mr-3" src="..." alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </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۔

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 class="align-self-start mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-center mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-end mr-3" src="..." alt="Generic placeholder image">
  <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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
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 class="ml-3" src="..." alt="Generic placeholder image">
</div>

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

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

  • 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
  • 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔
  • 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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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>