ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯁꯛꯇꯥꯛꯄ

jsDelivr ꯑꯃꯁꯨꯡ ꯇꯦꯃꯞꯂꯦꯠ ꯁ꯭ꯇꯥꯔꯇꯔ ꯄꯦꯖ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯃꯣꯕꯥꯏꯜ-ꯐꯥꯔꯁ꯭ꯠ ꯁꯥꯏꯇꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯣꯏꯔꯤꯕꯥ Bootstrap ꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯍꯧꯗꯣꯀꯎ꯫

ꯊꯨꯅꯥ ꯍꯧꯗꯣꯀꯄꯥ꯫

ꯑꯗꯣꯃꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯊꯨꯅꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯄꯥꯝꯕꯤꯕꯔꯥ? ꯐ꯭ꯔꯤ ꯑꯣꯄꯟ ꯁꯣꯔꯁ CDN ꯑꯃꯥ ꯑꯣꯏꯔꯤꯕꯥ jsDelivr ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯄꯦꯀꯦꯖ ꯃꯦꯅꯦꯖꯔ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯣꯔꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? ꯗꯥꯎꯅꯂꯣꯗꯁꯤꯡꯒꯤ ꯄꯦꯖꯗꯥ ꯆꯠꯂꯨ .

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯑꯩꯈꯣꯌꯒꯤ CSS ꯂꯣꯗ ꯇꯧꯅꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯃꯥꯡꯗꯥ <link>ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯑꯗꯨ ꯀꯣꯄꯤ-ꯄꯦꯁ꯭ꯠ ꯇꯧ꯫<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

ꯖꯦ.ꯑꯦꯁ

ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯌꯥ ꯑꯃꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯔꯨꯑꯣꯏꯅꯥ, ꯃꯈꯣꯌꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯏꯁꯥꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯔ . ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ <script>s ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯅꯍꯥꯛꯀꯤ ꯄꯦꯖꯁꯤꯡꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯃꯅꯥꯛꯇꯥ, ꯀ꯭ꯂꯣꯖꯤꯡ </body>ꯇꯦꯒ ꯑꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯃꯈꯣꯌꯕꯨ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯊꯝꯃꯨ꯫

ꯆꯕꯨꯟ

ꯑꯩꯈꯣꯌꯒꯤ ꯕꯟꯗꯜ ꯑꯅꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯁꯨꯡ ꯗꯤꯄꯦꯟꯗꯦꯟꯁ ꯈꯨꯗꯤꯡꯃꯛ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ꯫ ꯑꯅꯤꯃꯛ bootstrap.bundle.jsꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯒꯤꯗꯃꯛ ꯄꯣꯄꯔbootstrap.bundle.min.js ꯌꯥꯑꯣꯔꯤ꯫ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯋꯥꯐꯃꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯁꯦꯛꯁꯟ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

ꯇꯣꯉꯥꯟꯕ

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯁ꯭ꯛꯔꯤꯞꯇꯁꯤꯡꯒꯤ ꯁꯣꯂꯨꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯋꯥꯔꯦꯞ ꯂꯧꯔꯕꯗꯤ, ꯄꯣꯄꯔꯅꯥ ꯑꯍꯥꯅꯕꯗꯥ ꯂꯥꯛꯀꯗꯕꯅꯤ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ), ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ꯫

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

