- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² Bootstrap 3
- ΠΠ½ΠΎΠΏΠΊΠΈ. HTML, XHTML ΠΈ CSS Π½Π° 100%
- Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅
- ΠΠ½ΠΎΠΏΠΊΠΈ
- ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ QIP
- ΠΠ΅Π½Ρ ΠΠ½ΠΎΠΏΠΊΠΈ Β«OfficeΒ»
- 1.4. ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SCHEMATICS
- ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ
- 12.2.3. ΠΠ½ΠΎΠΏΠΊΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΎΠΏΡΠΈΠΈ
- ΠΠΠΠΠΠ: ΠΠ΅ΡΠ΅Π»ΡΠ΅ ΡΡΠ°ΠΊΡΠ°Π»Ρ
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΠ²ΡΠΎΡΡΠΌΠΌΠ°
- ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
- Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅
- ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΎΡΠΌ ΠΈ ΠΏΡΠΎΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
- 1.
- 2.Β ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
- 3. jQuery ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
- 4. ΠΠΎΡΡΡΡΠ°ΡΡΠ΅Π΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Β«ΡΠ΅ΠΊΠ±ΠΎΠΊΠΎΡΠΎΠ²Β» Π½Π° ΡΠ°ΠΉΡΠ΅
- 5.Β ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
- 6. ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ jQuery
- 7. Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ HTML ΡΠΎΡΠΌ Β«Ideal FormsΒ»
- 8. jQuery ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ
- 9. Checkbox
- 10. CSS3 ΠΈ jQuery ΠΊΠ½ΠΎΠΏΠΊΠΈ
- 11. ΠΡΡΠ΅ΠΊΡΠ½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
- 12. Cusor Hover Buttons
- 13. Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
- 14. ΠΠ»Π°Π³ΠΈΠ½ Β«jqTransformΒ»
- 15.
- 16. Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈΒ Β«jQuery CheckboxΒ»
- 17. ΠΠ»Π°Π³ΠΈΠ½Β Β«ezMarkΒ»
- 18.Β Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
- 19. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3 ΠΈ jQuery
- 20. ΠΡΡΠ΅ΠΊΡΠ½ΡΠΉ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π΄Π°ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ jQuery
- 21.Β Mootools ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π΄Π°ΡΡ, ΠΏΠ»Π°Π³ΠΈΠ½Β Β«DatePickerΒ»
- 2017. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π½Π° frontend. Π§Π°ΡΡΡ β1.
- ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
- ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ css Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ
- Flat ΠΊΠ½ΠΎΠΏΠΊΠΈ
- ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² Π½Π° CSS3
- ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΡΡΠΈΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ CSS3
- ΠΡΠ΅Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ CSS3 Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
- CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π±Π»ΠΈΠΊΠΎΠΌ
- CSS3 ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
- ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠΊΡΠΏΠΊΠΈ Π½Π° CSS3
- ΠΠ½ΠΎΠΏΠΊΠΈ Ρ CSS3 ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
- ΠΠ½ΠΎΠΏΠΊΠ° Π‘ΠΊΠ°ΡΠ°ΡΡ Π½Π° CSS3
- ΠΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ
- ΠΠ½ΠΎΠΏΠΊΠΈ Π² Bootstrap Β« ΠΠ°ΡΠΊ ΠΈ ΠΠ°ΡΡΠ°.Π Ρ. ΠΠ°ΠΏΠΈΡΠΊΠΈ ΠΎΡΡΠ°-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°
- ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ΅Π³Π° HTML 4.0
- ΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΡΠΈΠ»Ρ CSS
- ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- 11+ Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ CSS
- Π‘ΡΠΈΠ»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ
- ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΎ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ Β»
- Π‘ΡΠΈΠ»Ρ ch5-button
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² Bootstrap 3
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ 28 ΡΠ΅Π½ΡΡΠ±ΡΡ 2021 ΠΠ²ΡΠΎΡ: ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ²Π°Π½Π΅ΡΠΊΡ- Π‘ΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°
- ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π² ΠΡΡΡΡΡΠ°ΠΏ 3 (hidden ΠΈ visible)
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ
- ΠΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ°ΠΉΠ»Π΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ
- ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Bootstrap
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru. ΠΡΠΎ ΡΠΆΠ΅ ΡΠ΅ΡΠ²Π΅ΡΡΠ°Ρ ΡΡΠ°ΡΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ±ΡΠΈΠΊΠ΅:
- Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΡ ΠΈΠ·ΡΡΠΈΠ»ΠΈ Π²ΠΎΠΏΡΠΎΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° ΠΡΡΡΡΡΠ°ΠΌ ΠΊ Html ΡΡΡΠ°Π½ΠΈΡΠΊΠ°ΠΌ (Π²Π΅Π±-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌ).
- ΠΠΎ Π²ΡΠΎΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΡ ΠΈ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ Π² Bootstrap 3 (ΠΎΠ½Π° ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Π²Π΅ΡΡΠΈΠΉ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°).
- ΠΡ, Π° Π² ΡΡΠ΅ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ·Π½Π°Π»ΠΈ ΠΏΡΠΎ ΡΡΠ΄ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π½Π° ΠΡΡΡΡΡΠ°ΠΏ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ Π²Π°ΠΌ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΆΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΏΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΠΡΡΡΡΡΠ°ΠΏΠ° ΠΈ ΠΏΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. Π’Π°ΠΊΠΆΠ΅ ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ. ΠΡ ΠΈ Π² ΡΠ°ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π² Bootstrap 3 ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ (ΠΌΠ΅Π½ΡΡΡΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°) ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊ Π½ΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
Π‘ΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π² Bootstrap
Π‘ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ ΠΡΡΡΡΡΠ°ΠΏ 3 Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅ ΠΈΠ΄Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
Π²Ρ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΡΠΎΡΡΠ΅ΡΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ. ΠΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠ·ΡΠ΅ΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ CSS. ΠΠ° ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΉΡΡ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΡΠΈΠ»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΏΡΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΠ΄Π°, ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠΈ Π³Π»ΠΈΡ-ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ±ΠΎ Π²ΡΠ΅ΠΌ ΡΡΠΎΠΌ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈΒ β ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°. ΠΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄Π°Π½Π½ΡΡ Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Ρ ΡΠ΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡ h2 Π΄ΠΎ H6, Π΅ΡΠ΅ ΡΠ·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π΅Π½ 14 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ, Π° Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊ Π±ΡΠ΄Π΅Ρ Π±ΡΠ°ΡΡΡΡ ΡΠ°Π²Π½ΠΎΠΉ 20 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ. ΠΡ, Π° ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³Π° Π°Π±Π·Π°ΡΠ° Β«PΒ» Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΎΡΡΡΡΠΏ Π²ΡΡΠΎΡΠΎΠΉ Π² ΠΏΠΎΠ»ΡΡΡΠΎΠΊΠΈ.
Π§ΡΠΎΠ±Ρ ΡΠ΅Π³ΠΎ-ΡΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ»Π°ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ Π² ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ°ΡΡΠΈ Π½Π°Π±ΠΈΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌΠΈ ΠΈ Π²ΠΎΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ ΠΈΡ
Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌΠΈ. Π ΠΡΡΡΡΡΠ°ΠΏΠ΅ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π² ΡΠ΅Π³ Β«PΒ» Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ LEADΒ β class="lead"
.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π² ΡΠ΅Π³ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π΄Π°Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ:
<p>
ΠΡΠΎΡ ΡΠΊΡΠΈΠ½ΡΠΎΡ ΠΈ Π²ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Ρ Π±ΡΠ΄Ρ ΡΠ½ΠΈΠΌΠ°ΡΡ Ρ ΡΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π½Π°ΠΌΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΡΡΠ°ΡΡΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠ° Π½Π΅ΠΊΠΎΠΉ Π²Π΅Π±ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΏΠ»Π°Π½Π΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΡΡΡΡΡΠ°ΠΏ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ·ΡΠΊ Html, ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²Π΅ΡΠΈ:
ΠΠΎΠ΄ ΡΡΠΎΠ³ΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° Π² Html ΡΠ°ΠΉΠ»ΠΈΠΊΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΌ ΠΊ Bootstrap 3 ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
<ol> <li><code>ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² ΡΠ΅ΠΊΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² <code><code></code></code></li> <li><mark>ΠΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³Π°ΠΌΠΈ <code><mark></code></mark></li> <li> <s>ΠΠ΅ΡΠ΅ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΠ΅Π³Π°ΠΌΠΈ <code><del></code> Π»ΠΈΠ±ΠΎ <code><s></code> </s></li> <li> <u>ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΠ΅Π³Π°ΠΌΠΈ <code><ins></code> Π»ΠΈΠ±ΠΎ <code><u></code> </u></li> <li><small>Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΅Π³ΠΎ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π³Π°ΠΌΠΈ <code><small></code></small> </li> <li>ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ <strong>ΠΆΠΈΡΠ½ΡΠΌ</strong> ΠΈ <em>ΠΊΡΡΡΠΈΠ²ΠΎΠΌ</em> Ρ ΠΏΠΎΠΌΠΎΡΡΡ <code><strong></code> ΠΈ <code><em></code></li> <li>ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ - Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° <code>text-right</code></li> <li>ΠΠ»ΠΈ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ - Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° <code>text-center</code></li> <li><blockquote>ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΈΡΠ°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² <code><blockquote></code></blockquote></li> <li><blockquote>Π Π΅Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠΈΡΠ°ΡΠ°Ρ - Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² ΡΠ΅Π³ <code><blockquote></code> ΠΊΠ»Π°ΡΡΠ° <code><code>blockquote-reverse</code></code></blockquote></li> </ol>
ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«TypographyΒ»
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΡΠ°ΠΉΠ»Π΅ sait-4. html ΡΠΆΠ΅ Π½Π°ΡΡΡΠΎΠ΅Π½Ρ ΡΠ΅ΡΠΎΡΠ½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π½ΡΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΠΌΠ°Π»ΡΡ
ΡΠΊΡΠ°Π½Π°Ρ
Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΠΊΠ°ΠΆΡΡΡΡ Π»ΠΈΡΠ½ΠΈΠΌΠΈ (ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅). Π§ΡΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ?
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ sait-4.html Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠ΅ (Π½Π°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΡΡΡΠΎΠΊΠΈ Π² Bootstrap ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ
Π² Π½ΠΈΡ
ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ class="row"
) Ρ Π½Π°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏ. Π’Π°ΠΊ Π²ΠΎΡ, ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° ΠΌΡ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ² ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎΡ ΡΠ°ΠΌΡΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π° ΡΠΆΠ΅ ΠΏΠΎΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π±ΡΠ»ΠΎ Π±Ρ ΡΠΌΠ΅ΡΡΠ½ΡΠΌ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π½Π° ΠΌΠ°Π»ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΡΠ±ΡΠ°ΡΡ (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°), ΠΈΠ±ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠΌΡΡΠ»ΠΎΠ²ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΠ½ Π½Π΅ Π½Π΅ΡΠ΅Ρ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π΅Π·ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠ°, Π·Π°ΡΠ΅Π΄ΡΠ΅Π³ΠΎ Π½Π° Π½Π΅Π³ΠΎ Ρ Π³Π°Π΄ΠΆΠ΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅. Π§ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ hidden ΠΈ visible.
ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡΠ°Π·Ρ ΠΎΠ³ΠΎΠ²ΠΎΡΡΡΡ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠΎΠ΅ΠΌ Π΄Π°Π½Π½ΡΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π½ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΠ½ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π±ΡΠ΄Π΅Ρ (ΠΏΡΠΎΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡ), ΠΈ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΡΠ΅. ΠΠ»Ρ ΡΠ°Π΄ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΠΆΠ°Π²Π°-ΡΠΊΡΠΈΠΏΡΠ°, Π½ΠΎ ΠΌΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΈΠ·ΡΡΠ°Π΅ΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΡΡΡΡΡΠ°ΠΏΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ.
ΠΡΠ°ΠΊ, Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ «Responsive utilities» ΠΈΠ· Π»Π΅Π²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΏΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«CSSΒ» ΠΈΠ· ΠΌΠ΅Π½Ρ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ. Π’Π°ΠΌ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΡΠΊΡΠ°Π½ΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΠΉΡΠ°:
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½Π°Ρ ΡΠ΅ΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΡΠΊΡΠ°Π½Π°. Π Π½ΠΈΡ
ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΡΠΊΠΈ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ (Π½Π°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΠ΅Β β ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ xs, ΠΌΠ°Π»Π°Ρ sm, ΡΡΠ΅Π΄Π½ΡΡ md ΠΈ Π±ΠΎΠ»ΡΡΠ°Ρ lg).
ΠΠ»Π°ΡΡ hidden ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΡ Π·Π°Π΄Π°ΡΡΒ β ΡΠΏΡΡΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Π»ΠΎΠ³ΠΎΡΠΈΠΏ) ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° (ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°) Π½ΠΈΠΆΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅. Π’.Π΅. Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ hidden-xs ΠΈΡΡ
ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠ°ΠΉΡΠΈ Π² ΠΊΠΎΠ΄Π΅ ΡΠ°ΠΉΠ»Π° sait-4.html ΡΡΡΠΎΠΊΡ, Π³Π΄Π΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΠΈ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ΅Π³ IMG ΠΊΠ»Π°ΡΡ class="hidden-xs"
:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π° Π½ΠΈΠ·ΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠΏΠ°Π΄Π°ΡΡ, Π° Π½Π΅ ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°ΠΉΡΠ°.
Π§ΡΠΎ ΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ. ΠΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΠΌ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΡΠ°ΠΌΠΈΠΌ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² btn Π² ΠΡΡΡΡΡΠ°ΠΏ 3
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° Π²ΡΠ΅Ρ
ΡΠ°ΠΉΡΠ°Ρ
, ΡΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ. Bootstrap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ· Π»ΡΠ±ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ, ΠΈΠΌΠ΅ΡΡΠ΅ΠΉΡΡ Ρ Π²Π°Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π»ΠΈΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, Π΄Π°Π²Π½ΡΠΌ-Π΄Π°Π²Π½ΠΎ Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π» ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΠ΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ° ΠΆΠ΅ ΡΠ°ΠΌΠ°Ρ Π»ΠΎΠ³ΠΈΠΊΠ°.
ΠΠ° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΠΏΠΈΡΠ°Π½Ρ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «Buttons«. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΡΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ ΠΎΡΡΠ°Π½ΠΎΠ²Π»ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ· Π½ΠΈΡ , ΡΡΠΎΠ±Ρ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
Π Π½Π°ΡΠ΅ΠΌ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠ°Π΄Π°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ (ΡΠ°ΠΉΠ»ΠΈΠΊ sait-4.html, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΡΡΡΡ Π²ΡΡΠ΅) Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊ ΠΈ Π½Π°ΠΏΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Π― Π³ΠΎΠ²ΠΎΡΡ ΠΏΡΠΎ ΡΡΡΠ»ΠΊΠΈ Β«Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»Π΅Π΅Β», ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π½ΠΈΠ·Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π½ΠΎΠ½ΡΠ°.
ΠΠΎΠΎΠ±ΡΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Html ΠΊΠΎΠ΄Π°: button ΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠΉ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ Ρ ΡΠ΅Π³ΠΎΠΌ A. ΠΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΠΌ Π»ΠΈΡΡ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ΅Π³ A ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ. Π‘Π½Π°ΡΠ°Π»Π° Π² ΡΡΠΎΠΌ ΠΊΠ»Π°ΡΡΠ΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ»Π°ΡΡ btn (ΡΡΠΎ ΡΠ°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π½Π΅ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΡΡΡΠ»ΠΊΠ΅), Π° ΡΠΆΠ΅ ΠΏΠΎΡΠΎΠΌ Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², Π·Π°Π΄Π°ΡΡΠΈΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π΅Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΠΈΠ»ΠΈ ΠΈΡ
Π°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ). ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ Β«Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»Π΅Π΅Β» ΠΊΠ»Π°ΡΡ Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΡΠΌΠΎΠ»ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉΒ β class="btn btn-default"
):
<a target="_blank" href="Π£ΡΠ»">Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»Π΅Π΅</a>
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°ΡΠ° ΡΡΡΠ»ΠΊΠ° Ρ ΡΡΠΏΠ΅Ρ ΠΎΠΌ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡ Π² ΠΊΠ½ΠΎΠΏΠΊΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ Π² ΠΡΡΡΡΡΠ°ΠΏ ΡΡΠΈΠ»ΡΠΌ:
ΠΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Bootstrap Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·ΡΡΡ ΠΈΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:
Π‘ΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ ΡΠ΅Π°Π³ΠΈΡΡΡΡ Π½Π° ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊ Π½ΠΈΠΌ ΠΊΡΡΡΠΎΡΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ½Π°, ΡΡΠΎ ΠΎΠΏΡΡΡ ΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΡΠΎΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ (ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π°Π΄Π°ΡΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ). ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΡΠΎΡΠ°Π΅ΡΡΡ Π² Π³Π»Π°Π·Π°, ΠΏΠΎΡΡΠΎΠΌΡ Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π°ΠΊΡΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, ΡΠΎ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, danger ΠΈΠ»ΠΈ warning). ΠΡ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΡΠΎΡΡΡΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ° btn-lg:
<a target="_blank" href="Π£ΡΠ»">Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»Π΅Π΅</a>
ΠΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ. ΠΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ, Π² Bootstrap ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ΅Π· ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠ΅Π΄Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ, Π° ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ btn-lg, btn-sm ΠΈ btn-xs ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΡΡ, ΠΌΠ°Π»ΡΡ ΠΈ ΡΠ²Π΅ΡΡ
ΠΌΠ°Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, Π²ΡΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈΠ· Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ°:
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π² ΠΡΡΡΡΡΠ°ΠΏΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ°Π²Π½ΡΠΌ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½Π° Π·Π°ΠΊΠ»ΡΡΠ΅Π½Π°. ΠΠ°Π½Π½Π°Ρ ΠΎΠΏΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½Π° ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΡΠ΅ΠΊ Π² ΡΠΈΡΠΈΠ½Ρ Π²ΡΠ΅ΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠ»Π°ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ»Π°ΡΡ btn-block:
<a target="_blank" href="Π£ΡΠ»">Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»Π΅Π΅</a>
ΠΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΉΠ»Π° Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ?
ΠΡΡΠ³ΠΎΠΉ Π²ΠΎΠΏΡΠΎΡΒ β Π° ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ
ΡΠ²Π΅ΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ ΠΏΠΎΠ΄ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ Π²Π°ΠΌΠΈ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°? ΠΡΡ
ΠΎΠ΄ Π΅ΡΡΡ, ΠΈ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΠ½ Π² ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠΈΡ
Π²Π°ΠΌ CSS ΠΏΡΠ°Π²ΠΈΠ», Π½ΠΎ Π½Π΅ Π² ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Bootstrap 3 (ΡΡΠΎΠ±Ρ Π½Π΅ ΠΏΠΎΡΠ΅ΡΡΡΡ Π²Π½Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°), Π° Π² ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΊ Π²Π΅Π±ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ»ΠΈΠΊ css Ρ Π½Π°ΡΠΈΠΌΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ (ΡΠΈΡΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΠ°ΡΡΠ΅, ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π² ΡΠ°ΠΌΠΎΠΌ Π²Π΅ΡΡ
Ρ ΡΡΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ).
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΡΠ°ΠΉΠ» manual.css ΠΎΡΡΠ°Π²Π°Π»ΡΡ Ρ Π½Π°Ρ ΠΏΡΡΡΡΠΌ, Π²ΠΎΡ ΠΈ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π΅Π³ΠΎ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π° Π±Π»Π°Π³ΠΎ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ. ΠΡΠ°ΠΊ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅? Π ΠΏΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠ°Π»ΠΈ? ΠΠ°ΠΊ ΠΈ ΡΡΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΡΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ? ΠΡΠ»ΠΈ Π½Π΅Ρ, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π΅ΡΡΡΠΎΠΊ ΠΌΠΎΠΈΡ ΡΡΠΎΠΊΠΎΠ² (Π½Π°Π΄Π΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ) ΠΏΠΎ Π½Π΅Π»Π΅Π³ΠΊΠΎΠΌΡ Π΄Π΅Π»Ρ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ Π² ΠΏΡΡΠΈΠ½Ρ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΒ β Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ CSS
ΠΡΠ°ΠΊ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΡΡΡΡΡΠ°ΠΏΠ°, Π² Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²Π΅Ρ. ΠΡΠΈΡΠ΅ΠΌ, Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π΅ΡΠ΅ ΠΈ ΡΠ²Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΈ ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅ΠΉ ΠΊΡΡΡΠΎΡΠ°, Π½ΠΎ ΡΡΠΎ ΡΠΆΠ΅ Π²ΡΠΎΡΠ°Ρ Π·Π°Π΄Π°ΡΠ°. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΠ³Π»ΡΠΌΠΈΡΡΡΡ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΠ΅ΠΌ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅. ΠΠΏΠΎΠ»Π½Π΅ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΡ
Π²ΡΠ΅ Π² ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡ
Π΅ΠΌΠ΅, ΡΠΎΠ·Π²ΡΡΠ½ΠΎΠΉ ΡΠ°ΠΉΡΡ (Π½Π΅ Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ).
ΠΠ°ΠΊ ΡΠ΅ΠΉΡΠ°Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ²Π΅Ρ? Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² ΡΠ΅Π³Π°Ρ ΡΡΡΠ»ΠΎΠΊ A ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap 3. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π·Π°ΠΏΠΈΡΠΈ Β«btn btn-primary btn-blockΒ» Π·Π° ΡΠ²Π΅Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ btn-primary. ΠΠ°ΠΊ ΠΌΡ ΡΠΆΠ΅ ΠΎΠ±Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅, Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΡ ΠΌΠ΅Π½ΡΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² Π½Π°Ρ ΡΠ°ΠΉΠ»ΠΈΠΊ manual.css. ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
.btn-primary { background-color: #cdae51; border-color: #3F2B22; color: #000000; }
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ (background-color), ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π΅ (border-color) ΠΈ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° (color). Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΎΠ½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ Π²ΠΈΠ΄:
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ manual.css Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»ΠΈΠΊΠ΅ sait-4.htmlΒ β ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΡΡΡΡΡΠ°ΠΏΠ°. Π’.Π΅. ΡΡΠΎΡΡΡ Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠ΄Π΅:
ΠΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ? ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ ΡΠ΅ΠΉΡΠ°Ρ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΡΠ±Π»ΠΈΡΡΠ΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ°ΠΊ ΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΡΡΠΏΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠ°? ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠ²Π°ΡΡΡΡ ΡΠ΅ΠΉΡΠΈΠ½Π³ΠΎΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠ². Π§ΠΈΡΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΡΠ°ΡΡΠ΅ Β«ΠΡΠΈΠΎΡΠΈΡΠ΅ΡΡ Css ΡΠ²ΠΎΠΉΡΡΠ² (Ρ important ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ)Β». ΠΡ Π²ΠΎΡ, Π° ΠΏΡΠΈ ΡΠ°Π²Π΅Π½ΡΡΠ²Π΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠΎΡΡΠ΅Π΅ Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠ΄Π΅ (ΡΠΎ Π±ΠΈΡΡ Π² ΡΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ). Π₯ΠΎΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ² Π² ΡΠ°ΠΉΠ»Π΅ manual.css Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊ Π½ΠΈΠΌ !important:
.btn-primary { background-color: #cdae51 !important; border-color: #3F2B22 !important; color: #000000 !important; }
ΠΠΎ ΡΡΠΎ ΡΠ°ΠΊ, Π½Π° Π²ΡΡΠΊΠΈΠΉ ΡΠ»ΡΡΠ°ΠΉ Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°Π»Β β Π²Π΄ΡΡΠ³ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ. ΠΡΠ΄Π΅ΠΌ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ°, ΠΊΡΡΠ°ΡΠΈ, Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½ΡΠ°Π½Ρ. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ ΡΠ½ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ (ΠΌΠ°Π»ΠΎΠ²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅), ΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ CSS ΠΏΡΠ°Π²ΠΈΠ»Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ .btn-primary Π½Π° ΠΏΡΠΎΡΡΠΎ .btn. ΠΡ ΡΠΆΠ΅ Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ Π²Π΅Π·Π΄Π΅ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ btn, ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ°ΠΊ Π±Ρ ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ.
ΠΠ°Π΄Π½ΠΎ, Π½Π°ΠΌ Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΊΡ ΠΏΠΎΡΠ΅ΡΠ°ΡΡ Π½Π°Π΄ΠΎ. ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½Π° ΠΎΠΊΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅ΠΉ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ? ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΠ°ΠΌ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ± ΡΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΏΡΠΎΡΠΈΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΈΠ±ΠΎ ΠΎΠ½ ΡΠΎ ΡΠΆ Π»ΡΡΡΠ΅ Π²ΡΠ΅Ρ Π·Π½Π°Π΅Ρ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊΠΈΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ.
ΠΡΠ°Π²Π΄Π°, Π²ΠΎΡ ΡΠ°ΠΊ Π·Π° Π·Π΄ΠΎΡΠΎΠ²ΠΎ ΠΆΠΈΠ²Π΅ΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π²Π°ΠΌ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅Ρ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠΏΡΡΠ°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π€Π°ΠΉΠ΅ΡΠ±Π°Π³Π° (ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π² Π»ΡΠ±ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΈΠ· ΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ Π²ΡΠ±ΠΎΡΠΎΠΌ ΠΏΡΠ½ΠΊΡΠ° Β«ΠΡΠΎΡΠΌΠΎΡΡ ΠΊΠΎΠ΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β» ΠΈΠ»ΠΈ Π΅ΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ), ΡΠΎ ΠΎΠ½ Π²ΡΠ»ΠΎΠΆΠΈΡ Π²ΡΠ΅ ΠΊΠ°ΠΊ ΠΌΠΈΠ»Π΅Π½ΡΠΊΠΈΠΉ. ΠΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΏΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π° ΠΌΡ ΠΊΠΎΠ½ΡΡΠ°ΡΠΈΡΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ Bootstrap Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²ΠΎΡ ΡΠ±ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°:
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΌΡ ΡΠΎΠΆΠ΅ Π½Π΅ Π±ΡΠ΄Ρ Π΄ΡΡΠ°ΠΊΠ°ΠΌΠΈ Π΅Π³ΠΎ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΡΠ΅Π±Π΅ Π² ΡΠ°ΠΉΠ»ΠΈΠΊ manual.css, Π° ΠΊ Π½Π΅ΠΌΡ ΠΈ Π½ΡΠΆΠ½ΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ, Π·Π°Π΄Π°ΡΡΠΈΠ΅ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΡΠΎΠ½Π° ΠΈ ΡΠ°ΠΌΠΊΠΈ:
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #3F2B22; border-color: #333; }
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°ΡΠ΄ΠΈΠ½Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ Π²ΠΈΠ΄:
ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΈΠ· ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½ΠΈΠΊΡΠ΄ΡΡΠ½ΡΠΉ, Π½ΠΎ Π²Ρ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΡΠ΄Π° Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ CSS ΠΏΡΠ°Π²ΠΈΠ» Π² manual.css, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΠΎ ΠΈ ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΈ ΡΠ²Π΅ΡΠ° Π³Π»ΠΈΡ-ΠΈΠΊΠΎΠ½ΠΎΠΊ (ΠΎ Π½ΠΈΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅. ΠΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΊΠ° ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ. ΠΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ, ΡΠ»Π°Π³ Π²Π°ΠΌ Π² ΡΡΠΊΠΈ, Π° Π±Π°ΡΠ°Π±Π°Π½ Π½Π° ΡΠ΅Ρ.
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Bootstrap
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠ°ΠΌ ΠΡΡΡΡΡΠ°ΠΏ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ (Π² ΡΠΌΡΡΠ»Π΅, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°), ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΌΠ΅ΡΡΠΎ Π±ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ. Π’.Π΅. ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΏΠΎΠΏΡΠ°Π²ΠΈΠΌΠΎΠ΅.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π½Π°ΡΠΈΡ ΡΠ°Π½Π΅Π΅ ΡΠ°Π·ΠΎΠ±ΡΠ°Π½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² (ΡΠ°ΠΉΠ» sait5.htmlΒ β ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΡΠ½ΠΊΡ Β«Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ ΠΊΠ°ΠΊ…Β», ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π²Π°ΡΡ ΠΏΠ°ΠΏΠΊΡ Ρ ΠΡΡΡΡΡΠ°ΠΏΠΎΠΌ) ΠΊΠ°ΠΊ ΡΠ°Π· Π½Π°Π±Π»ΡΠ΄Π°Π»ΡΡ Π½Π°Π΅Π·Π΄ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈΠ· ΡΠΎΡΠ΅Π΄Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ±ΡΠ΅Π·Π°Π»Π°ΡΡ:
Π Bootstrap 3, Π΄Π»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ, ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Ρ Π² ΡΠ΅Π³ΠΈ IMG ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡΒ β img-responsive. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
<img src="img/virtuemart-2-300x180.jpg" alt="">
ΠΡ ΠΈ Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠΆΠ΅ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΠΎ, ΠΈΠ±ΠΎ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ (Π½Π΅ Π½Π°Π΅Π·ΠΆΠ°Ρ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°):
Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ°Π½Π½ΠΎ, ΡΡΠΎ ΡΡΠ° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π΅ Π²ΡΡΡΠΎΠ΅Π½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π° Π΄Π»Ρ Π΅Π΅ ΠΎΡΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ. ΠΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π²ΠΈΠ΄Π½Π΅Π΅. ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS Π·Π°ΠΊΡΠΎΠΌΠ°Ρ
ΠΡΡΡΡΡΠ°ΠΏΠ° ΠΈΠΌΠ΅Π΅ΡΡΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈΡ
ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ²:
- ΠΠΎΠΆΠ½ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈΠ· ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ
Π΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΠΌΠΈ. ΠΠ΅ ΡΠΊΡΡΠ³Π»ΡΡΡ ΡΠ³Π»Ρ (ΠΎΠ± ΡΡΠΎΠΌ ΡΡΡΡ Π½ΠΈΠΆΠ΅), Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠΊΡΡΠ³Π»ΡΡΡ (ΠΈΠ· ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΊΡΡΠ³, Π° ΠΈΠ· ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°Β β ΠΎΠ²Π°Π»). ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π±ΡΠ»ΠΎ Π±Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΡΡΡΠ΅Ρ Π°Π²ΡΠΎΡΠ° ΡΡΠ°ΡΡΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ img-circle. ΠΠΎΠΆΠ½ΠΎ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΡΠΌΠΎ Π² ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ Ρ img-responsive (Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ). ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π±Π΅Π·ΠΎΠ±ΡΠ°Π·ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
<img src="img/google-analytics-300x180.jpg" alt="">
- ΠΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅. ΠΠ°ΡΠΎ Π²ΠΎΡ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΈΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° ΠΈΠ· Π°ΡΡΠ΅Π½Π°Π»Π° Bootstrap 3 ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ img-rounded.
Π‘ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π½Π΅ ΡΠΈΠ»ΡΠ½ΠΎ-ΡΠ°ΠΊΠΈ ΠΈ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌ, Π½ΠΎ ΡΠ°Π΄ΡΡΡΠΈΠΌ Π³Π»Π°Π·:
- ΠΡ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ
Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠΌΠ΅ΡΡΠ½ΡΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΌΠΊΡ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
, ΡΠΎΠ½ ΠΊΠΎΡΠΎΡΡΡ
ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΡΠΎΠ½ΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ img-thumbnail.
<img src="img/virtuemart-2-300x180.jpg" alt="">
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΡΡΠΈ ΠΊΠ»Π°ΡΡΠ° ΡΠ΅ΡΠ°ΡΡ Π²Π°ΠΌ ΡΠ°ΠΌΠΈΠΌ, Π° Π²ΠΎΡ Π΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ img-responsive) Ρ Π±Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π²Π΅ΡΠΊΠΈΡ ΠΏΡΠΈΡΠΈΠ½ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π΄Π΅Π»Π°ΡΡ.
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π·Π° Π³Π»ΠΈΡ-ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π² Π²ΠΈΠ΄Π΅ Π³Π°Π»Π΅ΡΠ΅ΠΉ (ΠΏΡΠ΅Π²ΡΡΡΠ΅ΠΊ), ΠΏΡΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ, ΠΏΡΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, Π½Ρ ΠΈ Π΅ΡΠ΅ ΠΏΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ Π²Π°ΡΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ ΡΠΈΠ».
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ >>> (Π’ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΏΠΎΡΡΠΎΠ²ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ Ρ Π°Π½ΠΎΠ½ΡΠ°ΠΌΠΈ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΠ΅ΠΉ)
Π£Π΄Π°ΡΠΈ Π²Π°ΠΌ! ΠΠΎ ΡΠΊΠΎΡΡΡ
Π²ΡΡΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
Π±Π»ΠΎΠ³Π° KtoNaNovenkogo. ru
ΠΠ½ΠΎΠΏΠΊΠΈ. HTML, XHTML ΠΈ CSS Π½Π° 100%
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠΎΡΠΌΡ Π±Π΅Π· ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ: Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ, ΠΎΡΠΈΡΡΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΡ. Π ΠΎΠ±ΡΠ΅ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΡΠΎΡΠΌΠΎΠΉ.Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΠ°Π΄ Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΠΏΡΠΎΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΡΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠΊΠ°ΠΌ.ΠΡΠ° ΠΏΠ°Π½Π΅Π»Ρ, Π½Π°ΡΡΠ΄Ρ Ρ Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ β Π½Π°Ρ Π³Π»Π°Π²Π½ΡΠΉ Β«ΠΏΡΠ»ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΒ». ΠΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π΄Π΅ΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ, Π²ΡΠ΅ β
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ QIP
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ QIP
ΠΡ Π° ΡΠ΅ΠΏΠ΅ΡΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΠΎΠ»ΡΡΡΡ Π΅Π³ΠΎ ΡΠ°ΡΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ°ΠΊΡ-Π»ΠΈΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ ΠΏΠΎΡΠ²ΡΡΡΡ ΠΈΠΌΠ΅Π½Π° Π²Π°ΡΠΈΡ
Π΄ΡΡΠ·Π΅ΠΉ ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡΡ
β¦ ΠΠΎ ΠΎΠ± ΡΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅.ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ Β«Π½Π΅Π±ΠΎΡΠΊΡΠ΅Π±Π°Β» ΠΎΠΊΠΊΡΠΏΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠΆΠ΅
ΠΠ΅Π½Ρ ΠΠ½ΠΎΠΏΠΊΠΈ Β«OfficeΒ»
ΠΠ΅Π½Ρ ΠΠ½ΠΎΠΏΠΊΠΈ Β«OfficeΒ» Π ΡΠ°ΠΌΠΎΠΌ Π½Π°ΡΠ°Π»Π΅ ΡΡΠΎΠΊΠ° Ρ ΡΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠ°Π»Π° Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Word Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ Microsoft Office. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΠΆΠΌΠ΅ΠΌ Π΅Π΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Π·Π° ΠΌΠ΅Π½Ρ ΠΎΠ½Π° ΡΠΊΡΡΠ²Π°Π΅Ρ (ΡΠΈΡ.Β 1.123). Π ΠΈΡ.Β 1.123. ΠΠ΅Π½Ρ ΠΠ½ΠΎΠΏΠΊΠΈ
1.4. ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SCHEMATICS
1.4. ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SCHEMATICS Π ΠΈΡ. 1.20. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SCHEMATICSΠ ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΅ΡΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ SCHEMATICS. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ°Ρ Π΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΌΠ΅Π½Ρ (ΡΠΈΡ. 1.20). Π ΡΠ°Π±Π». 1.1 ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΡΡΡΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠΈΡ
ΠΊΠΎΠΌΠ°Π½Π΄. Π
ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ
ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΠ°ΠΊΠΎΠ΅ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ Π²ΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΡΡΡΠ²Π°Π΅ΡΡ, ΡΠ΅Π»ΠΊΠ°Ρ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΉ ΠΎΡΠ²Π΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°! ΠΠ΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠ΅ Π²ΠΎΠ»Π½Π΅Π½ΠΈΡ, Π½ΠΎ ΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΡ ΠΏΡΠ΅Π»Π΅ΡΡΡ. Π Π΅ΡΠ»ΠΈ
12.2.3. ΠΠ½ΠΎΠΏΠΊΠΈ
12.2.3. ΠΠ½ΠΎΠΏΠΊΠΈ ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ruby/GTK2 ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΠΊΠ»Π°ΡΡ Gtk::Button. Π ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ clicked, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅.ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π² Π»ΠΈΡΡΠΈΠ½Π³Π΅ 12.5 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π²Π΅ΡΡΠΈ ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΈ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ All
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π£ ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π²ΠΎΠ΄Π°.Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, Π½Π° ΠΊΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π°ΠΆΠ°Π» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ OnKeyDown. ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ done: Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ.reload file: ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°ΠΉΠ» Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°ΠΌΠΈ.cancel: ΠΎΡΠΌΠ΅Π½ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ.default: Π½Π°Π·Π½Π°ΡΠΈΡΡΒ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΎΠΏΡΠΈΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΎΠΏΡΠΈΠΈ browse: Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.alignment: Π²ΡΠ±ΠΎΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅ΠΌΡ ΡΠ΅ΠΊΡΡΡ.border: ΡΠΎΠ»ΡΠΈΠ½Π° (Π² ΠΏΠΈΠΊΡΠ΅Π»Π°Ρ ) ΡΠ΅ΠΌΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.hspace/vspace: Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ/Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΄Π²ΠΈΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ).width/height:βΒ Π»Π΅Π²ΠΎΠ΅ ΡΠ΅ΡΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ
ΠΠΠΠΠΠ: ΠΠ΅ΡΠ΅Π»ΡΠ΅ ΡΡΠ°ΠΊΡΠ°Π»Ρ
ΠΠΠΠΠΠ: ΠΠ΅ΡΠ΅Π»ΡΠ΅ ΡΡΠ°ΠΊΡΠ°Π»Ρ
ΠΡΠ»ΠΈ Π½Π°ΡΠ°ΡΡ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΡΠΎ ΡΡΠ°ΠΊΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΠΏΡΠΈΡ
ΠΎΡΠΌΠΎΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ Π²ΠΎΠ·Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ, ΠΈΠ±ΠΎ Π½Π΅ΡΡΡ Π² ΡΠ΅Π±Π΅ ΡΡΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΡΠ΅ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΡΡβ¦ ΡΠΎ Π΅ΡΡΡ ΡΠΈΡΠΊ Π½Π°Π²Π΅ΡΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠ»Π΅ΠΉΠΌΠΎ Π½Π΅ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π·Π°Π½ΡΠ΄Ρ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π·Π°ΡΠΌΠ½ΡΠ΅ ΠΊΠ°Π·Π΅Π½Π½ΡΠ΅ ΡΡΠ°Π·Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΠ²ΡΠΎΡΡΠΌΠΌΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΠ²ΡΠΎΡΡΠΌΠΌΠ° ΠΠ»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΡΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΡΡΠ΅Π΅ΠΊ ΡΠ»ΡΠΆΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΠ²ΡΠΎΡΡΠΌΠΌΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΡΠΆΠ½ΡΡ ΡΠΎΡΠΌΡΠ»Ρ. ΠΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π΄Π»Ρ ΡΡΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΈΡΠ΅Π» Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ.1. Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΡ, Π² ΠΊΠΎΡΠΎΡΡΡ
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΡΠ»ΠΈ Π²Ρ ΠΎΠΏΠ»Π°ΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΏΠΎ ΠΊΠ°ΡΡΠ΅, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΊΠ»ΡΡΠΈΠ²ΡΠΈΡΡ ΠΎΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π½ΠΎΠ²Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΊΠ°ΡΠ°Π» Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ ΠΈ ΡΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ
ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΎΡΠΌ ΠΈ ΠΏΡΠΎΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
1.

ΠΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ CSS3 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΎΡΡΠΎ ΠΎΠ±Π°Π»Π΄Π΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
2.Β ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
3. jQuery ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠ»Π°Π³ΠΈΠ½ jQuery Β«UniformΒ».Β Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°: ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ, ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ.
4. ΠΠΎΡΡΡΡΠ°ΡΡΠ΅Π΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Β«ΡΠ΅ΠΊΠ±ΠΎΠΊΠΎΡΠΎΠ²Β» Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΡΠ΅Π½Ρ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΊΠ°ΠΊ Β«ΡΠ΅ΠΊΠ±ΠΎΠΊΡΒ». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ: jQuery ΠΈ CSS.
5.Β ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π²Π΅Π±-ΡΠΎΡΠΌ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
6. ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ jQuery
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ°. ΠΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΡΡΠΊΠΎΠΉ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π·Π°ΠΏΡΠΎΡΠ° Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ.
7. Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ HTML ΡΠΎΡΠΌ Β«Ideal FormsΒ»
ΠΡΡΠ΅ΠΊΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΌ jQuery.
8. jQuery ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ
9. Checkbox
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
10. CSS3 ΠΈ jQuery ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°.
11. ΠΡΡΠ΅ΠΊΡΠ½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π΅ΡΠ΅Π»ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
12. Cusor Hover Buttons
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄Π²Π° ΡΠ»ΠΎΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. ΠΠ°ΡΠΈ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ ΠΊΠ°ΠΊ Π±Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΡΡ Π½Π΅ΠΎΠ½ΠΎΠΌ.
13. Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS.
14. ΠΠ»Π°Π³ΠΈΠ½ Β«jqTransformΒ»
15.

Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅Β ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ.
16. Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈΒ Β«jQuery CheckboxΒ»
Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ² ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS.
17. ΠΠ»Π°Π³ΠΈΠ½Β Β«ezMarkΒ»
18.Β Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
19. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3 ΠΈ jQuery
20. ΠΡΡΠ΅ΠΊΡΠ½ΡΠΉ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π΄Π°ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ jQuery
ΠΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»Π΅Π²ΡΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ· Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
21.Β Mootools ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π΄Π°ΡΡ, ΠΏΠ»Π°Π³ΠΈΠ½Β Β«DatePickerΒ»
ΠΠΎΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½. Π£Π΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ Ρ Π΄Π°ΡΠΎΠΉ ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ. ΠΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
2017. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π½Π° frontend. Π§Π°ΡΡΡ β1.
2017. Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π½Π° frontend. Π§Π°ΡΡΡ β1.------------ ΠΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°ΡΠΈ ------------ ΠΠ°ΠΊΠ°Π·ΡΠΈΠΊ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ: - ΠΠ°ΠΊΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΡΡΠ°Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΠΉΠ»Π° ΡΠΎΡΠΌΠ°ΡΠ° Sketch ΠΈ PNG.- ΠΠΎΠ²Π΅Π΄Π΅Π½ΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΡ ΡΡΡΠ°Π½ΠΈΡ. - ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΈ SVG-ΡΠΏΡΠ°ΠΉΡ. - ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ (ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°, ΡΠΎΡΠΎΡΠΎΠ½Ρ ΠΈ Ρ.ΠΏ.). ΠΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΌ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΠΈΠ»ΠΈ ΡΡΠΎΠΊΠΎΠ²ΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ². ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ: - Frontend-ΠΏΡΠΎΠ΅ΠΊΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ. - ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ ΡΠ±ΠΎΡΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ². - ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ build: HTML, CSS, ΡΠΊΡΠΈΠΏΡΡ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΈ ΡΠΏΠΈΡΠΊΠΈ, ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠ»Π°ΠΉΠ΄Π΅ΡΡ, ΠΏΠΎΠΏΠ°ΠΏ Ρ ΡΠΎΡΠΎ, ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΎΡ, Π²ΠΈΠ΄Π΅ΠΎ/Π°ΡΠ΄ΠΈΠΎ ΠΏΠ»Π΅Π΅Ρ). - ΠΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΡΠ°ΠΆΡΠ½Π½ΡΠ΅ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΈΠ»ΠΈ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈ ΡΠ΅Π»Π΅ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅. - ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΠ΅Π½Π΄ Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ Π½Π΅ Π²Ρ ΠΎΠ΄ΠΈΡ Π² ΠΎΠ±ΡΠ·Π°Π½Π½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. Π‘ΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅: http://miit.ru/2017/design/pages.html ΠΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Π½Π΅ΠΊΠ°Ρ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ Π²Π°ΡΠΈΠ°ΡΠΈΠ²Π½ΠΎΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Π°. Π ΠΏΠ΅ΡΠ²ΡΠΉ ΡΡΠ°ΠΏ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΈΡΡ: - ΠΠ»Π°Π²Π½Π°Ρ (Π²ΠΊΠ»ΡΡΠ°Ρ ΠΌΠ΅Π½Ρ ΠΈ ΠΎΠ±ΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ) - Π‘ΠΏΠΈΡΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ - Π‘ΡΡΠ°Π½ΠΈΡΠ° Π½ΠΎΠ²ΠΎΡΡΠΈ ------------ Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ------------ Π’ΡΠ΅Π±ΡΠ΅ΠΌΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ: - Π―Π·ΡΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΊΡΠΈΠΏΡΠΎΠ²: JavaScript Π½Π΅ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ES5.
- JavaScript-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ: ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Bootstrap 3.* (ΡΠ΅ΡΠΊΠ°, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ), JQuery 3.*. - Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° CSS: Sass (ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ SCSS). ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ source map. - HTML-ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. - ΠΡΡΡΡΡΡΠ²ΠΈΠ΅ flash. - ΠΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ Π΄Π΅Π²Π΅Π»ΠΎΠΏΠ΅ΡΡΠΊΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²: npm. - ΠΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ web-ΠΏΡΠΎΠ΅ΠΊΡΠ°: Bower. - Π‘Π±ΠΎΡΡΠΈΠΊ: gulp. Π ΡΠ΅Π»ΠΎΠΌ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π»ΠΈΡΠ½ΠΈΡ Π½Π΅ Π½Π°Π΄ΠΎ. ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ gulp Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ: - ΠΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ Sass-ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ². - Π‘Π±ΠΎΡΠΊΠ° ΠΈ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠΊΡΠΈΠΏΡΠΎΠ², ΡΡΠΈΠ»Π΅ΠΉ, ΡΠΏΡΠ°ΠΉΡΠΎΠ². - ΠΠΈΡΡΡΠΈΠ±ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° (Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΡΠ΄Π΅Π»Π΅Π½Ρ ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ ). - ΠΡΠΈΡΡΠΊΠ° (clean) - ΠΠ±ΡΠ°Ρ Π·Π°Π΄Π°ΡΠ°, Π²ΠΊΠ»ΡΡΠ°ΡΡΠ°Ρ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΊ ΡΠ°Π·Π²ΡΡΡΡΠ²Π°Π½ΠΈΡ. ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π² Π²ΠΈΠ΄Π΅ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΌΡ ΡΡΠ΅Π½Π΄Ρ ΠΈ ΠΊΠΎΠΌΠΌΠΈΡΠ° Π² git-Ρ ΠΎΡΡΠΈΠ½Π³. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠΌΠΌΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ: ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ (Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² - ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ gulpfile.js, package.json ΠΈ Ρ.
Π΄.), ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠΈΠΉ Π΄ΠΈΡΡΡΠΈΠ±ΡΡΠΈΠ², ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ. ΠΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΠΌ Gitlab. ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΠΎΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π²ΡΡΡΡΠΊΠΈ, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π°, Π½Π°Π»ΠΈΡΠΈΠ΅ hover ΠΈ ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, cursor: pointer Π½Π° Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ - Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Chrome, FF, IE, Android/iOS Chrome. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ (Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Bootstrap, Π»ΠΈΠ±ΠΎ jQuery. ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠ°Π·ΡΠΌΠ½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Bootstrap ΠΏΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ Ρ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠΎΠΌ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Scrollspy, Affix, silviomoreto bootstrap-select. ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΈ SVG-ΡΠΏΡΠ°ΠΉΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ http://miit.ru/2017/svg/ (Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΡΠ°ΠΉΡ - Version 3). SVG-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ svg - use. Π use ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ» SVG-ΡΠΏΡΠ°ΠΉΡ. ΠΠ»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ SVG-ΡΠ°ΠΉΠ»ΠΎΠ² Π² IE ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ https://github.com/Keyamoon/svgxuse ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ ΠΈ hover ΠΈΠΊΠΎΠ½ΠΎΠΊ Π·Π°Π΄Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΡΠΈΠ»Ρ CSS. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈ ΠΏΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ Π² ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠΎΠΌ SVG-ΡΠΏΡΠ°ΠΉΡ ΠΌΠΎΠ³ΡΡ Π²Π½ΠΎΡΠΈΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΌ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: - Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ SVG-ΡΠΏΡΠ°ΠΉΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π΅Π΄ΠΈΠ½ΡΠΉ ΡΠ°ΠΉΠ» ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΈΡΠΊΠ»ΡΡΠ°Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Ρ. - Π ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π½Π΅Π·Π½Π°ΡΠΈΠΌΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² svg, ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠ»Π° Π·Π½Π°ΠΊΠΎΠ² ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΡΠΎΠΉ - ΠΎΠ΄Π½Π°ΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΊΠ°ΠΆΠ°ΡΡΡΡ. - ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. - Π£ΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Ρ SVG Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ gulp task. - ΠΠ»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ-ΡΡΡΠ΅Π»ΠΎΠΊ: Ρ ΡΠ°Π½ΠΈΡΡ Π² ΡΠΏΡΠ°ΠΉΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ ΡΡΡΠ΅Π»ΠΊΠΈ, Π° Π΄Π»Ρ Π²ΡΠ΅Ρ Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² (Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±) ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ CSS-ΠΊΠ»Π°ΡΡΡ. - ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ-ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ svg-ΡΠΏΡΠ°ΠΉΡΠ° Π²ΠΈΠ΄Π°: http://miit.ru/2017/svg/version3/version3-catalog.html (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΠΉ).
ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°Π±ΠΎΡΠ°ΡΡ hover ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Favicon ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ svg. ------------ ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ------------ ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ: ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Chrome, Firefox, Opera, Edge, Safari; Mobile Chrome, Mobile Safari. Internet Explorer 10+. ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΡΠ°ΠΊ ΠΈ Π½Π° Π΄Π΅ΡΠΊΡΠΎΠΏΠ΅, ΡΠΌΠΎΡΡΠΈΠΌ Π·Π° Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΡΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈ ΡΠ΅ΡΠ°ΠΉΠ·Π΅ ΠΎΠΊΠ½Π°. ΠΡΠΈ ΡΠ΅ΡΠ°ΠΉΠ·Π΅ ΠΎΠΊΠ½Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡΡΡ Π΄ΡΡΠ³Π°Π½ΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠΌ ΠΏΡΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ/ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ) Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ . ΠΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°: Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΡΠΊΠ° Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ±ΠΈΠ²Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ Π΄Π»ΠΈΠ½Π½ΡΠ΅, ΡΠ°ΠΊ ΠΈ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ. ΠΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΈΡΡΠΎΠ² (ΠΊΠ°ΠΊ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°ΠΊ ΠΈ ΠΠ‘). ΠΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΎΡΠΊΠ»ΡΡΡΠ½Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ . Π£Π΄ΠΎΠ±Π½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΈ Ρ.
Π΄.) Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° Π΄Π»Ρ Π»ΠΈΡ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ. "Π Π΅Π·ΠΈΠ½ΠΎΠ²Π°Ρ" Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΠΈΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ (ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡ) ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠΏΠΈΡΠ°ΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅ΡΡ -tablet ΠΈ -mobile. ΠΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π° ΡΠ²Π»ΡΠ΅ΡΡΡ http://www.uchicago.edu/ : https://youtu.be/V5p8HPLiS9c ΠΡΠΈΠΌΠ΅Ρ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌΡΡ ΡΡΡΠ°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ: http://miit.ru/2017/variant1/index.html , http://miit.ru/2017/variant1/news.html , http://miit.ru/2017/variant1/news-item.html . ΠΠΈ ΠΏΡΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌ: 1. ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅: mobile Ρ 1 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ 2. ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΈΠ»ΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΏΠ»Π°Π½ΡΠ΅Ρ (~7 Π΄ΡΠΉΠΌΠΎΠ²): mobile Ρ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ 3. ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ»Π°Π½ΡΠ΅Ρ (~10 Π΄ΡΠΉΠΌΠΎΠ²): tablet Ρ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ 4. ΠΠ΅ΡΠΊΡΠΎΠΏΠ½ΡΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ: desktop Ρ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ 5. ΠΠΎΠ»ΡΡΠΎΠΉ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ (ΡΠΈΡΠΈΠ½Π° ΠΎΡ 1440px): wide desktop Ρ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ Bootstrap (Ρ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°) ΠΈΠ»ΠΈ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ.
Π£ΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΏΠΈΡΠΊΠ° Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ. wide desktop - ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ Π·Π½Π°ΡΠΊΠΈ ΠΏΠΎΠ΄ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠΌ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΡΠΌΠΈ (ΡΠΌ. ΠΌΠ°ΠΊΠ΅Ρ) ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ΄ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΡΠ²ΠΎΡ Π²ΡΡΠΎΡΡ, ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠΎΠ², ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°. Π‘Π°ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΡ . ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»: - Π£Π²Π΅Π»ΠΈΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π± ΡΡΠΈΡΡΠ°. - ΠΠΊΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΡ ΡΠ΅ΠΌΡ. - ΠΡΠΊΠ»ΡΡΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΈ ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ Π»ΠΈΡ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΊΠ»ΡΡΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ Π² ΠΏΠΎΠ»Π½ΡΡ Π²Π΅ΡΡΠΈΡ Π²ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π²Π½ΠΎΠ²Ρ. ΠΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π°. ΠΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΡΠΈΠΏΡ uhpv-full.min.js (ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ http://miit.ru/ , ΡΡΡΠ»ΠΊΠ° "ΠΠ΅ΡΡΠΈΡ Π΄Π»Ρ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΡ "). Π‘ΡΡΠ΅ΠΌΠΈΠΌΡΡ ΠΊ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Ρ ΠΊΠ°ΠΊ Π·Π΄Π΅ΡΡ: http://ΠΌΠΈΠ½ΠΎΠ±ΡΠ½Π°ΡΠΊΠΈ.ΡΡ (http://imgur.com/a/lTLNH , http://imgur.
com/a/iiQdp ) ΠΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΡΠ½Π΅ΡΠ΅Π½Ρ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ Π² ΡΠ΅ΠΊΡΠΈΡ/ΡΠ°ΠΉΠ» Π½Π°ΡΡΡΠΎΠ΅ΠΊ. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎ ΡΠΈΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, "Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ", "Π²ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ", "Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ". Hover ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ, ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΡΡΡΠ»ΠΎΠΊ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠ½ΠΎΠΏΠΎΠΊ - Ρ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 0 (Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ Π·Π°Π΄Π°ΡΡ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎ Π² ΡΠ΅ΠΊΡΠΈΠΈ Π½Π°ΡΡΡΠΎΠ΅ΠΊ). Hover ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΎΡΡΠΈΡ ΡΡΡΠ»ΠΎΠΊ, ΡΡΡΠ»ΠΎΠΊ Π² ΡΡΡΠ΅ΡΠ΅, ΠΏΡΠ½ΠΊΡΡ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ - Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ Ρ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 0.3Ρ. Π Π°ΡΠΊΡΡΡΠΈΠ΅ Π³ΡΡΠΏΠΏ Π² footer Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ mobile Ρ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 0.3Ρ. ΠΡΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² (Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΠΎΡΠΌ) Π΄Π»Ρ ΠΈΠ½ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° ajax-Π·Π°Π³ΡΡΠ·ΠΊΠΈ (ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² http://www.ajaxload.info/ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Indicator ΠΈΠ»ΠΈ Circle). ΠΡΠ»ΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ Π·Π°ΠΏΡΠΎΡ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ, ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ΄ΠΎΠΌ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. ΠΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎ Ρ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠΎΠΌ.
ΠΡΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΡΠΏΠΎΡΠ½ΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ Π·Π° Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠΎΠΌ. ΠΡΠΈ ΡΠ°Π·Π½ΠΎΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΈ Π’Π ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π·Π° Π’Π. ΠΡΠΈ ΡΠ°Π·Π½ΠΎΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ guide-ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π·Π° guide. Π Π°Π·ΡΠΌΠ½ΠΎΠ΅ ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΠ΅ ΠΎΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ------------ ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΈ ΡΠ΅ΡΡΡΡΡ ------------ ΠΠ±ΡΠ°Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΡΡΡ - ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ° Π²ΡΠ΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ² - UTF-8. ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ HTML ΠΏΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML5. Π Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ <!DOCTYPE html>. Π‘ΠΊΡΠΈΠΏΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ </body>. ΠΠ°ΠΆΠ΄Π°Ρ JS-ΡΡΠ½ΠΊΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π°: Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π²Ρ ΠΎΠ΄Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ). ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΉ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ. ΠΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ - java naming convention.
Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² <head>. Π CSS ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². Π‘ΡΠΈΠ»ΠΈ CSS ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ ΠΊΠ»Π°ΡΡΠ°ΠΌ, Π° Π½Π΅ ΠΏΠΎ ID. ΠΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ Π·Π½Π°ΠΊΠΎΠΌ - . ΠΠ΅Π· camelCase. ΠΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΡΠ΅Π³ΠΈ ΠΏΠΈΡΡΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ Π±ΡΠΊΠ²Π°ΠΌΠΈ. ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΠΠ. Π€ΠΎΡΠΌΠ°Ρ Π²ΠΈΠ΄Π°: .class-name { attribute: value; } ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π° ΡΡΡΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅. ΠΠ°Π·Π²Π°Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅, Π½Π΅ ΡΡΠ°Π½ΡΠ»ΠΈΡ. ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π½Π° Π±Π»ΠΎΠΊΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π²-Π»ΠΈΠ½ΠΈΠΉ. ΠΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π²ΡΠ½ΠΎΡΠΈΡΡ Π½Π°ΡΡΡΠΎΠ΅ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΎΡΠ° ΡΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΉΠ΄ΠΎΠ²) Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΊΡΠΈΡ Π² Π½Π°ΡΠ°Π»Π΅ ΡΠ°ΠΉΠ»Π° ΠΈΠ»ΠΈ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ». ΠΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ΅ΡΡΡΡΠΎΠ² (css, js, ΡΡΠΈΡΡΡ). ΠΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ: ΠΎΠ΄ΠΈΠ½ ΡΠ±ΠΎΡΠ½ΡΠΉ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠΉ + ΠΎΠ΄ΠΈΠ½ ΡΠ±ΠΎΡΠ½ΡΠΉ (ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ) ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ + Π½Π°Π±ΠΎΡ ΡΡΠΈΡΡΠΎΠ² ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ΅ΡΡΡΡΠΎΠ². Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π° Π»ΡΠ±ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ².
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° (ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ) Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΡΠΏΠΈΡΠΊΠ°Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π²Π°ΡΠΈΠ°ΡΠΈΡΡ - ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ------------ ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΡΡΡΠ°Π½ΠΈΡ ------------ Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° layout, Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ (Π±Π»ΠΎΠΊΠΈ) ΠΈ ΠΎΠ±ΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Layout - ΠΎΠ±ΡΠ΅Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ. ΠΠ»Π°ΡΡΡ Π²ΠΈΠ΄Π° wrapper, container ΠΈ Ρ.Π΄. ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ (Π±Π»ΠΎΠΊΠΈ) - ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ΡΡΡΠ°Ρ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΡ ΡΠΌΡΡΠ»ΠΎΠ²ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ. ΠΡΠΈΠΌΠ΅Ρ: ΡΠ»Π°ΠΉΠ΄Π΅Ρ, Π±Π»ΠΎΠΊ "ΠΠ»Ρ ΠΏΠΎΡΡΡΠΏΠ°ΡΡΠΈΡ ", Π±Π»ΠΎΠΊ "ΠΠΎΠ²ΠΎΡΡΠΈ ΡΠ½ΠΈΠ²Π΅ΡΡΠΈΡΠ΅ΡΠ°". ΠΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΡΠΌ. Π½ΠΈΠΆΠ΅) ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ, ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡΠΈΠΉ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. ΠΠ°ΠΆΠ΄ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π³ΠΎΡΠΎΠ²ΡΠΌ ΠΊ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡΡ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², Π»ΠΈΠ±ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², ΠΎΠ±ΡΠ΅Π³ΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡ. ΠΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ header ΠΈ/ΠΈΠ»ΠΈ footer Π²Π½Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ².
ΠΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ ΠΊΠ»Π°ΡΡΡ). ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π° Π²Ρ ΠΎΠ΄Π΅ Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΎΡ backend Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠΌΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΏΠΈΡΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ (Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π±Π°Π½Π½Π΅ΡΠΎΠ²), ΡΠΏΠΈΡΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΠΎΠ²ΠΎΡΡΠΈ ΡΠ½ΠΈΠ²Π΅ΡΡΠΈΡΠ΅ΡΠ° (Π±Π΅Π· ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π°Π½Π½Π΅ΡΠΎΠ²) ΠΈ ΡΠΏΠΈΡΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ Π½ΠΎΠ²ΠΎΡΡΠΈ (ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΠΈΠΉ Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΎΡΠΊΡΡΡΡΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½ΠΎΠ²ΠΎΡΡΡ) - ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ. Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΌΠΎΠ³ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡΡΡ ΡΡΠΎΡΠ½ΡΡΡΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ. ΠΠ±ΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ - ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ "Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠ΅" ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ web-ΡΡΡΠ°Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ, ΡΡΡΠ»ΠΊΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΠΈ Ρ.Π΄.
ΠΠ±ΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠ»Π°ΡΡΡ ΠΎΠ±ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°ΡΡΡΡ Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ "ΠΊΠ½ΠΎΠΏΠΊΠ°" Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ "button button-active" Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° applicants Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ° "applicants__". ΠΡΠΈΠΌΠ΅ΡΡ: ΠΠ»Π΅ΠΌΠ΅Π½Ρ "Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°" ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° "Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ-ΡΠΊΠΎΡΠ΅ΠΌ" ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° Ρ Π²ΡΠΎΡΠΎΠΉ. ΠΡΠ΅ "ΡΠΈΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ" ΠΈ "ΡΠΈΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ" ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π½Π° ΡΠ°ΠΉΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅Π³ΠΎ CSS Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠΈΠΌΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ : http://miit.ru/2017/variant1/index.html , http://miit.ru/2017/variant1/news.html , http://miit.ru/2017/variant1/news-item.html . ------------ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡ ------------ ------ ΠΠ±ΡΠ΅Π΅ ------ --- Header --- Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ (ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½Π°Ρ), Π° Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΠΊΡΡΠ³ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS. ΠΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ° Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΊΡΡΠ³ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ ΠΈΠ½ΠΈΡΠΈΠ°Π»Π°ΠΌΠΈ (2 Π±ΡΠΊΠ²Ρ) Π²Π½ΡΡΡΠΈ.
ΠΠΎΠ³ΠΎΡΠΈΠΏ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ svg, Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ΠΏΠΈΡΡΡ "Π Π£Π’-ΠΠΠΠ’" Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ° (Arian Grqi). --- ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ --- - Π΄Π΅ΡΠΊΡΠΎΠΏ ΠΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ hover ΠΏΠΎ ΠΏΡΠ½ΠΊΡΠ°ΠΌ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΈΡΡΠ΅Π·Π°Π½ΠΈΡ 0.3 ΡΠ΅ΠΊΡΠ½Π΄Ρ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΡΠ½Π΅ΡΠ΅Π½ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ΅ΠΊΡΠΈΡ/ΡΠ°ΠΉΠ» Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅). ΠΡΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π΅ ΠΌΡΡΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΡΡΠ΅Π·Π°Π΅Ρ (Π½Π΅ ΠΌΠΈΠ³Π°Π΅Ρ) ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ. -tablet Π Π°ΡΠΊΡΡΡΠΈΠ΅ ΠΈ ΡΠΎΠΊΡΡΡΠΈΠ΅ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π’Π°ΠΏ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π²Π½Π΅ ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΡΠΊΡΡΡΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ - ΡΠΎΠΊΡΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ. -mobile Π ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Navigation Drawer Π² Material Design: https://material.io/guidelines/patterns/navigation-drawer.html . ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ: ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ (Π²ΡΠ΅Π·ΠΆΠ°Π½ΠΈΠ΅) ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΡΠΎΠΊΡΡΡΠΈΠ΅ Π½Π°Π»Π΅Π²ΠΎ. ΠΡΠΈ ΡΠ°ΠΏΠ΅ Π½Π° Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 85% ΠΎΠΊΠ½Π° (ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Material Design ΡΠΏΡΠ°Π²Π° ΠΎΡΡΠ°ΡΡΡΡ 56 density independent pixels).
ΠΡΡΠ°Π²ΡΠ°ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΏΡΠ°Π²Π° Π·Π°ΡΠ΅ΠΌΠ½ΡΠ΅ΡΡΡ. Π’Π°ΠΏ Π½Π° Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠ΅Π½Ρ. Π‘Π²Π°ΠΉΠΏ Π²Π»Π΅Π²ΠΎ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΠΊΡΠ°Π½Π° ΡΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠ΅Π½Ρ. ΠΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΠΆΠΈΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Telegram ΠΈΠ»ΠΈ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ Π½Π° Android. ΠΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΡΡΠΎΠ²Π½ΡΠΌ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π²Π±ΠΎΠΊ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΡΠ½Π΅ΡΠ΅Π½ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ»/ΡΠ΅ΠΊΡΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅). ΠΠ° Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°. ΠΠ΅Π»Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ (ΡΠΌ. ΠΌΠ°ΠΊΠ΅Ρ) ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π° ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΡΠ°Ρ. Hover Ρ Π·Π½Π°ΡΠΊΠ° Π±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ, Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ½Π°: http://imgur.com/a/HDNEF --- ΠΠΎΠΈΡΠΊ --- ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π·Π½Π°ΡΠΎΠΊ ΠΏΠΎΠΈΡΠΊΠ° (Π»ΡΠΏΠ°) ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΏΠΎΠ»Π΅ΠΌ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°, Π·Π°ΠΌΠ΅Π½ΡΡ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΠΈ Π³Π΅ΡΠ±. ΠΡΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠΊΡΡ Π²Π²ΠΎΠ΄Π°. ΠΠΎΠ»Π΅ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π°, Π±ΡΠ΄ΡΡΠΈ Π½Π΅Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΌ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ (placeholder), ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π° (Π΄Π΅ΡΠΊΡΠΎΠΏ, tablet, mobile). Π¦Π²Π΅Ρ: ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ. ΠΡΠΈ Π½Π°ΡΠ°Π»Π΅ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ.
ΠΡΠΈ ΠΎΡΠΈΡΡΠΊΠ΅ Π²Π²ΠΎΠ΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²Π½ΠΎΠ²Ρ. Π‘ΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΊΡΠ΅ΡΡΠΈΠΊ Π·Π°ΠΊΡΡΡΠΈΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠΎΠΈΡΠΊΠ°, Π·Π°ΠΊΡΡΡΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ Esc. ΠΠ°ΠΏΡΡΠΊ ΠΏΠΎΠΈΡΠΊΠ° - ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΡΡΠ»ΠΊΠ΅ Π²ΠΈΠ΄Π° /search?q=... ΠΡΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΠΈ ΠΏΠΎΠΈΡΠΊΠ° Π»ΠΈΠ½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΠΏΠΎΠ΄ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, Π·Π°ΠΏΠΎΠ»Π½ΡΡ ΡΠ°Π·ΡΡΠ² Π²ΠΎΠΊΡΡΠ³ Π³Π΅ΡΠ±Π°. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΊΡΡΡΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° (ΠΊΡΠ΅ΡΡΠΈΠΊ) Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΡΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΊΡΡΡΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° (Π»ΡΠΏΡ). -Π΄Π΅ΡΠΊΡΠΎΠΏ ΠΈ tablet Π‘Π»Π΅Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠΈΡΠΊΠ° (Π·Π½Π°ΡΠΎΠΊ "Π»ΡΠΏΠ°"), ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΠΎΠΈΡΠΊ. ΠΠΎΠΈΡΠΊ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Enter. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ: ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π»ΡΠΏΡ ΠΏΡΠ½ΠΊΡΡ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ Π³Π΅ΡΠ± ΠΈΡΡΠ΅Π·Π°ΡΡ (ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ), Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ°Π·ΡΡΠ² Π²ΠΎΠΊΡΡΠ³ Π³Π΅ΡΠ±Π° (ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ), Π»ΡΠΏΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ (Π·Π° 0.3Ρ) ΡΠΎ ΡΠ²ΠΎΠ΅ΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ Π½Π° ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π»ΡΠΏΡ ΡΠΎΡΠ½ΠΎ Π½Π° Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΡΠ΅ΡΡΠΈΠΊ. ΠΠ°ΠΊΡΡΡΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ. -mobile ΠΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° (Π»ΡΠΏΠ°) Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠΈΡΠΊ/Π²Π²ΠΎΠ΄ Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈΠ»ΠΈ Enter ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ.
Hover Ρ Π·Π½Π°ΡΠΊΠΎΠ² Π»ΡΠΏΡ ΠΈ ΠΊΡΠ΅ΡΡΠΈΠΊΠ°, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ½Π°. ΠΡΠΈΠΌΠ΅Ρ: http://imgur.com/a/HDNEF --- Π€ΡΡΠ΅Ρ --- ΠΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΠΎΠ»Ρ ΡΠ³ΠΎΠ΄Π½ΠΎ Π΄Π»ΠΈΠ½Π½ΡΠΌΠΈ. Π‘Π»ΠΎΠ²Π°, Π½Π΅ Π²Π»Π΅Π·Π°ΡΡΠΈΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΡΠΎΠ»Π±ΡΠ° ΡΡΡΠ΅ΡΠ° ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡΡΡ Π½Π° Π΄ΡΡΠ³ΡΡ ΡΡΡΠΎΠΊΡ. ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ. ΠΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π²Π½ΡΡΡΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ. ΠΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·Π½ΠΎΠ²Π΅Π»ΠΈΠΊΠΈΠΌΠΈ ΠΏΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΡΡΠΎΠΊ. Π‘ΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΡΠ΅ΡΠΊΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΡΠ°Π·Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΡΡΠ΅ΡΠ° Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ. Π‘ΡΠΎΠ»Π±ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ul Ρ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ li Π²Π½ΡΡΡΠΈ. -tablet ΠΠ° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅ ΡΡΡΠ΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΡΠΌ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΠΎΠΌΡ, ΠΏΠΎΠΊΠ° Ρ Π²Π°ΡΠ°Π΅Ρ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ Π³ΡΡΠΏΠΏ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΡΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΄Π»Ρ Π²ΡΠ΅Ρ Π³ΡΡΠΏΠΏ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ, Π³ΡΡΠΏΠΏΡ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ (Π½ΠΈΠΆΠ΅). ΠΠ΅ΡΠ΅Π½Π΅ΡΡΠ½Π½ΡΠ΅ Π³ΡΡΠΏΠΏΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ Π½Π΅ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠ½Π½ΡΠΌΠΈ Π³ΡΡΠΏΠΏΠ°ΠΌΠΈ. -mobile ΠΡΠ½ΠΊΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ Π²ΠΈΠ΄Π΅.
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΡΠ²ΡΡΠ½ΡΡΡ. ΠΠΎΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΡΠΊΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ°. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠ½ΠΊΡΠ° ΠΈΠ»ΠΈ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΡΡΠ΅Π»ΠΎΡΠΊΡ Π±Π»ΠΎΠΊ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ, Π° ΡΡΡΠ΅Π»ΠΎΡΠΊΠ° ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅. Π£ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Π΅, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΡΠ΅Π»ΠΊΡ, cursor: pointer. ΠΠ»Π°Π²Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° - ΡΠ°ΡΠΊΡΡΡΠΈΠ΅ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΡΠΎΠΊΡΡΡΠΈΠ΅ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ (Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΡΡΡ ΠΈ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅). Π‘Π΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ footer 10px. --- ΠΠ΅Π½Ρ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ --- ΠΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°Π½. ΠΠΎΠ»ΠΆΠ½Π° Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠ΅Π³ΡΠ»ΡΡΠ½Π°Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π΅ΠΏΡΠΎΡΠΈΡΠ°Π½Π½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΠΈ Π½Π΅ΠΏΡΠΎΡΠΈΡΠ°Π½Π½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΠΌΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ° ΠΎΠΏΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ½ΡΠ΅ΡΠ²Π°Π» ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΡΠ΅ΡΠΊΠΈΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ. ------ ΠΠ»Π°Π²Π½Π°Ρ ------ ΠΡΠ΅ΡΠΈΠΊΡ ΠΊ Π±Π»ΠΎΠΊΡ ΠΠΎΡΡΡΠΏΠ°ΡΡΠΈΠ΅: applicants. ΠΡΠ΅ΡΠΈΠΊΡ ΠΊ Π±Π»ΠΎΠΊΡ ΠΠΎΠ²ΠΎΡΡΠΈ: articles.
--- Π‘Π»Π°ΠΉΠ΄Π΅Ρ --- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠ°Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΡΡΠΎΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠ½Π΅ΡΠ΅Π½ΠΎ Π² ΠΊΠΎΠ΄Π΅ Π² ΡΠ΅ΠΊΡΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ (ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ 10 ΡΠ΅ΠΊΡΠ½Π΄). Π Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΊΡΡΠΆΠΊΠΈ (ΡΠΎΡΠΊΠΈ), ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π°ΠΉΠ΄Ρ. Π’Π΅ΠΊΡΡΠΈΠΉ Π²ΡΠ΄Π΅Π»Π΅Π½, ΠΊΠ»ΠΈΠΊ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ ΠΊΡΡΠΆΠΊΡ - ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π°ΠΉΠ΄Π°. Π‘Π»Π°ΠΉΠ΄Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π²Π»Π΅Π²ΠΎ/Π²ΠΏΡΠ°Π²ΠΎ. ΠΡΠ»ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π°, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π°ΠΉΠ΄Π°. ΠΡΠ»ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π°, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, Π° ΠΎΡΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΡΠ°Π²ΡΠ°ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΡΠΌΠΈ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. Π Π°Π·ΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ ΡΠ²Π΅ΡΡ Ρ 1440px. ΠΠ°Π»ΡΡΠ΅ - ΡΠ΅ΡΡΠ΅ ΠΏΠΎΠ»Ρ. ΠΠ° ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ΅, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΡΠ΅ΠΊΡΡ Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΡΡ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ. Π’Π°ΠΏ Π½Π° ΠΏΡΠ°Π²ΠΎΠΉ ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΡΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ (Π»ΡΠ±ΡΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ) ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ±ΡΠΎΡΡ ΡΠ°ΠΉΠΌΠ΅ΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π»ΠΈΡΡΠ°Π½ΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ»Π°ΠΉΠ΄Π°, ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΆΠ΅ ΡΠ»Π°ΠΉΠ΄Ρ Π»ΠΈΡΡΠ°ΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅.
(Π’.Π΅. Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅ΡΠ²Π°Π» Π°Π²ΡΠΎΠ»ΠΈΡΡΠ°Π½ΠΈΠ΅, ΡΠΎ ΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΊ Π½Π΅ΠΌΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΌΠΈΠ½ΡΡΡ). --- Π‘ΠΏΠΈΡΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ --- Π‘ΠΏΠΈΡΠΎΠΊ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² (ΠΎΠΏΠΈΡΠ°Π½Ρ Π½ΠΈΠΆΠ΅) ΠΈ Π±Π°Π½Π½Π΅ΡΠΎΠ² (ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, ΠΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ, ΠΡΡΠ΅Π»Ρ ΠΠΠΠ’). Π‘ΠΏΠΈΡΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² 4, 3, 2 ΠΈΠ»ΠΈ 1 ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ°Π½Π½Π΅ΡΡ Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π²ΡΠ²ΠΎΠ΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΡΡΠ΄ΠΊΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΡ Π² html. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΡΠΈ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ: "Π½ΠΎΠ²ΠΎΡΡΡ 1", "Π½ΠΎΠ²ΠΎΡΡΡ 2", "Π½ΠΎΠ²ΠΎΡΡΡ 3", "Π±Π°Π½Π½Π΅Ρ 1"; Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ "Π½ΠΎΠ²ΠΎΡΡΡ 4" ... ΠΡΠΈ ΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ "Π±Π°Π½Π½Π΅Ρ 1" ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, Π° "Π½ΠΎΠ²ΠΎΡΡΡ 3" ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ: "Π½ΠΎΠ²ΠΎΡΡΡ 1", "Π½ΠΎΠ²ΠΎΡΡΡ 2", "Π±Π°Π½Π½Π΅Ρ 1"; Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ "Π½ΠΎΠ²ΠΎΡΡΡ 3", "Π½ΠΎΠ²ΠΎΡΡΡ 4" ... ΠΠ°ΠΌ Π±Ρ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΈ Π±Π°Π½Π½Π΅ΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ, Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π° Π·Π°Π΄Π°ΡΡΡΡ Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅.
Π’Π°ΠΊ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°Π²ΠΊΠΎΠΉ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ»ΠΈ ΡΠ±ΠΈΡΠ°ΡΡ Π±Π°Π½Π½Π΅ΡΡ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΠΈΡ Π² Π½ΡΠΆΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠΏΠΈΡΠΊΠ΅, ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π°. ΠΡΠΈΠΌΠ΅Ρ: https://jsfiddle.net/ILyaCyclone/7rdmcksd/ Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π½Π° flexbox. ΠΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊΠ»Π°ΡΡΡ ΡΡΡΡ Π²ΠΈΠ΄ΠΎΠ²: 1. c(x)-i(y), Π³Π΄Π΅ (x) - ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ, (y) - ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ; Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ c4-i3 c3-i4 - ΠΏΡΠΈ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠ° Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ 3 ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ, Π° ΠΏΡΠΈ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ - 4 ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ. 2. i(y), Π³Π΄Π΅ (y) - ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ (Π»ΡΠ±ΠΎΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ). 3. c(x)-hid, Π³Π΄Π΅ (x) - ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ, ΠΊΠ°ΡΡΠΎΡΠΊΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΊΡΡΡΠ°. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½ΠΎΠ²ΠΎΡΡΠΈ (ΠΈΡΠΊΠ»ΡΡΠ°Ρ "ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ") ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π² 3 ΡΡΡΠΎΠΊΠΈ. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΉ Π΄Π»ΠΈΠ½Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌΡ ΡΠ»ΠΎΠ²Ρ Π½Π° ΡΡΠ΅ΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅, Π·Π°ΡΠ΅ΠΌ ΡΡΠ°Π²ΠΈΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅. ΠΠ»Ρ IE Π΄ΠΎΠΏΡΡΡΠΈΠΌ Π²ΡΠ²ΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π² 3 ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΠΎΠΊΡΡΡΠΈΠ΅ ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠ°ΡΡΠΈ. ΠΠΈΠ΄Ρ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ: ΠΠ°ΡΡΠΎΡΠΊΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° (ΠΈΡΠΊΠ»ΡΡΠ°Ρ "ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ") ΡΡΠ»ΠΎΠ²Π½ΠΎ Π΄Π΅Π»ΠΈΡΡΡ Π½Π° ΡΡΠΈ ΡΠ°ΡΡΠΈ: Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ Π΅Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅Π»Ρ; Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ - Π±Π΅Π»ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ; Π½ΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΡ - ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΎΠ·Π»Π΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π΄Π°ΡΠ° ΠΈΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»ΠΈ-ΡΡΡΠ»ΠΊΠΈ.
ΠΠ°ΡΡΠΎΡΠΊΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ. ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ Π½Π° Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ hover ΠΈ cursor: pointer. ΠΠ»ΠΈΠΊ Π½Π° Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΡΡΠ»ΠΊΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»ΠΈ-ΡΡΡΠ»ΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ, ΠΌΠΎΠ³ΡΡ ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ Π²Π½Π΅ΡΠ½Π΅ΠΌΡ Π°Π΄ΡΠ΅ΡΡ. ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ "ΡΡΡΠ»ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ" ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ internal/link ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠ½ΠΎΠ½Ρ ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ: ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Ρ ΡΠ²Π΅ΡΠ½ΡΠΌ ΡΠΈΠ»ΡΡΡΠΎΠΌ. Π ΡΠ΅Π½ΡΡΠ΅ Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΠ΅ΡΡΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ GPS, ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΠ° Π²Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Ρ ΡΠ²Π΅ΡΠ½ΡΠΌ ΡΠΈΠ»ΡΡΡΠΎΠΌ. ΠΠΎ ΡΠ΅Π½ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ, ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. ΠΠΎΠ²ΠΎΡΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ: ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Ρ ΡΠ²Π΅ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ. ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ, ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. ΠΠΎΠ²ΠΎΡΡΡ Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠ΅ΠΉ ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ: ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠΈ Π±Π΅Π· ΡΠΈΠ»ΡΡΡΠΎΠ².
ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ, ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ: ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠΈ Π±Π΅Π· ΡΠΈΠ»ΡΡΡΠΎΠ². ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ, ΡΠΏΡΠ°Π²Π° Π·Π½Π°ΡΠΎΠΊ Π±ΡΠ»Π°Π²ΠΊΠΈ (pin). Π€ΠΎΡΠΎΠ°Π»ΡΠ±ΠΎΠΌ ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ: ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Ρ ΡΠ²Π΅ΡΠ½ΡΠΌ ΡΠΈΠ»ΡΡΡΠΎΠΌ. Π ΡΠ΅Π½ΡΡΠ΅ Π½Π°Π΄ΠΏΠΈΡΡ Π²ΠΈΠ΄Π° "20 ΡΠΎΡΠΎ". ΠΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠΈΠΆΠ½ΡΡ ΡΡΡΠΎΠΊΠ°: ΡΠ»Π΅Π²Π° Π΄Π°ΡΠ° ΠΈ ΠΌΠ΅ΡΡΡ, ΡΠΏΡΠ°Π²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ. Π‘ΠΈΠ½ΠΈΠΉ ΠΈ ΠΊΠΎΡΠΈΡΠ½Π΅Π²ΡΠ΅ ΡΠ²Π΅ΡΠ° - ΡΡΠΎ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ ΡΠΈΠ»ΡΡΡΡ, Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΠΌΡΠ΅ ΠΏΠΎΠ²Π΅ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ. ΠΡΠ±ΠΎΠΉ Π²ΠΈΠ΄ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ Ρ ΡΠΈΠ»ΡΡΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· Π΄Π²ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ². Π ΡΠΏΠΈΡΠΊΠ΅ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ ΡΠ²Π΅ΡΠ° ΡΠΈΠ»ΡΡΡΠΎΠ² ΡΠ΅ΡΠ΅Π΄ΡΡΡΡΡ. Π ΠΊΠΎΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΠΎΠ² * Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ - ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ (ΡΡΠΎΠΊ, ΠΊΠ»ΠΈΠΏΠ°ΡΡ). ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ: ΠΠ½ΠΎΠΏΠΊΠΈ "1", "2", "3" ... ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ Π½ΠΎΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡ (ΠΏΠΎΡΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ). ΠΡΠ΄Π΅Π»Π΅Π½Π° ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° (ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²Π°Ρ). ΠΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ Π½ΠΎΠΌΠ΅ΡΠ°ΠΌΠΈ.
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ N ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° N'Π½ΠΎΠΉ ΠΏΠΎΡΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ json, ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ Π½Π° Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ Π² ΡΠΎΠΌ ΠΆΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ. ΠΠ½ΠΎΠΏΠΊΠ° N Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΡΠΈ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ N ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ "ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΅ΡΡ" ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° N+1'ΠΎΠΉ ΠΏΠΎΡΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ json, ΠΊ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π°Π½Π½ΡΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ Π² ΡΠΎΠΌ ΠΆΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ. ΠΠ½ΠΎΠΏΠΊΠ° N+1 Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΠ½ΠΎΠΏΠΊΠ° ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ ΠΏΠΎΡΡΠΈΡ Π΄Π°Π½Π½ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ²Π°Ρ Π²ΡΠ²Π΅Π΄Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΠΎΠ»ΡΡΠ΅ Π½ΠΎΠΌΠ΅ΡΠ° 1, ΡΠ»Π΅Π²Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ Π²Π»Π΅Π²ΠΎ. ΠΡΠΈ Π»ΡΠ±ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠΉ ΠΏΠΎΡΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² URL Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ (ΠΈΠ»ΠΈ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ) ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²ΠΈΠ΄Π° ?pageStart=1&pageEnd=3 (ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Ρ 1-ΠΎΠΉ ΠΏΠΎ 3-Ρ ΠΏΠΎΡΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ). ΠΡΠΈ ΠΏΡΡΠΌΠΎΠΌ ΠΎΡΠΊΡΡΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ URL Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ Π²ΠΈΠ΄Π° ?pageStart=1&pageEnd=3 ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΏΠΈΡΠΈ Ρ 1-ΠΎΠΉ ΠΏΠΎ 3-ΡΡ ΠΏΠΎΡΡΠΈΡ.
ΠΠΎΠΌΠ΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎ Π½ΠΎΠΌΠ΅ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π·Π°ΠΏΠΈΡΠΈ. ΠΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡ ΠΎΠΆΠ΅ Ρ Π―Π½Π΄Π΅ΠΊΡ.ΠΠ°ΡΠΊΠ΅ΡΠΎΠΌ: https://market.yandex.ru/catalog/54726/list?hid=91491&track=pieces ------ Π‘ΡΡΠ°Π½ΠΈΡΠ° Π½ΠΎΠ²ΠΎΡΡΠΈ ------ ΠΡΠ΅ΡΠΈΠΊΡ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ Π½ΠΎΠ²ΠΎΡΡΠΈ: article --- Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ --- ΠΠΎΠ²ΠΎΡΡΡ (ΠΈΠ»ΠΈ ΡΡΠ°ΡΡΡ Π² ΡΠΈΡΠΎΠΊΠΎΠΌ ΡΠΌΡΡΠ»Π΅) ΠΈΠΌΠ΅Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ»Ρ Π½ΠΎΠ²ΠΎΡΡΠΈ ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π΄Π°ΡΠ° ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΏΠ΅ΡΠ²ΠΎΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ. ΠΠ»Ρ ΡΠΎΠ±ΡΡΠΈΡ (ΠΌΠ°ΠΊΠ΅Ρ event-item): ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (19 ΠΌΠ°Ρ Ρ 12:00...) ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° "ΡΠ°ΡΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ". ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΎΡΠΎΡΠΌΠ»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ article__title, article__content Ρ ΠΎΠ±ΡΠΈΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠΌ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠΈΠΏ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² html ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΎΠ΄Π½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈ Π½Π΅ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΡΡΡ. Π ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ html ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΈ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Π² Π΄ΡΡΠ³Π° (article__title Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²Π½ΡΡΡΠΈ article__content). Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ, ΠΊΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΠΌ ΠΈ Π½Π΅Π΄Π΅Π»ΠΈΠΌΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.
Π’Π΅ΠΊΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ΅Π³ΠΎΠ²: p, h2, h3, h4, a, ul, li, ol, img, table. Π£ΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΠ΅Π³ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠ΅ΠΊΡΡΠ΅ Π±Π΅Π· ΠΊΠ»Π°ΡΡΠ°. ΠΠ±Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π·Π±ΠΈΡΡ ΡΠ΅Π³Π°ΠΌΠΈ p Π±Π΅Π· ΠΊΠ»Π°ΡΡΠ°. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ΅Π³ΠΎΠ² Π²Π½ΡΡΡΠΈ article__content ΠΏΠΎΠ΄ ΠΎΠ±ΡΠΈΠΉ Π²ΠΈΠ΄. ΠΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅Π³ΠΎΠ² Π½Π° ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. ΠΠ½ΡΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΡΡΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π²ΡΡΠ°Π²ΠΊΠΈ (ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΎΡΡ), ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: ΡΡΡΠ»ΠΊΠ° Π½Π° ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, ΡΠ»Π°ΠΉΠ΄Π΅Ρ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ (ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅), ΡΠΈΡΠ°ΡΠ° Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠ΅ΠΉ Π°Π²ΡΠΎΡΠ° ΠΈ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° Π½Π΅Π³ΠΎ, Π²ΠΈΠ΄Π΅ΠΎ-ΡΠΎΠ»ΠΈΠΊ, Π°ΡΠ΄ΠΈΠΎ-Π·Π°ΠΏΠΈΡΡ. ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²ΠΎΠΊ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Ρ ΠΎΠ±ΡΠΈΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠΌ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: article_content_file, article_content_slider, article_content_quote. ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΡΠ°Π²ΠΎΠΊ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ. ΠΠ°ΠΌΠ΅Π½Π° ΠΌΠ°ΠΊΡΠΎΡΠΎΠ² Π½Π° ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ html ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅ ΠΈ Π² ΠΎΠ±ΡΠ·Π°Π½Π½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π½Π΅ Π²Ρ ΠΎΠ΄ΠΈΡ. Π‘ΡΡΡΠΊΡΡΡΠ° Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π° Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅: http://imgur.
com/a/KIK3J --- Π€ΠΎΡΠΎ-ΡΠ»Π°ΠΉΠ΄Π΅Ρ --- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ. ΠΡΠ»ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π°, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π°ΠΉΠ΄Π°. ΠΡΠ»ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π°ΠΉΠ΄Π°, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½Π΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, Π° ΠΎΡΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΡΠ°Π²ΡΠ°ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΡΠΌΠΈ Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠΎ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΌ ΠΎΠΊΠ½Π΅. ΠΠΈΠ΄ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΠΎ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΌ ΠΎΠΊΠ½Π΅ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΌΠ°ΠΊΠ΅ΡΡ photo: Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄ΠΏΠΈΡΡ, Π°Π²ΡΠΎΡ, Π΄Π°ΡΠ° ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ, ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅, ΠΊΡΠ΅ΡΡΠΈΠΊ Π·Π°ΠΊΡΡΡΠΈΡ. ΠΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠΎΠΊΡΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ΅Π»ΠΎΠΊ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ. --- ΠΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ --- ΠΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ Π½Π° html5, Π±Π΅Π· flash. Π Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° Play (ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ) Π² ΡΠ΅Π½ΡΡΠ΅ ΠΈ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠΎΠ»ΠΈΠΊΠ° Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ. ΠΠΎ ΠΊΠ»ΠΈΠΊΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ. ΠΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²ΠΈΡΡ Π½Π° ΠΏΠ°ΡΠ·Ρ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π³ΡΠΎΠΌΠΊΠΎΡΡΡ, ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ ΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° timeline. ΠΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΡΠ³ video.
--- ΠΡΠ΄ΠΈΠΎ-ΠΏΠ»Π΅Π΅Ρ --- ΠΡΠ΄ΠΈΠΎ-ΠΏΠ»Π΅Π΅Ρ Π½Π° html5, Π±Π΅Π· flash. Π Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° Play (ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ) ΠΈ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π·Π°ΠΏΠΈΡΠΈ. ΠΠΎ ΠΊΠ»ΠΈΠΊΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°ΡΠ΄ΠΈΠΎ. ΠΡΠ΄ΠΈΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²ΠΈΡΡ Π½Π° ΠΏΠ°ΡΠ·Ρ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π³ΡΠΎΠΌΠΊΠΎΡΡΡ ΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° timeline. ΠΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΡΠ³ audio. * ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ½ΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ² ΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠ°ΠΌ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ Π ΠΊΠ°ΡΡΠΎΡΠΊΠ°ΠΌ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² (Π² Ρ.Ρ. ΠΊ Π±Π°Π½Π½Π΅ΡΠ°ΠΌ) ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²Π΅ΡΠ½ΡΠ΅ ΡΠΈΠ»ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ (normal) ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ (hover). Hover Π±Π»ΠΎΠΊΠΎΠ² ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅) (ΠΈΡΠΊΠ»ΡΡΠ°Ρ "ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ", Π³Π΄Π΅ ΡΠΈΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° Π²ΡΡ ΠΊΠ°ΡΡΠΎΡΠΊΡ) ΠΈΠ»ΠΈ Π½Π° Π±ΠΎΠΊΠΎΠ²ΡΡ ΡΠ°ΡΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ mobile. Π€ΠΈΠ»ΡΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π² Π²ΠΈΠ΄Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ CSS ΠΊΠ»Π°ΡΡΠ°, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ²Π΅ΡΡ Ρ ΠΈΠ»ΠΈ Π»ΡΠ±ΡΠΌ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π½Π° HTML/CSS. Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π² Π’Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ CSS ΠΊΠ»Π°ΡΡΠ°.
ΠΠ°Π½Π½Π΅Ρ "ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ" (ΠΎΠ±Π»Π°ΠΊΠ°) Normal: Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ° #4C8FD6 Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 60%. Hover: Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ΠΠ½ΠΎΠ½Ρ, Π€ΠΎΡΠΎΠ°Π»ΡΠ±ΠΎΠΌ, ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ (desktop ΠΈ tablet), Π±Π°Π½Π½Π΅ΡΡ "ΠΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ", "ΠΡΡΠ΅Π»Ρ ΠΠΠΠ’" ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΄Π²ΡΡ ΡΠ²Π΅ΡΠ½ΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ², ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ normal ΠΈ hover. Normal: 1. #4C8FD6 Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 75%. 2. #C0996E Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 82%. Hover: 1. #1763B3 Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 75%. 2. #8F6940 Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 82%. ΠΠΎΠ²ΠΎΡΡΡ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ (mobile) Normal: ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΊΡΡΡΠΎ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π±Π΅Π· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ (Π±Π΅Π»ΡΠΉ #fff ΡΠΎΠ½). Hover: ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ #F1F6FF. ΠΠΎΠ²ΠΎΡΡΡ Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠ΅ΠΉ, ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Normal: ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ°. Hover: Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π½Π° 20% (Π»ΠΈΠ±ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ° ΡΡΡΠ½ΠΎΠ³ΠΎ #000 ΡΠ²Π΅ΡΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 80%) ΠΠΎΠ²ΠΎΡΡΡ ΡΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ Normal: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ Π·Π°Π»ΠΈΠ²ΠΊΠ° ΡΠ²Π΅ΡΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΄Π²ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ². 1. #4C8FD6. 2. #C0996E. Hover: Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π½Π° 20% (Π»ΠΈΠ±ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ° ΡΡΡΠ½ΠΎΠ³ΠΎ #000 ΡΠ²Π΅ΡΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 80%)
ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
6 916 Animation / Buttons / CodepenΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ css Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ css Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°
7 646 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsFlat ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΡΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΡΠΈΠ»Π΅ flat Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π§Π΅ΡΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° Π²ΡΠ±ΠΎΡ: small, normal, medium ΠΈ large.
2 952 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² Π½Π° CSS3
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌΡ ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS3, Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΈ Π²Π°ΡΠΈΠ°Π½Ρ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ iexplorer ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΠΉ.
5 060 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΡΡΠΈΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠΌ IcoMoon App Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ.
4 411 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ CSS3
ΠΠ²Π΅Π½Π°Π΄ΡΠ°ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ CSS3 ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ ΡΠ΅Π±Π΅ Π½Π° Π²ΠΎΠΎΡΡΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΠ»ΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΡΠ΅Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ CSS3 Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ°Π±ΠΎΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π° CSS3 ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΌΠ΅ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΠΈ jΠ°vascript Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ/ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ.
10 173 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsCSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π±Π»ΠΈΠΊΠΎΠΌ
CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠΈΠ΅ Π² ΡΠ΅Π±Π΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° box-shadow, border-radius ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° Π±Π»Π΅ΡΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΊΠΈ. Π‘Π½ΠΎΠ²Π° Π·Π°ΠΌΠ΅ΡΡ, ΡΡΠΎ Π² ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ.
4 797 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsCSS3 ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
Π‘Π΄Π΅Π»Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΊΠΈ Π½Π° css3. ΠΡΠΎ Π°Π½Π°Π»ΠΎΠ³ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
4 511 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠΊΡΠΏΠΊΠΈ Π½Π° CSS3
ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠΊΡΠΏΠΊΠΈ ΡΠΎΠ²Π°ΡΠ°, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ΅Π½Π°, Π° ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ²Π°ΡΠ° Π² ΠΊΠΎΡΠ·ΠΈΠ½Ρ.
3 297 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΠ½ΠΎΠΏΠΊΠΈ Ρ CSS3 ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΡΡΡΠ»ΠΊΠΈ, ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ CSS3.
3 329 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΡ ΡΠΎΡΠΌΡ.
5 682 Π‘ΠΊΡΠΈΠΏΡΡ / ButtonsΠΠ½ΠΎΠΏΠΊΠ° Π‘ΠΊΠ°ΡΠ°ΡΡ Π½Π° CSS3
ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ°Π³ΡΡΠ·ΠΊΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ CSS3 ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΈ ΡΡΠΈΠ»ΡΠ½ΠΎ, Π½ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ CSS3.
ΠΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ
28
55
Π‘ΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎΡΠΌ (button) ΡΠΆΠ΅ ΠΈΠ·ΡΡΠ΄Π½ΠΎ ΠΏΠΎΠ΄Π½Π°Π΄ΠΎΠ΅Π»ΠΎ ΠΈΒ Ρ ΠΎΡΠ΅ΡΡΡ ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠ°ΠΊ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΡΠΈΡΠΊΡΠ°ΡΠΈΡΡ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΡΒ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΠΠ°ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ CSS ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΠ°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ (button) ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ.
ΠΠΈΠΆΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΏΠ°ΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ΅Π½ΡΡ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΡ ΡΠΊΡΠΈΠΏΡΠ°. ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΊΠΈ Π½Π° ΠΎΠ΄Π½Ρ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈ ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΉΡΡ ΠΏΠΎΠ΄Β ΠΊΡΡΡΠΎΡΠΎΠΌ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ²Π΅ΡΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ (button), ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΠΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΠΊΡ:
HTML ΠΊΠΎΠ΄:
<styleΒ type="text/css">
.buttonΒ {
Β Β Β Β padding:Β 3pxΒ 15px;
Β Β Β Β margin:Β 15px;
Β Β Β Β cursor:Β pointer;
Β Β Β Β border:Β 0px;
Β Β Β Β background-color:Β #339900;
Β Β Β Β font-size:Β 18px;
Β Β Β Β color:Β #000000;
Β Β Β Β box-shadow:Β 0Β 0Β 5pxΒ #FF00FF;
Β Β Β Β -moz-box-shadow:Β 0Β 0Β 5pxΒ #FF00FF;
Β Β Β Β -ms-box-shadow:Β 0Β 0Β 5pxΒ #FF00FF;
Β Β Β Β -o-box-shadow:Β 0Β 0Β 5pxΒ #FF00FF;
Β Β Β Β -webkit-box-shadow:Β 0Β 0Β 5pxΒ #FF00FF;
}
.
button:hoverΒ {
Β Β Β Β box-shadow:Β 0Β 0Β 12pxΒ #6633FF;
Β Β Β Β -moz-box-shadow:Β 0Β 0Β 12pxΒ #6633FF;
Β Β Β Β -o-box-shadow:Β 0Β 0Β 12pxΒ #6633FF;
Β Β Β Β -ms-box-shadow:Β 0Β 0Β 12pxΒ #6633FF;
Β Β Β Β -webkit-box-shadow:Β 0Β 0Β 12pxΒ #6633FF;
}
</style>
ΠΠ½ΠΎΠΏΠΊΠΈ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
HTML ΠΊΠΎΠ΄:
<inputΒ class="button"Β type="submit"Β value="ΠΡΠΏΡΠ°Π²ΠΈΡΡ">
<inputΒ class="button"Β type="submit"Β value="ΠΡΠΌΠ΅Π½ΠΈΡΡ">
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΠΠ°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΡΠ°Π½ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²ΡΠΌΠΈ ΠΈ ΡΡΠΊΠΈΠΌΠΈ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠΎΒ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ.
ΠΠ°ΡΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ: 13:48:50 04.10.2012 Π³.
ΠΠΎΡΠ΅ΡΠ΅Π½ΠΈΠΉ: 14234 ΡΠ°Π·(Π°).
ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π²ΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΡ ΠΎΠ΄ΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠΎΠ΄Π΅ΡΠ°ΡΠΈΡ!
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡ, ΡΠΎ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠΎΡΡΠΌΠ΅.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠ΅Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ²Π΅Ρ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ ΠΠ°Ρ Π²ΠΎΠΏΡΠΎΡ.
ΠΠ½ΠΎΠΏΠΊΠΈ Π² Bootstrap Β« ΠΠ°ΡΠΊ ΠΈ ΠΠ°ΡΡΠ°.Π Ρ. ΠΠ°ΠΏΠΈΡΠΊΠΈ ΠΎΡΡΠ°-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°
Bootstrap ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π·Π°Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ 7 Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π½Π°ΠΆΠ°ΡΡΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΠΊΠ»Π°ΡΡΠ°ΠΌ:
- ΠΠ±ΡΡΠ½Π°ΡΒ — btn-default
- ΠΡΠ½ΠΎΠ²Π½Π°Ρ — btn-primary
- ΠΠ½ΠΎΠΏΠΊΠ° Ok — btn-success
- Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ — btn-info
- ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ — btn-warning
- ΠΡΠΌΠ΅Π½Π° — btn-danger
- Π‘ΡΡΠ»ΠΊΠ° — btn-link
Β
ΠΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΎΠΊ
<button type="button">ΠΠ±ΡΡΠ½Π°Ρ</button> <button type="button">ΠΡΠ½ΠΎΠ²Π½Π°Ρ</button> <button type="button">ΠΠ½ΠΎΠΏΠΊΠ° Ok</button> <button type="button">Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅</button> <button type="button">ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅</button> <button type="button">ΠΡΠΌΠ΅Π½Π°</button> <button type="button">Π‘ΡΡΠ»ΠΊΠ°</button>
Β
Π ΠΈΡ.1. Π’ΠΈΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Bootstrap
Β
Π‘ΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Bootstrap ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <button>, <input type=»button»> ΠΈ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠ°ΠΌ <a>. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΊΠ»Π°ΡΡ .btn ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ. ΠΠ»Ρ ΡΡΠ³Π° <a> ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
<a href="#">Attention!</a>
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π΄Π»Ρ ΡΡΠ³ΠΎΠ² <input> ΠΈ <button>.
Β
Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap
ΠΡΠΎΠΌΠ΅ ΡΠ²Π΅ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π Bootstrap Π·Π°Π»ΠΎΠΆΠ΅Π½ΠΎ 4 ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ β btn-lg, btn-md, btn-sm, btn-xs:
<button type="button">ΠΠΎΠ»ΡΡΠ°Ρ</button> <button type="button">Π‘ΡΠ΅Π΄Π½ΡΡ</button> <button type="button">ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ</button> <button type="button">ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ</button>
Β
Π ΠΈΡ.2. Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap
Β
ΠΠ°Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΒ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½ΠΎΠΏΠΊΠΈ Π² HTML ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ»Π°ΡΡ Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π² Bootstrap Π΅ΡΡΡ ΠΊΠ»Π°ΡΡ . btn-block. ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .btn-block Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ 100% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Β
ΠΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΈ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΄Π»Ρ Π½Π΅Π΅ ΠΊΠ»Π°ΡΡ .active, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .disabled. ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΒ Β ΠΊΠ»Π°ΡΡΠΎΠΌ .disabled Π±ΡΠ΄ΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ Π½Π°ΠΆΠ°ΡΠΈΡ.
Π ΠΈΡ.3. ΠΠΊΡΠΈΠ²Π½Π°Ρ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Β
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ΅Π³Π° HTML 4.0
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅
ΠΠ»Ρ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ HTML 4.0, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ ΡΡΠΎΠ΄Π»ΠΈΠ²ΠΎΠ³ΠΎ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠΎΠ½Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΈΠΊΠΎΡΠ½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ ΠΊ CSS (ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ), Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°:
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Π»Π°Π΄Π½ΠΎ?
Π‘ΠΏΠ°ΡΠΈΡΠ΅ Π½Π°ΡΡ ΠΏΠ»Π°Π½Π΅ΡΡ!
ΠΠΎΠ΄ Π²ΠΎΠ΄ΠΎΠΉ
Π€ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ, ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π² ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΠΈΠ»Ρ Π½Π° Β«ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉΒ»:
ΠΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½!
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ / Π²ΡΡΠΎΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π²Π½ΡΠΌΠΈ
ΡΠ°Π·ΠΌΠ΅ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§Π°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π²Ρ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ Π²ΡΡΡΠ½ΡΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π°ΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅. Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ
ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ΅ΡΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ:
H Ρ !