Source

Wanti miidiyaa

Dokumantarii fi fakkeenyota wanta miidiyaa Bootstrap qaamolee baay'ee irra deddeebi'an kan akka yaada biloogii, tiwiitaraa fi kan kana fakkaatan ijaaruuf.

Fakkeenya

Wanti miidiyaa qaamolee walxaxaa fi irra deddeebi'an ijaaruuf gargaara bakka miidiyaaleen tokko tokko qabiyyee miidiyaa jedhame sanatti hin marfamne cinatti dhaabbatutti. Dabalataan, galata flexbox daree barbaachisu lama qofaan kana raawwata.

Armaan gaditti fakkeenya wanta miidiyaa tokkoo ti. Kutaa lama qofatu barbaachisa-marfamaafi .medianaannoo .media-bodyqabiyyee keetii. Padding fi margin filannoo karaa spacing utilities to'achuun ni danda'ama .

64x64 ta’a
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu. 
<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: Qaamonni sarara keessaa akka wantoota flex hin ilaalaman

Internet Explorer 10-11 elementoota sarara keessaa kan akka hidhannoo ykn fakkiiwwan (ykn ::beforefi ::afterelementoota sobaa) akka wanta flex hin agarsiisu. Furmaanni displaygatii sarara keessaa hin taane saaguudha (fkn, block, inline-block, ykn flex). We suggest using .d-flex, one of our display utilities , akka sirreeffama salphaatti.

Maddi: Flexbugs GitHub irratti

Koonyaa gochuu

Wantoonni miidiyaa daangaa hin qabneen man'ee ta'uu danda'u, yeroo tokkotti akka dhaabbattu yaada kenninus. Wanta miidiyaa warraa .mediakeessaa man'ee kaa'i ..media-body

64x64 ta’a
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
64x64 ta’a
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu. 
<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>

Hiriirsuu

Miidiyaan wanta miidiyaa keessa jiru faayilii flexbox waliin gara gubbaa (durtii), gidduu, ykn dhuma .media-bodyqabiyyee keetii qindaa'uu danda'a.

64x64 ta’a
Miidiyaalee sadarkaa olaanaa qaban

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penatibus fi guddina moontees da'umsaa, 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>
64x64 ta’a
Miidiyaa giddu galeessaan hiriire

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penatibus fi guddina moontees da'umsaa, 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>
64x64 ta’a
Miidiyaalee gadiitti hiriiran

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.

Donec sed odio dui. Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penatibus fi guddina moontees da'umsaa, 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>

Ajajuu

Tartiiba qabiyyee wanta miidiyaa keessatti HTML ofii isaa fooyyessuudhaan jijjiiri, ykn qabeentaa saaguuf CSS flexbox amala tokko tokko dabaluudhaan order(gara lakkoofsa guutuu filatteetti).

Wanti miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
64x64 ta’a 
<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>

Tarree miidiyaa

Wanti miidiyaa barbaachisummaa caasaa baay'ee muraasa waan qabuuf, gitaalee kana qaamolee HTML tarree irrattis fayyadamuu dandeessa. <ul>Yookiin kee irratti , akkaataa tarree durtii biraawzari kamiyyuu haquuf itti <ol>dabali, kana booda s kee irratti hojii irra oolchi. Akkuma yeroo hundumaa, bakka barbaachisu hundatti faayidaa addaan fageenyaa fayyadamuun sirreessuu..list-unstyled.media<li>

  • 64x64 ta’a
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
  • 64x64 ta’a
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu.
  • 64x64 ta’a
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu kan ta'e. Cras purus odio, vestibulum vulputate keessatti argamu irratti, tempus viverra turpis. Fusce condimentum nunc ac nisi firiingiilaa vulputate jedhamuun beekama. Donec lacinia congue felis jedhamu kan faucibus keessatti argamu. 
<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>