ꯃꯣꯗ꯭ꯌꯨꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ <script type="module">, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯃꯣꯗ꯭ꯌꯨꯜ ꯁꯦꯛꯁꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯔ ꯑꯁꯤ ꯀꯔꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯉꯅꯤꯡꯕ꯭ꯔꯥ? ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯎꯠꯄꯥ ꯂꯤꯉ꯭ꯛ ꯑꯁꯤꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯤꯌꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯖꯦꯅꯦꯔꯦꯜ ꯄꯦꯖ ꯁ꯭ꯠꯔꯀꯆꯔꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗ꯭ꯔꯕꯗꯤ, ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯄꯦꯖ ꯇꯦꯃꯞꯂꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯄꯥꯗꯨꯅꯥ ꯂꯩꯌꯨ.

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯎꯠꯄꯥ꯫
  • ꯊꯕꯛꯇꯒꯤ ꯄꯣꯠꯊꯥꯔꯀꯄꯒꯤ ꯑꯦꯂꯔꯇꯁꯤꯡ꯫
  • ꯇꯣꯒꯂꯤꯡ ꯁ꯭ꯇꯦꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯆꯦꯀꯕꯣꯛꯁ/ꯔꯦꯗꯤꯑꯣ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯒꯤꯗꯃꯛ ꯕꯇꯅꯁꯤꯡ꯫
  • ꯁ꯭ꯂꯥꯏꯗ ꯕꯤꯍꯦꯕꯤꯌꯔ, ꯀꯟꯠꯔꯣꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯏꯟꯗꯤꯀꯦꯇꯔ ꯄꯨꯝꯅꯃꯛꯀꯤꯗꯃꯛ ꯀꯦꯔꯣꯁꯤꯜ꯫
  • ꯀꯟꯇꯦꯟꯇꯀꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯕꯥ꯫
  • ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ (ꯄꯣꯄꯔꯁꯨ ꯃꯊꯧ ꯇꯥꯏ )
  • ꯎꯠꯄꯥ, ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ, ꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯒꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯀꯤ ꯃꯣꯗꯦꯂꯁꯤꯡ꯫
  • ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯁꯥꯡꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯅꯦꯚꯕꯥꯔ꯫
  • ꯗꯤꯁꯞꯂꯦ ꯇꯧꯕꯥ, ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ, ꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯒꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯀꯤꯗꯃꯛ ꯑꯣꯐꯀꯦꯅꯚꯥꯁꯁꯤꯡ꯫
  • ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯊꯥꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯇꯣꯁ꯭ꯇꯁꯤꯡ꯫
  • ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ (ꯄꯣꯄꯔꯁꯨ ꯃꯊꯧ ꯇꯥꯏ )
  • ꯁ꯭ꯛꯔꯣꯜ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯃꯁꯨꯡ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯄꯗꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯁ꯭ꯛꯔꯣꯂꯁꯄꯤ꯫

ꯁ꯭ꯇꯥꯔꯇꯑꯞ ꯇꯦꯃꯞꯂꯦꯠ꯫

ꯅꯍꯥꯛꯀꯤ ꯄꯦꯖꯁꯤꯡ ꯑꯗꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯁꯨꯡ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯣꯏꯗꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯤꯌꯨ꯫ ꯍꯥꯌꯕꯗꯤ HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯃꯦꯇꯥ ꯇꯦꯒ ꯑꯃꯥ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯄꯨꯟꯅꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯄꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯗꯕꯅꯤ:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

ꯃꯊꯪꯒꯤ ꯈꯣꯡꯊꯥꯡꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯇꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯂꯦꯑꯥꯎꯠ ꯇꯧꯕꯥ ꯍꯧꯅꯕꯒꯤꯗꯃꯛ ꯂꯦꯑꯥꯎꯠ ꯗꯣꯀꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯈꯨꯗꯃꯁꯤꯡꯗꯥ ꯆꯠꯄꯤꯌꯨ꯫

ꯃꯔꯨꯑꯣꯏꯕꯥ ꯒ꯭ꯂꯣꯕꯦꯂꯁꯤꯡ꯫

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

HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯇꯧꯕꯥ꯫

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

<!doctype html>
<html lang="en">
  ...
</html>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯃꯦꯇꯥ ꯇꯦꯒ ꯇꯧꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯃꯣꯕꯥꯏꯜ ꯐꯥꯔꯁ꯭ꯠ ꯗꯤꯕꯦꯂꯞ ꯇꯧꯏ , ꯃꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯍꯥꯅꯕꯗꯥ ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯣꯗ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁ꯭ꯀꯦꯜ ꯑꯞ ꯇꯧꯕꯥ ꯁ꯭ꯠꯔꯦꯇꯦꯖꯤ ꯑꯃꯅꯤ꯫ ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯇꯆ ꯖꯨꯝ ꯇꯧꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯤꯎꯄꯣꯔꯠ ꯃꯦꯇꯥ ꯇꯦꯒ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

ꯃꯁꯤꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯇꯥꯔꯇꯑꯞ ꯇꯦꯃꯞꯂꯦꯠꯇꯥ ꯑꯦꯛꯁꯅꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ .

