Source

Selo sa boraditaba

Ditokomane le mehlala ya selo sa boraditaba sa Bootstrap go aga dikarolo tše di ipoeletšago kudu go swana le ditshwayotshwayo tša blog, di-tweet, le tše dingwe tše bjalo.

Mohlala

Selo sa boraditaba se thuša go aga dikarolo tše di raraganego le tše di ipoeletšago moo methopo ye mengwe ya ditaba e beilwego go bapa le diteng tšeo di sa phuthelego go dikologa boraditaba bjo bo boletšwego. Plus, e dira se ka diklase tše pedi fela tše di nyakegago ka lebaka la flexbox.

Ka tlase ke mohlala wa selo se tee sa boraditaba. Go nyakega diklase tše pedi feela—go phuthela .mediale go .media-bodydikologa diteng tša gago. Padding ya boikgethelo le margin di ka laolwa ka didirišwa tša go arola sekgoba .

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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: Dielemente tša ka gare ga mothaladi ga di swarwe bjalo ka dilo tša go kobega

Internet Explorer 10-11 ga e tšweletše dielemente tša ka gare ga mothaladi go swana le dikgokagano goba diswantšho (goba ::beforele ::afterdielemente tša maaka) bjalo ka dilo tša go kobega. Tharollo e nnoši ke go beakanya displayboleng bjo e sego bja ka gare ga mothaladi (mohlala, block, inline-block, goba flex). Re šišinya go diriša .d-flex, e nngwe ya didirišwa tša rena tša pontšho , e le tokiso e bonolo.

Mohloli: Flexbugs ka GitHub

Go dira dihlaga

Dilo tša boraditaba di ka tsenywa ka gare ga sehlaga ka mo go sa felego, le ge re šišinya gore o eme ka nako ye nngwe. Bea e tsentšwego .mediaka gare ga .media-bodyya selo sa methopo ya ditaba ya motswadi.

Hlogo ya boraditaba

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

Go logaganya

Media ka gare ga selo sa media e ka logaganywa le didirišwa tša flexbox go ya godimo (ya tlwaelo), bogareng, goba mafelelong a .media-bodyditeng tša gago.

Methopo ya ditaba yeo e logaganywago godimo

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>

Methopo ya ditaba yeo e lebanego le bogareng

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>

Methopo ya ditaba yeo e logaganywago ka fase

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>

Tatelano

Fetoša tatelano ya diteng ka go dilo tša boraditaba ka go fetoša HTML ka boyona, goba ka go oketša CSS ye nngwe ya tlwaelo ya flexbox go beakanya orderthepa (go palomoka yeo o e kgethago).

Selo sa boraditaba

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

Lenaneo la boraditaba

Ka lebaka la gore selo sa boraditaba se na le dinyakwa te mmalwa kudu ta sebopego, o ka omia gape diklase te go dielemente ta HTML ta lenaneo. Go ya gago <ul>goba <ol>, oketša .list-unstyledgo tloša mekgwa efe goba efe ya lenaneo la maitirelo la sephephediši, gomme o diriše go s .mediaya gago . <li>Bjalo ka mehleng, diriša didirišwa tša go arola sekgoba kae le kae moo go nyakegago go lokiša gabotse.

Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.
Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.
Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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>

Selo sa boraditaba

Mohlala

Hlogo ya boraditaba

Flexbug #12: Dielemente tša ka gare ga mothaladi ga di swarwe bjalo ka dilo tša go kobega

Go dira dihlaga

Hlogo ya boraditaba

Hlogo ya boraditaba

Go logaganya

Methopo ya ditaba yeo e logaganywago godimo

Methopo ya ditaba yeo e lebanego le bogareng

Methopo ya ditaba yeo e logaganywago ka fase

Tatelano

Selo sa boraditaba

Lenaneo la boraditaba

Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo

Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo

Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo