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 .

Placeholder 64x64
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 src="..." class="mr-3" alt="...">
  <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

Placeholder 64x64
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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.
Placeholder 64x64
Mata duree miidiyaa
Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 src="..." class="mr-3" alt="...">
  <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="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </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.

Placeholder 64x64
Miidiyaalee sadarkaa olaanaa qaban

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <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>
Placeholder 64x64
Miidiyaa giddu galeessaan hiriire

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <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>
Placeholder 64x64
Miidiyaalee gadiitti hiriiran

Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <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 duratti kan qophaa’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.
Placeholder 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 src="..." class="ml-3" alt="...">
</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>

  • Placeholder 64x64
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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.
  • Placeholder 64x64
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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.
  • Placeholder 64x64
    Wanti miidiyaa tarree irratti hundaa'e
    Cras taa'u amet nibh libero, keessatti gravida nulla. Nulla vel metus scelerisque kan jedhu duratti kan qophaa’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 src="..." class="mr-3" alt="...">
    <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 src="..." class="mr-3" alt="...">
    <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 src="..." class="mr-3" alt="...">
    <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>