Source

Rud meadhanan

Sgrìobhainnean agus eisimpleirean airson cuspair meadhanan Bootstrap gus co-phàirtean fìor ath-aithris a thogail leithid beachdan blog, tweets, agus an leithid.

eisimpleir

Bidh cuspair nam meadhanan a ’ cuideachadh le bhith a’ togail phàirtean iom-fhillte agus ath-aithriseach far a bheil cuid de mheadhanan suidhichte ri taobh susbaint nach eil a’ cuairteachadh nam meadhanan sin. A bharrachd air an sin, bidh e a’ dèanamh seo le dìreach dà chlas riatanach le taing do flexbox.

Gu h-ìosal tha eisimpleir de aon nì meadhan. Chan eil a dhìth ach dà chlas - am pasgadh .mediaagus .media-bodytimcheall air do shusbaint. Faodar smachd a chumail air pleadhag agus iomall roghainneil tro ghoireasan eadar -dhealaichte .

64x64
Ceann nam meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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: Chan eilear a’ dèiligeadh ri eileamaidean in-loidhne mar nithean sùbailte

Cha bhith Internet Explorer 10-11 a’ toirt seachad eileamaidean in-loidhne leithid ceanglaichean no ìomhaighean (no ::beforeagus ::aftereileamaidean meallta) mar nithean sùbailte. Is e an aon dòigh-obrach luach neo-loidhne a shuidheachadh display(me, block, , inline-block, no flex). Tha sinn a’ moladh a bhith a’ cleachdadh .d-flex, aon de na goireasan taisbeanaidh againn , mar fhuasgladh furasta.

Stòr: Flexbugs air GitHub

A' neadachadh

Faodaidh nithean meadhanan a bhith air an neadachadh gu neo-chrìochnach, ged a tha sinn a’ moladh gun stad thu aig àm air choreigin. Àite air a neadachadh .mediataobh a-staigh .media-bodynì meadhanan pàrant.

64x64
Ceann nam meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
64x64
Ceann nam meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>

Co-thaobhadh

Faodaidh meadhanan ann an nì meadhanan a bhith air an co-thaobhadh ri goireasan flexbox gu mullach (bunaiteach), meadhan no deireadh do .media-bodyshusbaint.

64x64
Meadhanan àrd-cho-thaobhadh

Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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
Meadhanan co-cheangailte ris an ionad

Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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
Meadhanan co-thaobhadh gu h-ìosal

Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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>

Òrdugh

Atharraich òrdugh an t-susbaint ann an nithean meadhanan le bhith ag atharrachadh an HTML fhèin, no le bhith a’ cur beagan flexbox CSS àbhaisteach ris gus an ordertogalach a shuidheachadh (gu àireamh iomlan de do roghainn).

Rud meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>

Liosta nam meadhanan

Leis gu bheil cho beag de riatanasan structarail aig cuspair nam meadhanan, faodaidh tu cuideachd na clasaichean sin a chleachdadh air liosta eileamaidean HTML. Air do <ul>no <ol>, cuir ris .list-unstyledgus stoidhlichean liosta bunaiteach brabhsair sam bith a thoirt air falbh, agus an uairsin cuir .mediaa-steach air na roghainnean agad <li>. Mar as àbhaist, cleachd goireasan beàrn far a bheil feum air gus gleusadh a dhèanamh.

  • 64x64
    Rud meadhanan stèidhichte air liosta
    Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
  • 64x64
    Rud meadhanan stèidhichte air liosta
    Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
  • 64x64
    Rud meadhanan stèidhichte air liosta
    Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>