Source

ميڊيا اعتراض

Bootstrap جي ميڊيا اعتراض لاءِ دستاويز ۽ مثال انتهائي ورجائيندڙ اجزا ٺاهڻ لاءِ جيئن ته بلاگ تبصرا، ٽوئيٽس ۽ ان وانگر.

مثال

ميڊيا اعتراض پيچيده ۽ ورهاڱي واري اجزاء کي تعمير ڪرڻ ۾ مدد ڪري ٿي جتي ڪجهه ميڊيا مواد سان گڏ پوزيشن رکي ٿي جيڪا ميڊيا جي چوڌاري لپي نه ٿي. پلس، اهو صرف ٻه گهربل طبقن سان ڪري ٿو flexbox جي مهرباني.

هيٺ هڪ واحد ميڊيا اعتراض جو هڪ مثال آهي. صرف ٻه طبقن جي ضرورت آهي - لفافي .media۽ .media-bodyتوهان جي مواد جي چوڌاري. اختياري پيڊنگ ۽ مارجن اسپيسنگ يوٽيلٽيز ذريعي ڪنٽرول ڪري سگھجن ٿا .

Placeholder 64x64
ميڊيا جي عنوان
Cras sit amet nibh libero, 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">
  <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۽ ::afterpseudo-عناصر) کي فليڪس شيون طور پيش نه ڪندا آهن. واحد حل هڪ غير ان لائن displayقيمت مقرر ڪرڻ آهي (مثال طور،،، blockيا inline-block) flex. اسان استعمال ڪرڻ جي صلاح ڏيو ٿا .d-flex، اسان جي ڊسپلي يوٽيلٽيز مان هڪ ، هڪ آسان حل جي طور تي.

ذريعو: Flexbugs GitHub تي

نستو

ميڊيا جون شيون لامحدود طور تي رکي سگهجن ٿيون، جيتوڻيڪ اسان توهان کي ڪجهه نقطي تي روڪڻ جي صلاح ڏيو ٿا. ھڪڙي والدين ميڊيا اعتراض جي .mediaاندر اندر رکيل جڳھ ..media-body

Placeholder 64x64
ميڊيا جي عنوان
Cras sit amet nibh libero, 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.
Placeholder 64x64
ميڊيا جي عنوان
Cras sit amet nibh libero, 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">
  <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, 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.

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, 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.

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, 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.

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, 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.
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>، .list-unstyledڪنهن به برائوزر جي ڊفالٽ لسٽ اسٽائل کي هٽائڻ لاءِ شامل ڪريو، ۽ پوءِ توهان جي ايس تي لاڳو .mediaڪريو <li>. هميشه وانگر، فاصلي جي افاديت کي استعمال ڪريو جتي به ضرورت هجي سٺي ٽيون.

  • Placeholder 64x64
    لسٽ تي ٻڌل ميڊيا اعتراض
    Cras sit amet nibh libero, 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.
  • Placeholder 64x64
    لسٽ تي ٻڌل ميڊيا اعتراض
    Cras sit amet nibh libero, 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.
  • Placeholder 64x64
    لسٽ تي ٻڌل ميڊيا اعتراض
    Cras sit amet nibh libero, 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.
<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>