Source

Gwrthrych cyfryngau

Mae dogfennaeth ac enghreifftiau ar gyfer gwrthrych cyfryngau Bootstrap i adeiladu cydrannau hynod ailadroddus fel sylwadau blog, trydariadau, ac ati.

Enghraifft

Mae gwrthrych y cyfryngau yn helpu i adeiladu cydrannau cymhleth ac ailadroddus lle mae rhai cyfryngau wedi'u lleoli ochr yn ochr â chynnwys nad yw'n cofleidio'r cyfryngau dywededig. Hefyd, mae'n gwneud hyn gyda dim ond dau ddosbarth gofynnol diolch i flexbox.

Isod mae enghraifft o wrthrych cyfrwng unigol. Dim ond dau ddosbarth sydd eu hangen - y lapio .mediaac .media-bodyo amgylch eich cynnwys. Gellir rheoli padin ac ymyl dewisol trwy gyfleustodau bylchu .

64x64
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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: Nid yw elfennau mewnol yn cael eu trin fel eitemau hyblyg

Nid yw Internet Explorer 10-11 yn gwneud elfennau mewnol fel dolenni neu ddelweddau (neu ffug-elfennau) yn eitemau hyblyg ::before. ::afterYr unig ateb yw gosod displaygwerth an-mewnol (ee, block, inline-block, neu flex). Rydym yn awgrymu defnyddio .d-flex, un o'n cyfleustodau arddangos , fel ateb hawdd.

Ffynhonnell: Flexbugs ar GitHub

Nythu

Gall gwrthrychau cyfryngau gael eu nythu'n anfeidrol, er ein bod yn awgrymu eich bod yn stopio ar ryw adeg. Lle wedi'i nythu .mediao fewn .media-bodygwrthrych cyfrwng rhiant.

64x64
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
64x64
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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=".../64x64" 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>

Aliniad

Gall cyfryngau mewn gwrthrych cyfryngau gael eu halinio â chyfleustodau flexbox i frig (diofyn), canol, neu ddiwedd eich .media-bodycynnwys.

64x64
Cyfryngau wedi'u halinio uchaf

Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.

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=".../64x64" 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
Cyfryngau wedi'u halinio yn y canol

Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.

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=".../64x64" 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
Cyfryngau wedi'u halinio gwaelod

Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.

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=".../64x64" 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>

Gorchymyn

Newidiwch drefn y cynnwys mewn gwrthrychau cyfryngol trwy addasu'r HTML ei hun, neu trwy ychwanegu rhywfaint o flexbox CSS wedi'i deilwra i osod yr ordereiddo (i gyfanrif o'ch dewis).

Gwrthrych cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
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=".../64x64" alt="Generic placeholder image">
</div>

Rhestr cyfryngau

Oherwydd bod gan y gwrthrych cyfryngau cyn lleied o ofynion strwythurol, gallwch hefyd ddefnyddio'r dosbarthiadau hyn ar elfennau HTML rhestr. Ar eich <ul>neu <ol>, ychwanegwch y .list-unstyledi gael gwared ar unrhyw steiliau rhestr ddiofyn porwr, ac yna cymhwyso .mediai'ch <li>s. Fel bob amser, defnyddiwch gyfleustodau bylchu lle bynnag y bo angen i fireinio.

  • 64x64
    Gwrthrych cyfryngau sy'n seiliedig ar restr
    Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
  • 64x64
    Gwrthrych cyfryngau sy'n seiliedig ar restr
    Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
  • 64x64
    Gwrthrych cyfryngau sy'n seiliedig ar restr
    Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" 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=".../64x64" 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=".../64x64" 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>