ꯊꯧꯑꯣꯡ

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

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

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

ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯍꯦꯟꯅꯥ ꯂꯨꯝꯅꯥ ꯂꯧꯒꯅꯤ, ꯑꯗꯨꯕꯨ ꯑꯋꯥꯡꯕꯥ ꯊꯥꯛ ꯑꯃꯗꯥ, ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤꯕꯨ ꯂꯃꯖꯤꯡꯕꯤꯔꯤ꯫

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

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

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯄꯥꯟꯗꯥ, ꯃꯁꯤ ꯑꯗꯣꯝꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫ ꯑꯌꯥꯝꯕꯥ ꯀꯦꯁꯁꯤꯡꯗꯗꯤ, ꯑꯩꯈꯣꯌꯅꯥ min-widthꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯍꯧꯔꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯋꯥꯡꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯨꯗꯨꯅꯥ ꯆꯠꯂꯤꯕꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, a ꯑꯁꯤ ꯐ꯭ꯔꯝ ꯏꯅꯐꯤꯅꯤꯇꯤꯗꯥ .d-noneꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ min-width: 0ꯑꯃꯔꯣꯃꯗꯥ, ꯑꯦ .d-md-noneꯑꯁꯤ ꯃꯦꯗꯤꯌꯝ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯒꯤ ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯆꯠꯅꯩ꯫

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

ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯔꯤꯕꯨꯠ, ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯅꯣꯔꯃꯦꯂꯥꯏꯖꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯑꯃꯥ ꯅꯠꯇꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯇꯥꯏꯜ ꯄꯨꯝꯅꯃꯛꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫ ꯃꯁꯤꯅꯥ ꯇꯥꯏꯞ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, input[type="text"]) ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯠꯔꯥꯅꯤꯌꯁ ꯄꯦꯔꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .parent .child)ꯗꯒꯤ ꯁ꯭ꯇꯤꯌꯔꯤꯡ ꯀ꯭ꯂꯤꯌꯥꯔ ꯇꯧꯕꯥ ꯍꯥꯌꯕꯁꯤꯅꯤ, ꯃꯈꯣꯌꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯕꯨ ꯌꯥꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯣꯏꯍꯟꯗꯨꯅꯥ ꯐꯖꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫

ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯀꯃꯟ ꯑꯣꯏꯕꯥ, ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯔꯣꯏꯗꯕꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ-ꯚꯦꯜꯌꯨ ꯄꯦꯌꯥꯔꯁꯤꯡ ꯂꯩꯕꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯀꯗꯕꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .btnꯑꯃꯁꯨꯡ .btn-primary. ꯑꯩꯈꯣꯌꯅꯥ .btn, display, paddingꯑꯃꯁꯨꯡ border-width. .btn-primaryꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯆꯨ, ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ-ꯀꯂꯔ, ꯕꯣꯔꯗꯔ-ꯀꯂꯔ ꯑꯁꯤꯅꯆꯤꯡꯕꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

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

z-ꯏꯟꯗꯦꯛꯁ ꯁ꯭ꯀꯦꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁ꯭ꯀꯦꯜ ꯑꯅꯤ ꯂꯩ z-index-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯣꯚꯔꯂꯦꯏ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

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

• ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯔꯗꯤ borderꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯅꯥ ꯗꯕꯜ ꯕꯣꯔꯗꯔꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯑꯣꯚꯔꯂꯦꯞ ꯇꯧꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯂꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯄꯦꯖꯤꯅꯦꯁꯟ꯫
• ꯍꯥꯌꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ z-indexꯑꯁꯤꯅꯥ 0ꯊ꯭ꯔꯨ 3.
• 0ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏ (ꯑꯍꯥꯅꯕꯥ), 1ꯑꯁꯤ :hover, 2ꯑꯁꯤ :active/ .active, ꯑꯃꯁꯨꯡ 3ꯑꯁꯤ :focus.
• ꯃꯁꯤꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯋꯥꯡꯕꯥ ꯌꯨꯖꯔ ꯄ꯭ꯔꯥꯏꯑꯣꯔꯤꯇꯤꯒꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯦꯛꯁꯄꯦꯛꯇꯦꯁꯅꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯩ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ ꯐꯣꯀꯁ ꯇꯧꯔꯕꯗꯤ ꯃꯗꯨ ꯃꯤꯠꯌꯦꯡꯗꯥ ꯑꯃꯁꯨꯡ ꯌꯨꯖꯔꯒꯤ ꯄꯨꯛꯅꯤꯡꯗꯥ ꯂꯩ꯫ ꯑꯦꯛꯇꯤꯕ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯅꯤꯁꯨꯕꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯋꯥꯡꯕꯥ ꯑꯣꯏꯔꯤ ꯃꯔꯃꯗꯤ ꯃꯈꯣꯌꯅꯥ ꯔꯥꯖ꯭ꯌ ꯇꯥꯀꯏ꯫ ꯍꯣꯚꯔ ꯑꯁꯤ ꯑꯍꯨꯃꯁꯨꯕꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯋꯥꯡꯕꯥ ꯑꯣꯏꯔꯤ ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯌꯨꯖꯔꯒꯤ ꯏꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯇꯥꯀꯏ, ꯑꯗꯨꯕꯨ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯄꯣꯠ ꯑꯃꯠꯇꯥ ꯍꯣꯚꯔ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯑꯣꯚꯔꯂꯦꯏ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

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

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

ꯃꯁꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ z-indexꯂꯦꯑꯥꯎꯠ ꯄꯦꯖꯗꯥ ꯍꯦꯟꯅꯥ ꯈꯉꯕꯤꯌꯨ .

ꯖꯦ.ꯑꯦꯁ.ꯀꯤ ꯃꯊꯛꯇꯥ HTML ꯑꯃꯁꯨꯡ CSS

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

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

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

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

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ-ꯍꯥꯟꯅꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 3ꯗꯥ ꯍꯦꯜꯄꯔ ꯑꯣꯏꯔꯝꯕꯥ-ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯕ꯭ꯂꯣꯠ ꯑꯃꯁꯨꯡ ꯐꯠꯇꯕꯥ ꯄꯦꯖ ꯄꯔꯐꯣꯃꯦꯟꯁ ꯊꯦꯡꯅꯕꯗꯥ ꯁꯛꯇꯤ ꯂꯩꯕꯥ ꯃꯔꯨꯞ ꯑꯃꯅꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯅꯥ ꯃꯍꯧꯁꯥꯅꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯣꯡꯗꯣꯀꯄꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .d-blockꯔꯤꯞꯔꯖꯦꯟꯇ ꯇꯧꯏ display: block;) ꯁꯤꯉ꯭ꯒꯜ, ꯏꯝꯌꯨꯇꯦꯕꯜ ꯄ꯭ꯔꯣꯄꯔꯇꯤ-ꯚꯦꯜꯌꯨ ꯄꯦꯔꯤꯡ ꯑꯃꯅꯤ꯫ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯄꯤꯜ ꯑꯁꯤ HTML ꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯈꯣꯡꯖꯦꯜ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯏꯒꯗꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

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

ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ HTML꯫

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

ꯑꯩꯈꯣꯌꯅꯥ vnu-jar ꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯑꯃꯁꯨꯡ ꯁꯦꯃꯦꯟꯇꯤꯛ HTML ꯆꯠꯅꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯂꯣꯌꯅꯅꯥ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯑꯁꯣꯏꯕꯁꯤꯡ ꯈꯉꯗꯣꯀꯏ꯫