Media khoom

Cov ntaub ntawv thiab cov piv txwv rau Bootstrap cov khoom siv tshaj tawm los tsim cov khoom siv rov ua dua tshiab xws li blog lus, tweets, thiab lwm yam.

Piv txwv

Cov khoom siv xov xwm pab tsim cov txheej txheem nyuaj thiab rov ua dua qhov twg qee qhov xov xwm tau tso nrog cov ntsiab lus uas tsis qhwv ib ncig ntawm cov xov xwm hais. Ntxiv rau, nws ua qhov no tsuas yog ob chav kawm ua tsaug rau flexbox.

Hauv qab no yog ib qho piv txwv ntawm ib qho khoom siv xov xwm. Tsuas yog ob chav kawm yuav tsum tau - kev qhwv .mediathiab .media-bodyib puag ncig koj cov ntsiab lus. Kev xaiv padding thiab cov npoo tuaj yeem tswj tau los ntawm kev siv qhov sib nrug .

Media taub hau

Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

<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: Inline cov ntsiab lus tsis raug kho raws li cov khoom flex

Internet Explorer 10-11 tsis muab cov ntsiab lus hauv kab xws li kev sib txuas lossis cov duab (lossis ::beforethiab ::aftercov ntsiab lus pseudo) ua cov khoom flex. Qhov kev ua haujlwm nkaus xwb yog los teeb tsa tus displaynqi tsis nyob hauv (piv txwv li, block, inline-block, lossis flex). Peb hais kom siv .d-flex, ib qho ntawm peb cov khoom siv tso saib , ua ib qho yooj yim kho.

Tau qhov twg los: Flexbugs ntawm GitHub

Zes

Cov khoom siv xov xwm tuaj yeem ua zes tsis kawg, txawm hais tias peb xav kom koj nres ntawm qee lub sijhawm. Muab tso .mediarau hauv qhov .media-bodykhoom ntawm niam txiv xov xwm.

Media taub hau

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

Kev sib tw

Media hauv cov khoom siv xov xwm tuaj yeem ua raws li cov khoom siv flexbox mus rau sab saum toj (default), nruab nrab, lossis kawg ntawm koj .media-bodycov ntsiab lus.

Sab saum toj-aligned media

Ua tsaug os. 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>

Center-aligned media

Ua tsaug os. 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>

Hauv qab-aligned media

Ua tsaug os. 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>

Kev txiav txim

Hloov qhov kev txiav txim ntawm cov ntsiab lus hauv cov khoom siv xov xwm los ntawm kev hloov kho HTML nws tus kheej, lossis los ntawm kev ntxiv qee qhov kev cai flexbox CSS los teeb tsa cov ordercuab yeej (rau tus lej ntawm koj xaiv).

Media khoom

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

Media lis

Vim tias cov khoom siv xov xwm muaj ob peb yam kev cai, koj tuaj yeem siv cov chav kawm no ntawm cov npe HTML. Ntawm koj <ul>lossis <ol>, ntxiv .list-unstyledrau tshem tawm ib qho browser default list styles, thiab tom qab ntawd siv .mediarau koj <li>s. Raws li ib txwm muaj, siv cov khoom siv sib nrug nyob qhov twg xav tau los kho kom zoo.

List-based media object
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.
List-based media object
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.
List-based media object
Cras zaum amet nibh libero, hauv gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum hauv vulputate ntawm, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis hauv faucibus.

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