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 .

64×64
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 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: 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.

64×64
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.
64×64
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 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>

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.

64×64
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 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>
64×64
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 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>
64×64
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 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>

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.
64×64 
<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>

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>nó <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.

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