ꯕꯣꯛꯁ-ꯁꯥꯏꯖꯤꯡ ꯇꯧꯕꯥ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯍꯦꯟꯅꯥ ꯁ꯭ꯠꯔꯦꯠꯐꯣꯔꯗ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ box-sizingꯚꯦꯜꯌꯨ content-boxꯑꯁꯤ border-box. ꯃꯁꯤꯅꯥ paddingꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯀꯝꯞꯌꯨꯠ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯦ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯍꯜꯂꯤ, ꯑꯗꯨꯕꯨ ꯃꯁꯤꯅꯥ ꯒꯨꯒꯜ ꯃꯦꯞ ꯑꯃꯁꯨꯡ ꯒꯨꯒꯜ ꯀꯁ꯭ꯇꯝ ꯁꯔꯆ ꯏꯟꯖꯤꯅꯒꯨꯝꯕꯥ ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯁꯣꯐꯇꯋꯥꯌꯔ ꯈꯔꯗꯥ ꯁꯃꯁ꯭ꯌꯥ ꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯊꯣꯀꯄꯥ ꯊꯧꯗꯣꯛ ꯑꯃꯗꯥ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ:

.selector-for-some-widget {
  box-sizing: content-box;
}

ꯃꯊꯛꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ—ꯃꯗꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ::beforeꯑꯃꯁꯨꯡ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯌꯥꯑꯣꯅꯥ—ꯄꯨꯝꯅꯃꯛ ꯃꯗꯨꯒꯤꯗꯃꯛ ::afterꯇꯥꯀꯄꯥ ꯑꯗꯨ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯒꯅꯤ .box-sizing.selector-for-some-widget

ꯕꯣꯛꯁ ꯃꯣꯗꯦꯜ ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯈꯉꯕꯤꯌꯨ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .

ꯔꯤꯕꯨꯠ ꯇꯧꯕꯥ꯫

ꯑꯍꯣꯡꯕꯥ ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯟꯗꯔꯤꯡꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯀꯃꯟ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯂꯩꯕꯥ ꯔꯤꯁꯦꯠꯁꯤꯡ ꯄꯤꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯁꯣꯏ-ꯑꯉꯥꯝ ꯌꯥꯑꯣꯗꯕꯁꯤꯡ ꯀꯣꯀꯍꯟꯅꯕꯥ ꯔꯤꯕꯨꯠ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯈꯨꯟꯅꯥꯏ

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯈꯉꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯃꯇꯦꯡ ꯄꯥꯡꯒꯗꯕꯥ ꯔꯤꯁꯣꯔꯁꯁꯤꯡ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯟꯅꯥꯏꯗꯥ ꯌꯧꯕꯤꯌꯨ꯫

  • ꯗꯤ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯕ꯭ꯂꯣꯒ ꯑꯁꯤ ꯄꯥꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯁꯕꯁ꯭ꯛꯔꯥꯏꯕ ꯇꯧꯕꯤꯌꯨ .
  • ꯑꯥꯏ.ꯑꯥꯔ.ꯁꯤ.ꯗꯥ ꯂꯩꯕꯥ ꯃꯔꯨꯞ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯔꯁꯤꯡꯒꯥ ꯋꯥꯔꯤ ꯁꯥꯅꯕꯤꯌꯨ꯫ irc.libera.chatꯁꯔꯚꯔꯗꯥ #bootstrap, ꯆꯦꯅꯦꯂꯗꯥ꯫
  • ꯏꯃꯞꯂꯤꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯃꯇꯦꯡ ꯑꯁꯤ ꯁ꯭ꯇꯦꯛ ꯑꯣꯚꯔꯐ꯭ꯂꯣ (ꯇꯦꯒ ꯇꯧꯔꯕꯥ bootstrap-5)ꯗꯥ ꯐꯪꯒꯅꯤ꯫
  • ꯗꯤꯚꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯃꯦꯛꯁꯤꯃꯝ ꯗꯤꯁꯀꯣꯚꯔꯤꯑꯦꯕꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛ npm ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯗꯦꯂꯤꯚꯔꯤ ꯃꯦꯀꯥꯅꯤꯖꯃꯁꯤꯡꯒꯤ bootstrapꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯦꯟꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯦꯀꯦꯖꯁꯤꯡꯗꯥ ꯀꯤ-ꯋꯥꯔꯗ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ ꯒꯣꯁꯤꯞ ꯑꯃꯁꯨꯡ ꯑꯉꯀꯄꯥ ꯃ꯭ꯌꯨꯖꯤꯛ ꯚꯤꯗꯤꯑꯣꯁꯤꯡꯒꯤꯗꯃꯛ ꯇꯨꯏꯇꯔꯗꯥ @getbootstrap ꯐꯣꯂꯣ ꯇꯧꯕꯁꯨ ꯌꯥꯒꯅꯤ꯫