Source

Into yemidiya

Amaxwebhu kunye nemizekelo yento yeendaba yeBootstrap yokwakha izinto eziphindaphindwayo njengezimvo zebhlog, iitweets, nokunye okunjalo.

Umzekelo

Into yemidiya inceda ukwakha izinto ezintsonkothileyo neziphindaphindayo apho ezinye imidiya zibekwe ecaleni komxholo ongasongekiyo kwimidiya exeliweyo. Kwaye, ikwenza oku ngeeklasi ezimbini kuphela ezifunekayo enkosi kwi-flexbox.

Ngezantsi ngumzekelo wento enye yemidiya. Zimbini kuphela iiklasi ezifunekayo-ukusonga .mediakunye .media-bodynokujikeleza umxholo wakho. Ukukhuselwa okukhethiweyo kunye nomda unokulawulwa ngokusetyenziswa kwezithuba .

64x64
Isihloko semidiya
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. I-Donec lacinia congue felis kwi-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>
I-Flexbug #12: Izinto ezingaphakathi aziphathwa njengezinto eziguqukayo

I-Internet Explorer 10-11 ayinikezeli izinto ezisemgceni ezinje ngamakhonkco okanye imifanekiso (okanye ::beforenezinto ::afterezingeyonyani) njengezinto eziguqukayo. Ekuphela kwendlela yokusebenza kukuseta ixabiso elingelolayini display(umzekelo, block, , inline-block, okanye flex). Sicebisa ukuba usebenzise .d-flexenye yezixhobo zethu zokubonisa , njengolungiso olulula.

Umthombo: IiFlexbugs kwiGitHub

Ukuzalela

Izinto zeMedia zinokugcinwa ngokungenasiphelo, nangona sicebisa ukuba uyeke ngaxa lithile. Indawo ebekwe .mediangaphakathi kwesixhobo .media-bodysemidiya engumzali.

64x64
Isihloko semidiya
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. I-Donec lacinia congue felis kwi-faucibus.
64x64
Isihloko semidiya
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. I-Donec lacinia congue felis kwi-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>

Ulungelelwaniso

Imidiya kwinto yemidiya inokulungelelaniswa nezixhobo ze-flexbox ukuya phezulu (okungagqibekanga), phakathi, okanye ekupheleni .media-bodykomxholo wakho.

64x64
Imidiya elungelelaniswe phezulu

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. I-Donec lacinia congue felis kwi-faucibus.

Yenza i-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
Imidiya elungelelaniswe embindini

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. I-Donec lacinia congue felis kwi-faucibus.

Yenza i-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
Imidiya ehambelana ezantsi

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. I-Donec lacinia congue felis kwi-faucibus.

Yenza i-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>

Umyalelo

Guqula ulandelelwano lomxholo kwizinto zemidiya ngokuguqula iHTML ngokwayo, okanye ngokongeza i-CSS yesiko le-flexbox ukuseta orderipropati (kwinani elipheleleyo lokukhetha kwakho).

Into yemidiya
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. I-Donec lacinia congue felis kwi-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>

Uluhlu lwemidiya

Ngenxa yokuba into yemidiya ineemfuno ezimbalwa zolwakhiwo, ungasebenzisa ezi klasi kuluhlu lweempawu zeHTML. Kweyakho <ul>okanye <ol>, yongeza .list-unstyledukususa naziphi na izitayile zoluhlu lwebhrawuza, kwaye emva koko ufake .mediakwi <li>s yakho. Njengesiqhelo, sebenzisa izixhobo zokubeka isithuba naphi na apho kufuneka ucule kakuhle.

  • 64x64
    Into yemidiya esekwe kuluhlu
    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. I-Donec lacinia congue felis kwi-faucibus.
  • 64x64
    Into yemidiya esekwe kuluhlu
    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. I-Donec lacinia congue felis kwi-faucibus.
  • 64x64
    Into yemidiya esekwe kuluhlu
    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. I-Donec lacinia congue felis kwi-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>