Source

Réad meáin

Déanann doiciméadú agus samplaí le haghaidh meáin Bootstrap comhpháirteanna an-athchleachtach a thógáil cosúil le tuairimí blag, tweets, agus a leithéidí.

Sampla

Cuidíonn réad na meán le comhpháirteanna casta agus athchleachtach a thógáil ina bhfuil roinnt meáin suite taobh le hábhar nach gcuimsítear sna meáin sin. Ina theannta sin, déanann sé é seo gan ach dhá rang riachtanach a bhuíochas le flexbox.

Seo thíos sampla de réad meán amháin. Níl ach dhá rang ag teastáil - an clúdach .mediaagus an .media-bodyt-ábhar timpeall ort. Is féidir stuáil agus corrlach roghnach a rialú trí fhóntais spásála .

Placeholder 64x64
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
<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: Ní láimhseáiltear eilimintí inlíne mar mhíreanna solúbtha

Ní fhágann Internet Explorer 10-11 gnéithe inlíne cosúil le naisc nó íomhánna (nó ::beforeeilimintí ::afterbréagacha) mar mhíreanna solúbtha. Is é an t-aon réiteach oibre ná luach neamh-inlíne a shocrú display(m.sh., block, inline-block, nó flex). Molaimid úsáid a bhaint as .d-flex, ceann dár bhfóntais taispeána , mar shocrú éasca.

Foinse: Flexbugs ar GitHub

Neadaithe

Is féidir rudaí meán a neadú gan teorainn, cé go molaimid duit stopadh ag pointe éigin. Áit neadaithe .medialaistigh .media-bodyde réad meán tuismitheora.

Placeholder 64x64
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Placeholder 64x64
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
<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>

Ailíniú

Is féidir meáin i réad meán a ailíniú le fóntais flexbox go barr (réamhshocraithe), lár, nó deireadh d' .media-bodyábhar.

Placeholder 64x64
Meáin bharr-ailínithe

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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
Meáin lár-ailínithe

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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
Meáin bun-ailínithe

Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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>

Ordú

Athraigh ord an ábhair i réada meán tríd an HTML féin a mhodhnú, nó trí roinnt flexbox CSS saincheaptha a chur leis chun an t- orderairí a shocrú (go slánuimhir de do rogha féin).

Réad meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
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>

Liosta meáin

Toisc gur beag riachtanas struchtúrach atá ag réad na meán, is féidir leat na haicmí seo a úsáid freisin ar eilimintí liosta HTML. Ar do <ul><ol>, cuir an .list-unstyledchun aon stíleanna liosta réamhshocraithe brabhsálaí a bhaint, agus ansin cuir i bhfeidhm .mediaar do <li>s. Mar is gnáth, bain úsáid as fóntais spásála nuair is gá chun mionchoigeartú a dhéanamh.

  • Placeholder 64x64
    Réad meáin liosta-bhunaithe
    Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
  • Placeholder 64x64
    Réad meáin liosta-bhunaithe
    Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
  • Placeholder 64x64
    Réad meáin liosta-bhunaithe
    Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
<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>