Source

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ꯫

ꯕ꯭ꯂꯣꯒ ꯀꯃꯦꯟꯇꯁꯤꯡ, ꯇ꯭ꯕꯤꯠꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯈꯂꯒꯤ ꯌꯥꯝꯅꯥ ꯔꯤꯄꯤꯇꯦꯇꯤꯕ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇꯀꯤꯗꯃꯛ ꯗꯣꯀꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯈꯨꯗꯝ

ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯁꯤꯅꯥ ꯍꯥꯌꯔꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯨꯄꯁꯤꯟꯗꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯅꯥꯛꯇꯥ ꯃꯤꯗꯤꯌꯥ ꯈꯔꯗꯤ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯤꯄꯤꯇꯦꯇꯤꯕ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ꯫ ꯄ꯭ꯂꯥꯁ, ꯃꯁꯤꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤ ꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯁꯤ ꯇꯧꯏ꯫

ꯃꯈꯥꯗꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯈꯛꯇꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ- ꯔꯦꯄꯤꯡ .mediaꯑꯃꯁꯨꯡ .media-bodyꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯂꯩꯕꯥ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯖꯤꯟ ꯑꯁꯤ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯏ .

ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
<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>
ꯐ꯭ꯂꯦꯛꯁꯕꯒ #12: ꯏꯅꯂꯥꯏꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯂꯧꯗꯦ꯫

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯌꯥꯔ ꯱꯰-꯱꯱ꯅꯥ ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯏꯃꯦꯖꯒꯨꯝꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ (ꯅꯠꯔꯒꯥ ::beforeꯑꯃꯁꯨꯡ ::afterꯁ꯭ꯌꯨꯗꯣ-ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡ) ꯑꯁꯤ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯗꯦ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯠꯇꯥ ꯉꯥꯏꯔꯕꯥ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯁꯤ ꯅꯟ-ꯏꯅꯂꯥꯏꯟ displayꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯅꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, block, inline-block, ꯅꯠꯠꯔꯒꯥ flex). .d-flexꯑꯩꯈꯣꯌꯅꯥ , ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ , ꯐꯖꯅꯥ ꯐꯤꯛꯁ ꯇꯧꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫

ꯁꯣꯔꯁ: ꯒꯤꯇꯍꯕꯇꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯥꯒꯁꯤꯡ꯫

ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫

ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡ ꯑꯁꯤ ꯂꯣꯏꯕꯥ ꯅꯥꯏꯗꯅꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯃꯇꯝ ꯈꯔꯒꯤ ꯑꯣꯏꯅꯥ ꯂꯦꯄꯍꯟꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯒꯤ .mediaꯃꯅꯨꯡꯗꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯊꯝꯃꯨ꯫.media-body

ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
<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>

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ .media-bodyꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯊꯛꯇꯥ (ꯗꯤꯐꯣꯜꯇ), ꯃꯔꯛꯇꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯔꯣꯏꯕꯗꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯃꯊꯛꯀꯤ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫

ꯗꯣꯅꯦꯛ ꯁꯦꯗ ꯑꯣꯗꯤꯑꯣ ꯗꯨꯏ꯫ ꯅꯨꯜꯂꯥꯝ ꯀꯨꯏꯁ ꯔꯤꯁꯨꯁ ꯑꯦꯒꯦꯠ ꯎꯔꯅꯥ ꯃꯣꯂꯤꯁ ꯑꯣꯔꯅꯥꯔꯦ ꯚꯦꯜ ꯏꯎ ꯂꯤꯑꯣ꯫ ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫

<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>
ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯁꯦꯟꯇꯔ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫

ꯗꯣꯅꯦꯛ ꯁꯦꯗ ꯑꯣꯗꯤꯑꯣ ꯗꯨꯏ꯫ ꯅꯨꯜꯂꯥꯝ ꯀꯨꯏꯁ ꯔꯤꯁꯨꯁ ꯑꯦꯒꯦꯠ ꯎꯔꯅꯥ ꯃꯣꯂꯤꯁ ꯑꯣꯔꯅꯥꯔꯦ ꯚꯦꯜ ꯏꯎ ꯂꯤꯑꯣ꯫ ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫

<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>
ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
ꯕꯣꯇꯣꯝ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫

ꯗꯣꯅꯦꯛ ꯁꯦꯗ ꯑꯣꯗꯤꯑꯣ ꯗꯨꯏ꯫ ꯅꯨꯜꯂꯥꯝ ꯀꯨꯏꯁ ꯔꯤꯁꯨꯁ ꯑꯦꯒꯦꯠ ꯎꯔꯅꯥ ꯃꯣꯂꯤꯁ ꯑꯣꯔꯅꯥꯔꯦ ꯚꯦꯜ ꯏꯎ ꯂꯤꯑꯣ꯫ ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫

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

ꯃꯊꯪ ꯃꯅꯥꯎ

HTML ꯃꯁꯥꯃꯛ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ, ꯅꯠꯠꯔꯒꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ CSS ꯈꯔꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ order(ꯅꯍꯥꯛꯅꯥ ꯈꯅꯒꯗꯕꯥ ꯏꯟꯇꯤꯖꯔ ꯑꯃꯗꯥ) ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯑꯣꯔꯗꯔ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ꯫
ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
<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>

ꯃꯤꯗꯤꯌꯥ ꯂꯤꯁ꯭ꯠ ꯇꯧꯕꯥ꯫

ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯗꯨꯗꯥ ꯁ꯭ꯠꯔꯀꯆꯔꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡ ꯑꯗꯨ ꯑꯁꯨꯛ ꯌꯥꯝꯅꯥ ꯂꯩꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯂꯤꯁ꯭ꯠ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯅꯍꯥꯛꯀꯤ <ul>ꯅꯠꯠꯔꯒꯥ , ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯂꯤꯁ꯭ꯠ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯂꯧꯊꯣꯛꯅꯕꯥ ꯑꯗꯨ <ol>ꯍꯥꯄꯆꯤꯜꯂꯨ , ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ s. ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯣꯏꯔꯀꯄꯒꯨꯝꯅꯥ, ꯐꯥꯏꯅꯦꯜ ꯇ꯭ꯌꯨꯟ ꯇꯧꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯐꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫.list-unstyled.media<li>

  • ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
    ꯂꯤꯁ꯭ꯇꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ꯫
    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
  • ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
    ꯂꯤꯁ꯭ꯇꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ꯫
    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
  • ꯖꯦꯅꯦꯔꯦꯜ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯏꯃꯦꯖ꯫
    ꯂꯤꯁ꯭ꯇꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ꯫
    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯦ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
<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>