Source

Abun jarida

Takaddun bayanai da misalai don abin watsa labarai na Bootstrap don gina abubuwan maimaitawa sosai kamar sharhin blog, tweets, da makamantansu.

Misali

Abun mai jarida yana taimakawa wajen gina hadaddun abubuwa masu maimaitawa inda wasu kafofin watsa labarai ke matsayi tare da abun ciki wanda baya kunshe da abin da aka fada. Bugu da ƙari, yana yin wannan tare da azuzuwan da ake buƙata guda biyu kawai godiya ga flexbox.

A ƙasa akwai misalin abu guda ɗaya na kafofin watsa labarai. Azuzuwan guda biyu kawai ake buƙata - nannade .mediada .media-bodykewaye abun cikin ku. Za a iya sarrafa mashin zaɓi da gefe ta hanyar abubuwan amfani da tazara .

64x64
Jagoran watsa labarai
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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">
  <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: Ba a kula da abubuwan layi azaman abubuwa masu sassauƙa

Internet Explorer 10-11 baya mayar da abubuwa na layi kamar hanyoyin haɗi ko hotuna (ko ::beforeda ::afterabubuwan ƙira) azaman abubuwa masu sassauƙa. Hanya guda daya tilo ita ce saita displayƙimar mara layi (misali, block, inline-block, ko flex). Muna ba da shawarar amfani da .d-flex, ɗayan kayan aikin nuninmu , azaman gyara mai sauƙi.

Tushen: Flexbugs akan GitHub

Gurasa

Abubuwan kafofin watsa labarai na iya zama gida marar iyaka, kodayake muna ba da shawarar ku tsaya a wani lokaci. Wuri mai gida .mediaa cikin .media-bodyabin kafofin watsa labarai na iyaye.

64x64
Jagoran watsa labarai
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.
64x64
Jagoran watsa labarai
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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">
  <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>

Daidaitawa

Mai jarida a cikin abin mai jarida na iya daidaitawa tare da kayan aikin flexbox zuwa sama (tsoho), tsakiya, ko ƙarshen .media-bodyabun cikin ku.

64x64
Kafofin watsa labarai masu daidaitawa

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

<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
Kafofin watsa labarai masu daidaitawa

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

<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
Kafofin watsa labarai masu daidaitawa

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki.

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

Oda

Canja tsarin abun ciki a cikin abubuwan kafofin watsa labarai ta hanyar gyara HTML ɗin kanta, ko ta ƙara wasu flexbox CSS na al'ada don saita orderkadarorin (zuwa adadin zaɓin da kuka zaɓa).

Abun jarida
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.
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>

Jerin watsa labarai

Saboda abin watsa labarai yana da ƴan buƙatun tsari, zaku iya amfani da waɗannan azuzuwan akan abubuwan HTML. A kan naku <ul>ko <ol>, ƙara .list-unstyleddon cire kowane salon jeri na tsoho mai bincike, sannan a yi amfani .mediada <li>s na ku. Kamar koyaushe, yi amfani da abubuwan amfani tazara a duk inda ake buƙata don daidaitawa.

  • 64x64
    Abu na tushen lissafin
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.
  • 64x64
    Abu na tushen lissafin
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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.
  • 64x64
    Abu na tushen lissafin
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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. 
<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>