Source

ميڊيا اعتراض

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

مثال

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

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

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

ذريعو: Flexbugs GitHub تي

نستو

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

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

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