ΠΠ°Π±ΠΎΡ UI ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½Π°Π±ΠΎΡ UI-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅Π²ΡΠΌ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Π°ΠΌ SendPulse, ΡΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΈ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ Π΅Π΄ΠΈΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
ΠΠ°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΅Π΄ΠΈΠ½ΡΠΉ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Ρ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΡΠΎΡΠΌ, ΡΠ°Π±Π»ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ:
- ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π²ΡΡΡΡΠΊΠΈ β Π²ΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ CSS-/SASS-ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠΆΠ΅ ΡΠΎΠ±ΡΠ°Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅;
- ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠΎΠ½ΡΠΈΡΡΠ΅Π½ΡΠ½ΠΎΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°, ΡΠΎΡΠΌ, ΡΠ°Π±Π»ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²;
- ΡΡΠΊΠΎΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π·Π° ΡΡΡΡ Π³ΠΎΡΠΎΠ²ΡΡ Figma-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
Π ΡΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π½Π°Π±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°Π±ΠΎΡ UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π΅Π³ΠΎ CSS-ΠΊΠΎΠ΄ Π² ΡΠ΅ΠΊΡΠΈΡ <head> Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π³ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ.
<link rel="stylesheet" href="https://cdn.sendpulse.com/dist/css/sp-marketplace-app-ui.min.css">
Π§ΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ Figma UI Kit ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΏΠΎΠ»Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ SendPulse. ΠΡΠΈ ΡΡΠΈΠ»ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ
ΠΠ°Π·ΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° β 16 px Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠΌ 1.428. ΠΠ±Π·Π°ΡΡ (<p>) ΠΈΠΌΠ΅ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ .lead Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π°Π±Π·Π°ΡΠ° (<p>) ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ, ΡΠ°Π²Π½ΡΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 10 px).
Π‘ΡΡΠΎΡΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (inline text elements), ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΡΠ΅ΠΊΡΡΠ°. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
<mark> |
ΠΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°Π΅Ρ Π²Π°ΠΆΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΠΎΠΌΠΎΠ³Π°Π΅Ρ Π±ΡΡΡΡΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΠ΅ΠΊΡΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ. |
<del> |
ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΄Π°Π»ΡΠ½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π»ΠΎΠ³Π°Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . |
<s> |
ΠΠ΅ΡΠ΅ΡΡΡΠΊΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΡΡ ΠΈΠ»ΠΈ Π½Π΅Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. |
<ins> |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
Π₯ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π² ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ½Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΡΡ . |
<u> |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΡΠ°Π· Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΡ . |
<small> |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ³ΠΎ (ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ) ΡΠ΅ΠΊΡΡΠ°.
Π£Π΄ΠΎΠ±Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΠΈΠ»ΠΈ Π΄Π°ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ. |
<strong> |
Π€ΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΆΠΈΡΠ½ΡΠΌ.
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π°ΠΊΡΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ. |
<em> |
Π€ΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΊΡΡΡΠΈΠ²ΠΎΠΌ.
ΠΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π° ΠΈΠ»ΠΈ ΡΡΠΎΡΠ½Π΅Π½ΠΈΡ Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΡ . |
<abbr> |
ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
ΠΠ±ΡΡΡΠ½ΡΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΠΎΡΠΌΠ°Ρ ΠΈΠ»ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ API. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ |
<blockquote> |
Π€ΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ ΡΠΈΡΠ°ΡΡ.
ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΠ·ΡΠ²Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ |
ΠΠΎΠ΄
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ΠΈ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ ΠΊΠΎΠ΄. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ:
<code> |
ΠΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ΄Π° Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΊΡΡΠ°. |
<kbd> |
ΠΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π²Π²ΠΎΠ΄ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ. |
<pre> |
ΠΡΠ΄Π΅Π»ΡΠ΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ΄Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.
ΠΠ»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ Π²ΡΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ Unicode. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ |
<var> |
ΠΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. |
<samp> |
ΠΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΡ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ . |
Π‘ΠΏΠΈΡΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ΠΈ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Π±ΠΎΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ:
<ul> |
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ (Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ) ΡΠΏΠΈΡΠΎΠΊ. |
<ol> |
Π‘ΠΎΠ·Π΄Π°ΡΡ Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ. |
<dl> |
Π‘ΠΎΠ·Π΄Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ-ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Ρ ΡΠ΅ΡΠΌΠΈΠ½Π°ΠΌΠΈ ΠΈ ΠΈΡ
ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΠΌΠΈ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΌΠΈ Π½ΠΈΠΆΠ΅ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΡΠ»Π΅Π²Π°.
ΠΠ»ΠΈΠ½Π½ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠΏΠΈΡΠΊΠ°Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ Π½Π° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ . |
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ (<ul>) Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
CSS-ΠΊΠ»Π°ΡΡΠΎΠ²:
.list-unstyled |
Π£Π±ΠΈΡΠ°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΈ Π»Π΅Π²ΡΠΉ ΠΎΡΡΡΡΠΏ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°. ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΠΏΡΡΠΌΡΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠ°ΠΌ; Π΄Π»Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ² ΠΊΠ»Π°ΡΡ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π³Π΄Π΅ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Π±Π΅Π· ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. |
.list-inline |
Π Π°Π·ΠΌΠ΅ΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ.
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΊΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ. |
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ HTML-ΡΠ΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΡΠΎΠ±Ρ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ ΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ΅ΠΊΡΠΈΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ (.h1β.h6), ΡΡΠΎΠ±Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΡΠΎΠ²Π½ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΊΡΡΠ° Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠΈ.
ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ:
h1 |
.h1 |
ΠΠΈΡΠ½ΡΠΉ | 40 px |
h2 |
.h2 |
ΠΠΈΡΠ½ΡΠΉ | 24 px |
h3 |
.h3 |
ΠΠ±ΡΡΠ½ΡΠΉ | 20 px |
h4 |
.h4 |
ΠΠ±ΡΡΠ½ΡΠΉ | 18 px |
h5 |
.h5 |
ΠΠ±ΡΡΠ½ΡΠΉ | 16 px |
h6 |
.h6 |
ΠΠ±ΡΡΠ½ΡΠΉ | 14 px |
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ <small> ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡ .small, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅.
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠΈΠ»ΠΈΡΠ°ΡΠ½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ²:
.text-left |
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
.text-center |
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. |
.text-right |
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
.text-justify |
Π Π°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. |
.text-nowrap |
ΠΡΠΊΠ»ΡΡΠ°Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ°. |
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠΉΡΠ΅ ΡΠ΅Π³ΠΈΡΡΡ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ²:
.text-uppercase |
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ Π² ΠΠΠΠΠΠΠΠ«Π Π±ΡΠΊΠ²Ρ. |
.text-lowercase |
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ Π² ΡΡΡΠΎΡΠ½ΡΠ΅ Π±ΡΠΊΠ²Ρ. |
.text-capitalize |
ΠΠ΅Π»Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ Ρ Π·Π°Π³Π»Π°Π²Π½ΠΎΠΉ Π±ΡΠΊΠ²Ρ. |
ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ°Π±Π»ΠΈΡ ΠΈΠ· Π½Π°Π±ΠΎΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ°Π±Π»ΠΈΡ:
.table |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΡΠΈΠ»Ρ: Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΡΡΠΏ (padding) ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
<table>. |
.blue-table |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΡΠ°Π±Π»ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² SendPulse: Π±Π΅Π· Π³ΡΠ°Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ Ρ ΡΠ΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½Π° ΡΡΡΠΎΠΊ. |
.table-striped |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Β«Π·Π΅Π±ΡΡΒ» (ΡΠ΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΡΠ²Π΅ΡΠΎΠ²) ΡΡΡΠΎΠΊΠ°ΠΌ Π² <tbody> Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ (ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΡΠ΅ΡΠ΅Π· :nth-child). |
.table-bordered |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ Π²ΡΠ΅Ρ ΡΡΠ΅Π΅ΠΊ ΠΈ ΡΠ°ΠΌΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ. |
.table-hover |
ΠΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΡ ΡΡΡΠΎΠΊΠΈ <tbody> ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π£Π»ΡΡΡΠ°Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ Π½ΡΠΆΠ½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠΎΠ². |
.table-condensed |
Π£ΠΌΠ΅Π½ΡΡΠ°Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΡΠ΅Π΅ΠΊ Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°. |
.table-responsive |
ΠΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ .table, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΡΠΆΠ΅ 768 px (Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΠ΅ ΡΠΊΡΠ°Π½Ρ).
ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΡΠ°Π±Π»ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°ΡΠΈΡΡΠΈΠΊΠΈ ΡΠ°ΡΡΡΠ»ΠΎΠΊ. |
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΡΠ΅Π΅ΠΊ. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ:
.active |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΠΊΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠ΅. |
.success |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΠΏΠ΅ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠ²Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ (Π·Π΅Π»ΡΠ½ΡΠΉ ΡΠΎΠ½ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ). |
.info |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π΅ΠΉΡΡΠ°Π»ΡΠ½ΡΠΉ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ (ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ). |
.warning |
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, ΡΡΠ΅Π±ΡΡΡΠ΅Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ (ΠΆΡΠ»ΡΡΠΉ). |
.danger |
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (ΠΊΡΠ°ΡΠ½ΡΠΉ). |
ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠΎΡΠΌΡ
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΠΏΡ Π²Π²ΠΎΠ΄Π° ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΡΠΈΠΏΡ ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
<form> |
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ. ΠΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ block, inline ΠΈΠ»ΠΈ horizontal. |
<input> |
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² Π²Π²ΠΎΠ΄Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π²ΡΠ±ΠΎΡΠ°.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ |
<textarea> |
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°. Π£ΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ Π²ΡΡΠΎΡΠΎΠΉ ΠΏΠΎΠ»Ρ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ rows. |
<select> |
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ
ΡΠΏΠΈΡΠΊΠΎΠ². ΠΠ»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ multiple.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ |
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠΈΠΏΡ ΡΠΎΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ².
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ
ΠΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΡΠΈΠΏΠ°ΠΌ ΡΠΎΡΠΌ (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color), ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΈΡ
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ:
.form-control |
ΠΠ°Π·ΠΎΠ²ΠΎΠ΅ ΡΡΠΈΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (ΡΠΈΡΠΈΠ½Π° 100 %, padding, ΡΠ°ΠΌΠΊΠΈ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°) Π΄Π»Ρ <input>, <textarea> ΠΈ <select>. |
.form-control-date |
Π‘ΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ <input type="date"> Π΄Π»Ρ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ². |
.form-control-time |
Π‘ΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ <input type="time"> Π΄Π»Ρ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ². |
.form-control-static |
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅Ρ Π±Π»ΠΎΠΊ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π»ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΠΎΠΉ.
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΡΠΈΠ»Π΅, ΡΡΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠ»Ρ, Π±Π΅Π· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. |
.help-block |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠΎΡΠΌΡ (ΡΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· aria-describedby).
Π£Π΄ΠΎΠ±Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ° Π²Π²ΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° ΠΏΠ°ΡΠΎΠ»Ρ) Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. |
ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΠΉ Π²Π²ΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ <textarea> Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .form-control. ΠΠ»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ
ΡΠΏΠΈΡΠΊΠΎΠ² (<select>) Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ .form-control. ΠΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎ-ΡΠ²ΠΎΠ΅ΠΌΡ ΠΎΠΊΡΡΠ³Π»ΡΡΡ Π½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ select.
ΠΡΡΠΏΠΏΡ Π²Π²ΠΎΠ΄Π°
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΅Π΄ΠΈΠ½ΡΠΉ ΡΡΠΈΠ»Ρ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΏΠΎΠ»ΡΠΌ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΠΈΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ Π°Π΄Π΄ΠΎΠ½Π°ΠΌΠΈ (addons), ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ»Ρ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π²ΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ²:
.input-group |
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π³ΡΡΠΏΠΏΠΈΡΡΠ΅Ρ <input> Ρ Π΅Π³ΠΎ Π°Π΄Π΄ΠΎΠ½Π°ΠΌΠΈ (ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ) Π² Π΅Π΄ΠΈΠ½ΡΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ.
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ ΠΈΠ»ΠΈ ΡΡΡΡΠΈΠΊΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΠΌΠ²ΠΎΠ» Π²Π°Π»ΡΡΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ) Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ΄ΠΎΠΌ Ρ ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π° Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. |
.input-group-addon |
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ), ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ <input>.
Π£Π΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, |
Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ (checkbox), ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈΠ· ΡΠΏΠΈΡΠΊΠ°, ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ (radiobuttons), ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΈΡ . ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΎΠ±ΡΡΡΠΊΠΈ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΌ:
.checkbox |
ΠΠ±Π΅ΡΡΡΠ²Π°Π΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ <input type="checkbox"> ΠΈ Π΅Π³ΠΎ <label> Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ. |
.radio |
ΠΠ±Π΅ΡΡΡΠ²Π°Π΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ <input type="radio"> ΠΈ Π΅Π³ΠΎ <label> Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ. |
.checkbox-inline |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ»Π°ΠΆΠΎΠΊ ΠΈ Π΅Π³ΠΎ <label> Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ (inline). |
.radio-inline |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ Π΅Ρ <label> Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ (inline). |
.disabled (ΠΎΠ±ΡΡΡΠΊΠ°) |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ .checkbox, .checkbox-inline, .radio ΠΈΠ»ΠΈ .radio-inline, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ΅ΡΡΠΉ Π²ΠΈΠ΄ ΠΈ ΠΊΡΡΡΠΎΡ Β«Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎΒ». |
ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΌΠ΅ΡΠΊΠΈ Π½Π΅Ρ, ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² .checkbox ΠΈΠ»ΠΈ .radio ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ aria-label Π½Π° <input>, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΠ·Π²ΡΡΠΈΠ²Π°Π»ΠΈ Π΅Π³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ±ΡΡΡΠΊΠΈ Π΄Π»Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ
ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌΡ ΠΈ ΠΈΡ ΠΌΠ΅ΡΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ.
.has-success |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π·Π΅Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°. |
.has-warning |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΆΡΠ»ΡΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ. |
.has-error |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΊΡΠ°ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΊΠΈ. |
.has-feedback |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ Π²Π½ΡΡΡΡ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°. |
.form-control-feedback |
ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ. |
.sp-icon icon-check |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ Π³Π°Π»ΠΎΡΠΊΠΈ (ΡΡΠΏΠ΅Ρ ). |
.sp-icon icon-warning |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ. |
.sp-icon icon-closed |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΊΡΠ΅ΡΡΠΈΠΊΠ° (ΠΎΡΠΈΠ±ΠΊΠ°). |
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ Ρ .has-feedback ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .form-control-feedback.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΊΡΡΡΡΠΉ <span class="sr-only"></span> (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«(ΡΡΠΏΠ΅ΡΠ½ΠΎ)Β») Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΎΠΉ ΡΠ΅ΡΠ΅Π· aria-describedby, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΎΠ·Π²ΡΡΠΈΠ²Π°Π»ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ.
Π Π°Π·ΠΌΠ΅ΡΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ Π²ΡΡΠΎΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΎΠ±ΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π³ΡΡΠΏΠΏ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΌΠ°Ρ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ:
.input-lg |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠ΅/Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΡΡΠΎΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ .btn-lg.
ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π°ΠΌΠ΅ΡΠ½ΡΡ ΠΏΠΎΠ»Π΅ΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠΎΡΠΌΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΡΠΈΡΡΠ°ΠΌΠΈ Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ. |
.input-sm |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠ΅/Π½ΠΈΠ·ΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΡΡΠΎΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ .btn-sm.
Π£Π΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ , Π³Π΄Π΅ Π½ΡΠΆΠ΅Π½ ΡΠΊΠΎΠ½ΠΎΠΌΠ½ΡΠΉ ΠΏΡΠΎΡΡΠΎΡ. |
.form-group-lg |
Π Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
ΡΠΎΡΠΌΠ°Ρ
(.form-horizontal) ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΈ ΠΌΠ΅ΡΠΊΡ, ΠΈ ΠΏΠΎΠ»Π΅ Π΄ΠΎ Β«Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎΒ» ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°ΠΆΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΠΏΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ API-ΠΊΠ»ΡΡΠ°. |
.form-group-sm |
Π Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
ΡΠΎΡΠΌΠ°Ρ
(.form-horizontal) ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΈ ΠΌΠ΅ΡΠΊΡ, ΠΈ ΠΏΠΎΠ»Π΅ Π΄ΠΎ Β«ΠΌΠ°Π»ΠΎΠ³ΠΎΒ» ΡΠ°Π·ΠΌΠ΅ΡΠ°. |
.col-xs-2 |
ΠΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ ΡΠ΅ΡΠΊΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 2 Π½Π° ΡΠΎΡΠΊΠ΅ Π²Ρ
ΠΎΠ΄Π° xs.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π»Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ»Π΅ΠΉ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . |
.col-xs-3 |
ΠΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ ΡΠ΅ΡΠΊΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 3 Π½Π° ΡΠΎΡΠΊΠ΅ Π²Ρ ΠΎΠ΄Π° xs. |
.col-xs-4 |
ΠΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ ΡΠ΅ΡΠΊΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 4 Π½Π° ΡΠΎΡΠΊΠ΅ Π²Ρ ΠΎΠ΄Π° xs. |
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ <a>, <button> ΠΈ <input>. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
.btn |
ΠΠ°Π·ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ β Π·Π°Π΄Π°Π΅Ρ ΠΎΡΡΡΡΠΏΡ (padding), ΡΠ°ΠΌΠΊΠΈ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΈ ΠΊΡΡΡΠΎΡ. |
.btn-default |
ΠΠ΅ΠΉΡΡΠ°Π»ΡΠ½ΡΠΉ (Β«Π²ΡΠΎΡΠΈΡΠ½ΡΠΉΒ») ΡΡΠΈΠ»Ρ β ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠΎΠ½, ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. |
.btn-primary |
Π‘ΡΠΈΠ»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ β ΡΠΈΠ½ΠΈΠΉ ΡΠΎΠ½, Π±Π΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ. |
.btn-success |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠ²Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ β Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠΎΠ½. |
.btn-info |
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ β ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠΎΠ½. |
.btn-warning |
ΠΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ β ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠΎΠ½. |
.btn-danger |
ΠΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ β ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½. |
.btn-link |
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅Ρ ΡΡΡΠ»ΠΊΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΡ (Π±Π΅Π· ΡΠΎΠ½Π°, ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ ΡΠ΅ΠΊΡΡ). |
.btn-lg |
Π£Π²Π΅Π»ΠΈΡΠ΅Π½Π½Π°Ρ/Π²ΡΡΠΎΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΡΡΠΎΡΠ΅ .btn btn-lg. |
.btn-sm |
Π£ΠΌΠ΅Π½ΡΡΠ΅Π½Π½Π°Ρ/Π½ΠΈΠ·ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° β ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΡΡΠΎΡΠ΅ .btn btn-sm. |
.btn-xs |
ΠΠΈΠ½ΠΈΠ°ΡΡΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° β Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. |
.btn-block |
ΠΠ°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. |
.active |
ΠΠ°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°ΠΆΠ°ΡΠΎΠΉ (ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠΎΠ½, ΡΡΡΠ΅ΠΊΡ Π²Π΄Π°Π²Π»Π΅Π½Π½ΠΎΡΡΠΈ). |
.disabled |
ΠΡΠΈΠ΄Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½Π½ΡΠΉΒ» Π²ΠΈΠ΄ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ°Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (Π΄Π»Ρ <a> ΠΈ <button>). ΠΠ»Ρ <button> ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ disabled="disabled". |
Π₯ΠΎΡΡ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ <a> ΠΈ <button>, ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <button> ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² nav ΠΈ navbar ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Internet Explorer 9 ΠΈ Π½ΠΈΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π½Ρ (text-shadow) ΠΊ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ <button>. Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠΎΡΠΌΡ.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΡΠΉΡΠ΅ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
.img-responsive |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ max-width: 100%, height: auto, display: block, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ. |
.center-block |
Π¦Π΅Π½ΡΡΠΈΡΡΠ΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅). |
SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ .img-responsive ΠΌΠΎΠ³ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π² IE8β10. Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ width: 100% \9; Π² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ β ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Bootstrap Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ.
ΠΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠΊΡΡΠ³Π»ΡΠ½Π½ΡΠ΅ ΡΠ³Π»Ρ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
.img-rounded |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅, ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠΊΡΡΠ³Π»ΡΠ½Π½ΡΠ΅ ΡΠ³Π»Ρ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. |
.img-circle |
Π€ΠΎΡΠΌΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΊΡΡΠ³Π° (ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅). |
.img-thumbnail |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅ΡΠ»ΡΡ ΡΠ°ΠΌΠΊΡ, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΠΈ ΡΠΊΡΡΠ³Π»ΡΠ½Π½ΡΠ΅ ΡΠ³Π»Ρ Π΄Π»Ρ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. |
Internet Explorer 8 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² Π² CSS. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ.
ΠΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²Π΅Ρ ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π·Π°ΠΊΡΡΡΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΠ΅ΡΠΊΠΈ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π°ΠΊΡΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²ΡΠ΅ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ ΡΠ²Π΅ΡΠΎΠΌ, ΡΠ°ΠΊΠΆΠ΅ Π΄ΡΠ±Π»ΠΈΡΡΡΡΡΡ Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌ ΡΠ΅ΠΊΡΡΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΡΠ΅Π· .sr-only).
.text-muted |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ, ΠΏΡΠΈΠ³Π»ΡΡΡΠ½Π½ΡΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΡ Π°ΠΊΡΠ΅Π½ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅Β»). |
.text-primary |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ β ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²Π°ΠΆΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. |
.text-success |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π·Π΅Π»ΡΠ½ΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ; ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΡΒ»). |
.text-info |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠ²Π΅Ρ; ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ. |
.text-warning |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠ²Π΅Ρ; ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΠ°ΡΠΎΠ»Ρ ΡΠΊΠΎΡΠΎ ΠΈΡΡΠ΅ΡΡΡΒ»). |
.text-danger |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΠ»ΠΈ ΠΎΠΏΠ°ΡΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«Π£Π΄Π°Π»ΠΈΡΡ Π°ΠΊΠΊΠ°ΡΠ½ΡΒ»). |
Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΊΠ»Π°ΡΡΡ Π°ΠΊΡΠ΅Π½ΡΠΎΠ² Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΈΠ·-Π·Π° ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ±ΡΡΠ½ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΡΠ΅ΠΊΡΡ Π² <span> Ρ Π½ΡΠΆΠ½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°
ΠΠ»Π°ΡΡΡ ΡΠΎΠ½Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΊ ΠΈ Ρ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°, Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°ΠΉΡΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ²Π΅Ρ; Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΡΠΊΡΡΡΡΠ΅ ΠΌΠ΅ΡΠΊΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
.bg-primary |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠΈΡΠΌΠ΅Π½Π½ΡΠΉ ΡΠ²Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π°; ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈΠ»ΠΈ Π±Π°Π½Π½Π΅ΡΠΎΠ². |
.bg-success |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π·Π΅Π»ΡΠ½ΡΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΏΠ΅ΡΠ½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΠΏΠ΅ΡΠ°ΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π°Β»). |
.bg-info |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΊΡΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. |
.bg-warning |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡΠΌ. |
.bg-danger |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ»ΠΈ ΠΎΠΏΠ°ΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅). |
Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠΎΠ½Π° Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΈΠ·-Π·Π° ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ±ΡΡΠ½ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² <div> Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ.
ΠΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π£ΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ ΡΠ΅ΠΌ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΡΠΊΡΡΡ (Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°), Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ !important, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΠΏΡΠ°Π²ΠΈΠ» ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ:
.show |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊ, ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, .hidden).
Π£Π΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΊΡΡΡΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ. |
.hidden |
Π‘ΠΊΡΡΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΌΠ°ΠΊΠ΅ΡΠ° (display: none), ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΡΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΠΎΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°.
ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΎΡΠΌ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΡΡΡΡ ΠΎΠΏΡΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Ρ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π΄ΠΎ Π΅Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ. |
.invisible |
ΠΠ΅Π»Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ (visibility: hidden), Π½ΠΎ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΡΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ ΡΠΊΡΡΡΠΈΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΡΠ°ΡΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΡΡΡΠΊΡΡΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π΅ ΡΠΌΠ΅ΡΠ°Π»Π°ΡΡ. |
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .hidden, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΌΠ°ΠΊΠ΅ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ). ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .invisible, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠΊΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°).
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°ΠΊΡΡΡΠΈΡ ΠΈ ΠΊΠ°ΡΠ΅ΡΠΊΠΈ. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°ΠΊΡΡΡΠΈΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΠΌΠ΅Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ:
.close |
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ (ΠΎΠ±ΡΡΠ½ΠΎ <button> ΠΈΠ»ΠΈ <a>) Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΠ±ΡΡΡΠΊΠΎΠΉ ΠΈ ΠΊΡΡΠΏΠ½ΡΠΌ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠΌ Β«ΓΒ». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π·Π°ΠΊΡΡΡΠΈΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ
ΠΎΠΊΠΎΠ½ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ΄Π°Π»ΡΠ΅ΠΌΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
ΠΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π°ΡΡΠΈΠ±ΡΡ |
.caret |
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΡΡΡΠ΅Π»ΠΊΡ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΡ Π²Π½ΠΈΠ·; ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ
ΡΠΏΠΈΡΠΊΠΎΠ². Π ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ
Β«dropupΒ» Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π²Π΅ΡΡ
.
ΠΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π½Π° Π½Π°Π»ΠΈΡΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ±ΠΎΡ ΠΊΠ°Π½Π°Π»Π° ΡΠ²ΡΠ·ΠΈ) Π±Π΅Π· ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ. |
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ: 13.06.2025
ΠΈΠ»ΠΈ