in English

ꯁꯛꯇꯥꯛꯄ

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

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

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

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

ꯖꯦ.ꯑꯦꯁ

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

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

ꯆꯕꯨꯟ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ꯇꯣꯉꯥꯟꯕ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

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

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

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

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

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

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯍꯦꯟꯅꯥ ꯁ꯭ꯠꯔꯦꯠꯐꯣꯔꯗ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ 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-4)ꯗꯥ ꯐꯪꯒꯅꯤ꯫
  • ꯗꯤꯚꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯃꯦꯛꯁꯤꯃꯝ ꯗꯤꯁꯀꯣꯚꯔꯤꯑꯦꯕꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛ npm ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯗꯦꯂꯤꯚꯔꯤ ꯃꯦꯀꯥꯅꯤꯖꯃꯁꯤꯡꯒꯤ bootstrapꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯦꯟꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯄꯦꯀꯦꯖꯁꯤꯡꯗꯥ ꯀꯤ-ꯋꯥꯔꯗ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫

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

ꯁꯤ.ꯑꯦꯁ.ꯄꯤ.ꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯝꯕꯦꯗꯦꯗ ꯑꯦꯁ.ꯚꯤ.ꯖꯤ

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

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