Bootstrap Breadcrumb β ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌΡΡ Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ (Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠ΅ΠΊ) Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Π½Π° Bootstrap 3 ΠΈ 4 Π²Π΅ΡΡΠΈΠΈ.
ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ (Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠ΅ΠΏΠΎΡΠΊΠΈ, breadcrumbs) β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ.
ΠΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π² ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ Π½Π΅ΠΉ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ°Π·Π΄Π΅Π»Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ Π² ΠΊΠ°ΠΊΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΡΠ΅ ΡΠ΅ΠΊΡΠΈΠΈ ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» Π²Ρ ΠΎΠ΄ΠΈΡ. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΡΠ΅ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π΄Π²Π° ΡΡΠΎΠ²Π½Ρ Π²ΡΡΠ΅ ΠΏΠΎ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ°Ρ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΈΠ· ΡΠ΅Π³ΠΎ ΠΎΠ½Π° ΡΠΎΡΡΠΎΠΈΡ ΠΈ ΡΡΠΎ Π² Π½Π΅ΠΉ Π΅ΡΡΡ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ β ΡΡΠΎ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΡΡΡΠΊΡΡΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Π² Bootstrap
Π ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Bootstrap ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Breadcrumb. ΠΠΎ ΡΡΡΠΈ ΡΡΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΡΠ΅ΡΠ΅Π· ΠΊΠ»Π°ΡΡΡ.
HTML ΠΊΠΎΠ΄ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Π² Bootstrap 4:
<ol> <li><a href="#">ΠΠ°ΡΠ°Π»ΠΎΠ³</a></li> <li><a href="#">Π‘ΠΌΠ°ΡΡΡΠΎΠ½Ρ</a></li> <li>6.47" Π‘ΠΌΠ°ΡΡΡΠΎΠ½ Huawei P30 Pro 256 ΠΠ ΡΠ΅ΡΠ½ΡΠΉ</li> </ol>
ΠΠ· ΠΊΠΎΠ΄Π° Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Ρ
Π»Π΅Π±Π½ΡΡ
ΠΊΡΠΎΡΠ΅ΠΊ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <ol>
Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ breadcrumb
. ΠΠ°Π»Π΅Π΅ Π² <ol>
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <li>
Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ breadcrumb-item
. ΠΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ Π΄ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π² <li>
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ <a>
Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ href
ΠΡΠ»ΠΈ Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <li>
Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ active
. Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ»ΠΊΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ, Ρ.ΠΊ. Π² Π½Π΅ΠΉ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΌΡΡΠ»Π°, Π΄Π° ΠΈ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ SEO ΡΡΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
Π Bootstrap 3 Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ (ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°) Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ breadcrumb-item
:
<ol> <li><a href="#">ΠΠ°ΡΠ°Π»ΠΎΠ³</a></li> <li><a href="#">Π‘ΠΌΠ°ΡΡΡΠΎΠ½Ρ</a></li> <li>6.47" Π‘ΠΌΠ°ΡΡΡΠΎΠ½ Huawei P30 Pro 256 ΠΠ ΡΠ΅ΡΠ½ΡΠΉ</li> </ol>
ΠΠ»Ρ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° Π² Bootstrap CSS (Β«bootstrap.cssΒ»
) Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ ::before ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
/* Bootstrap 3 */ .breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; } /* Bootstrap 4 */ .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; content: "/"; }
ΠΡΠΈΠΌΠ΅ΡΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ:
<!-- Bootstrap 4 --> <ol> <li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#">ΠΠΎΡΡΠ±ΡΠΊΠΈ, ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ</a></li> <li><a href="#">ΠΠΎΡΡΠ±ΡΠΊΠΈ</a></li> <li><a href="#">ΠΠΎΡΡΠ±ΡΠΊΠΈ Apple MacBook</a></li> <li><a href="#">Apple</a></li> </ol>
<!-- Bootstrap 4 --> <ol> <li><a href="#">ΠΠ°ΡΠ°Π»ΠΎΠ³</a></li> <li><a href="#">ΠΠΎΠΌΠΏΠ»Π΅ΠΊΡΡΡΡΠΈΠ΅, ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΈ</a></li> <li><a href="#">ΠΠ΅ΡΠΈΡΠ΅ΡΠΈΡ ΠΈ Π°ΠΊΡΠ΅ΡΡΡΠ°ΡΡ</a></li> <li><a href="#">ΠΡΡΠΈ</a></li> <li>ΠΠΎΠΌΠΏΠ°ΠΊΡΠ½Π°Ρ ΠΌΡΡΡ ΠΏΡΠΎΠ²ΠΎΠ΄Π½Π°Ρ Defender Patch MS-759 ΡΠ΅ΡΠ½ΡΠΉ</li> </ol>
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ
ΠΠ° ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ Π½Π° Bootstrap, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ΄ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΡΡΠΈΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ.
ΠΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ±ΡΠ°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Breadcrumb ΠΈΠ· Bootstrap. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ CSS ΡΠ°ΠΉΠ»Π° ΡΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ Π²Π°Ρ Π² Β«bootstrap.cssΒ» ΠΎΡΡΠ°Π½ΡΡΡΡ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅ Π²Ρ Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅. ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ±ΠΎΡΠΊΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ (Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Bootstrap 3, ΡΠΎ Π·Π΄Π΅ΡΡ).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ:
HTML ΡΡΡΡΠΊΡΡΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π²ΠΈΠΌ ΠΊΠ°ΠΊ Π² Bootstrap 4:
<ol> <li><a href="#">ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ</a></li> <li><a href="#">pdoTools</a></li> <li>ΠΠ°ΡΡΠ΅Ρ</li> </ol>
ΠΠ°ΠΏΠΈΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ:
/* ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ */ .breadcrumb { list-style: none; display: flex; padding-left: 0px; } .breadcrumb-item>a, .breadcrumb-item.active { color: #fff; display: block; background: #7b1fa2; text-decoration: none; position: relative; height: 34px; line-height: 34px; padding: 0 10px 0 5px; text-align: center; margin-right: 23px; user-select: none; } .breadcrumb-item:first-child>a { padding-left: 15px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .breadcrumb-item:last-child>a, .breadcrumb-item.active { border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 0; padding-right: 15px; } .breadcrumb-item:first-child>a::before, .breadcrumb-item:last-child>a::after { border: none; } .breadcrumb-item>a::before, .breadcrumb-item>a::after, .breadcrumb-item.active::before { content: ""; position: absolute; top: 0; border: 0 solid #7b1fa2; border-width: 17px 10px; width: 0; height: 0; } .breadcrumb-item>a::before, .breadcrumb-item.active::before { left: -20px; border-left-color: transparent; } .breadcrumb-item>a::after { left: 100%; border-color: transparent; border-left-color: #7b1fa2; } . breadcrumb-item>a:hover { background-color: #6a1b9a; } .breadcrumb-item>a:hover::before { border-color: #6a1b9a; border-left-color: transparent; } .breadcrumb-item>a:hover::after { border-left-color: #6a1b9a; } .breadcrumb-item.active { color: #6a1b9a; background-color: #f3e5f5; } .breadcrumb-item.active::before { border-color: #f3e5f5; border-left-color: transparent; }
ΠΠ°Π·ΠΎΠ²ΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ CSS
ΠΠ»Π°Π²Π½Π°Ρ Β» ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°ΠΠ° ΡΡΠ΅Π½ΠΈΠ΅ 5 ΠΌΠΈΠ½ ΠΡΠΎΡΠΌΠΎΡΡΠΎΠ² 143 ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ
Primer CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°ΠΌ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΈΒ BreadcrumbsΒ β ΠΎΠ΄ΠΈΠ½ ΠΈΠ·Β Π½ΠΈΡ
. ΠΒ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡΒ ΡΠ·Π½Π°Π΅ΠΌ ΠΎΒ ΠΏΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΡ
ΡΡΡ
Π°ΡΡΡ
. Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π²Β Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ. ΠΠ»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΡΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ. 18.0.0/dist/primer.css»/>
</
head
>
Β
<
body
style
=
"margin:100px"
>
Β Β Β Β
<
div
class
=
"text-center"
>
Β Β Β Β Β Β Β Β
<
h2
class
=
"color-fg-success"
> GeeksforGeeks </
h2
>
Β Β Β Β Β Β Β Β
<
h4
><
u
>Primer CSS Breadcrumbs</
u
></
h4
><
br
/>
Β Β Β Β
</
div
>
Β
Β Β Β Β
<
div
class
=
"d-flex flex-justify-center"
>
Β Β Β Β Β Β Β Β
<
div
aria-label
=
"Breadcrumb"
>
Β Β Β Β Β Β Β Β Β Β Β Β
<
ol
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
>Home Section</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
>Previous Section</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item breadcrumb-item-selected"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
aria-current
=
"page"
>Section selected</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β
</
ol
>
Β Β Β Β Β Β Β Β
</
div
>
Β Β Β Β
</
div
>Β Β Β Β
Β Β Β Β
<
br
/>
Β Β Β Β
<
div
class
=
"d-flex flex-justify-center"
>
Β Β Β Β Β Β Β Β
<
div
aria-label
=
"Breadcrumb"
>
Β Β Β Β Β Β Β Β Β Β Β Β
<
ol
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
>Home</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
>Geeks for Geeks</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
li
class
=
"breadcrumb-item breadcrumb-item-selected"
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
<
a
href
=
"#"
aria-current
=
"page"
>Articles</
a
>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
</
li
>
Β Β Β Β Β Β Β Β Β Β Β Β
</
ol
>
Β Β Β Β Β Β Β Β
</
div
>
Β Β Β Β
</
div
>
</
body
>
Β Β Β
</
html
>
ΠΡΡ ΠΎΠ΄:
20 Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ CSS
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° HTML ΠΈ CSS (ΠΏΡΠΎΡΡΡΡ , Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ , ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΡ , ΡΠ²Π΅ΡΠ½ΡΡΡΡ ΠΈ Ρ. Π΄.) ΠΈΠ· codepen ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ². ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π΅ΠΊΠ°Π±ΡΡΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠ².
- ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ Bootstrap
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠ·Π°ΠΉΠ½ ΠΏΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΡ ΡΡΡ Π°ΡΠ΅ΠΉ
ΠΠΈΠ·Π°ΠΉΠ½ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ (ΠΏΠ΅ΡΠ΅ΠΊΠΎΡ, ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΡΡΡΠ΅ΠΊΡ ΡΠ΅Π»ΡΠΊΠ°).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ Ρ Ρ Π»Π΅Π±Π½ΡΠΌΠΈ ΠΊΡΠΎΡΠΊΠ°ΠΌΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
Π ΠΊΠΎΠ΄Π΅
Π Π΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° β Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ Π΄Π»Ρ Π½Π°ΡΠ΅Π·ΠΊΠΈ CSS
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΡΠ½Π΅ΠΌ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ΅ΠΊΡΡΠΈΠΌ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ°
ΠΡΠΎΡΡΡΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ CSS
Π ΠΊΠΎΠ΄Π΅
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΉΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ
ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ. Π¦Π²Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠ΅Π½ΠΈ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Ρ. Π΄. Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap .
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ Ρ Β«ΡΠΌΠ½ΡΠΌΒ» ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ (Flex)
ΠΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ, ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ Π½ΠΈΡ Π½Π΅ ΠΎΡΡΠ°Π»ΠΎΡΡ ΠΌΠ΅ΡΡΠ°.
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ Ρ Π»Π΅Π±Π½ΡΠΌ ΠΊΡΠΎΡΠΊΠ°ΠΌ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ°Π΅ΡΡΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«ΠΠ°Π·Π°Π΄Β». Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π² Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΠΊΡΡΡΠ΅, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·Π΄Π΅ΠΉΡΡΠ²ΡΡ Π½Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ CSS
Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ API.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘ΡΠ°ΡΠΎΠΌ ΠΠ΅Π»ΡΠ½ΠΈΠΊΠΎΠ²ΡΠΌ
15 ΠΈΡΠ½Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈΠΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠΈΡΡΠΎΠ³ΠΎ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ»ΠΈΠ½Π½ΠΎΠΌ Π‘ΠΌΠΈΡΠΎΠΌ
30 ΠΌΠ°Ρ 2017 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ GIF: Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈΡ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠ½ΠΈ Π‘Π°Π½ΡΠΎΡ
15 ΠΈΡΠ»Ρ 2016 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Breadcrumb, Progress TrackerΠ₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ, ΡΡΠ΅ΠΊΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Material Design, ΡΡΠ΅ΠΊΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°.
ΠΠ²ΡΠΎΡ Π¨ΡΡΠΌ Π§Π΅Π½
30 ΠΈΡΠ»Ρ 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π‘Π²Π΅ΡΠ½ΡΡΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈΠ‘Π²Π΅ΡΠ½ΡΡΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
Π‘ΠΏΠΈΡΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΡΠ΅ΠΏΠΎΡΠ΅ΠΊ ΡΠ²Π΅ΡΠ½ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΠ°Π½ΠΈΡ, ΠΊΡΠΎΠΌΠ΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ, Ρ ΠΏΠΎΠ»Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ/ΡΠΎΠΊΡΡΠ΅.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘ΠΊΠ°ΠΉ
4 ΠΌΠ°ΡΡΠ° 2015 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Ρ
Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ»ΠΈΠ²Π΅ΡΠΎΠΌ ΠΠ½ΠΎΠ±Π»ΠΈΡ
ΠΎΠΌ
2 Π°ΠΏΡΠ΅Π»Ρ 2014 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ
Demo GIF: Tiny CSS3 BreadcrumbTiny CSS3 Breadcrumb
ΠΡΠΎΡΠ΅ΡΠ½Π°Ρ ΠΊΡΡΠ³Π»Π°Ρ Ρ
Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½ΠΎ Π’Π΅ΡΡΡΠ΅
4 ΠΎΠΊΡΡΠ±ΡΡ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π Π°ΡΡΠΈΡΡΠ΅ΠΌΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈΠ Π°ΡΡΠΈΡΡΠ΅ΠΌΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡ Ρ Π΄Π»ΠΈΠ½Π½ΡΠΌΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π€Π΅Π»ΠΈΠΏΠ΅ Π ΠΠ΅ΡΠ΅Ρ
3 ΠΎΠΊΡΡΠ±ΡΡ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° CSS3Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° CSS3
ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° HTML ΠΈ CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½ΠΎ Π’Π΅ΡΡΡΠ΅
30 ΡΠ΅Π½ΡΡΠ±ΡΡ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΡΠΎΠ³ΠΎ CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΊΠ΅Π²
16 Π°ΠΏΡΠ΅Π»Ρ 2013 Π³.
ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄
42 ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ CSS (ΠΠΠ‘ΠΠΠΠ’ΠΠ«Π ΠΊΠΎΠ΄)
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ Ρ Π»Π΅Π±Π½ΡΠΌ ΠΊΡΠΎΡΠΊΠ°ΠΌ Pixel perfect
Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Π² ΡΠ΅ΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ Ρ 2 Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΈΡΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ
ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ Π΄Π΅Π»Π°ΡΡ Π²Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½ΡΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΠΎΡΡΠ°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Skew
ΠΡΠΎΡΡΠ°Ρ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ°, ΠΈΠΌΠ΅Π΅Ρ 2 Π²Π°ΡΠΈΠ°Π½ΡΠ°, Π² ΠΎΠ±ΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS skew.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ΅ΠΏΠΎΡΠΊΠ°ΠΌ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΊΠΎΠ΄Π° Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ΅ΠΏΠΎΡΠΊΠ°ΠΌ Ρ ΠΏΡΠΎΡΡΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΡΡΠΉ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Flat CSS3 Breadcrumb
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ CodePen Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ, Π½ΠΎ ΡΠΈΡΡΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ ΠΏΠΎ ΡΠ΅ΠΏΠΎΡΠΊΠ°ΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² ΠΏΠ»ΠΎΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° β Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠΉ, Π½ΠΎ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠΉ Ρ Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ Ρ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ Π² ΠΎΡΡΠ΅Π½ΠΊΠ°Ρ ΡΠ΅ΡΠΎΠ³ΠΎ ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΡΡΠ΅Π»ΠΎΠ²ΠΈΠ΄Π½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ°
ΠΡΠΎΡ CodePen ΠΈΠ· ΡΡΡΠ΅Π»ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΉ Ρ Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ Ρ ΠΏΡΠΎΡΡΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° β ΡΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΡΡΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΠ΅ΡΡ, Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Pug
Stylus
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Ρ ΡΠ²Π΅ΡΠ°ΠΌΠΈ Material Design
Π ΡΡΠΎΠΌ CodePen Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΡΠ΅ΠΊΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°/ΡΡΠ΅ΠΏΠΏΠ΅Ρ/Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ²Π΅ΡΠ° Material Design ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
JavaScript
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Pug
Stylus
TypeScript
90 002 ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡTiny CSS3 Round Breadcrumb
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠΉ Ρ Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π‘ΠΎΡΡΠ°Π²:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ
Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΊΠΎΠ΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ 4 ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ° Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ ΡΠΎ ΡΡΡΠ΅Π»ΠΎΡΠΊΠ°ΠΌΠΈ, 2 ΡΠ²Π΅ΡΠ»ΡΡ ΠΈ 2 ΡΠ΅ΠΌΠ½ΡΡ .
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΡΠΈΠ»Ρ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Force Framework
CodePen ΠΈΠ· 7 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ²Π΅ΡΠ½ΡΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Force.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Force framework
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎ
ΠΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅/Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Π΄Π»Ρ ΠΎΠΏΠ»Π°ΡΡ ΠΊΡΠ΅Π΄ΠΈΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΎΠΉ
ΠΡΠΎ ΡΠΊΠΎΡΠ΅Π΅ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ ΠΎΠΏΠ»Π°ΡΡ ΠΊΡΠ΅Π΄ΠΈΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΎΠΉ, Π½ΠΎ Π΅Π³ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
JavaScript
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΡΠΏΠΈΡΠΊΠΎΠΌ
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠΈ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΡΠΏΠΈΡΠΊΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Tachyons CSS Toolkit
Bootstrap
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎ
ΠΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Pure CSS
ΠΡΠΆΠ½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π²Π°ΡΠΈΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠΊΠ°Ρ ? Π£ ΡΡΠΎΠ³ΠΎ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ .
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ»ΠΎΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
3 Π²Π°ΡΠΈΠ°Π½ΡΠ° Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΏΠ»ΠΎΡΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΡΡΠ΅Π»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Bootstrap Breadcrumb, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Material Design ΠΈ Bootstrap 4
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap, Π² ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΊΠΎΠ΄Π° Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ 12 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ²Π΅ΡΠ½ΡΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠΌΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Font Awesome
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Topcoatish Breadcrumb
Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Ρ ΡΠ΅ΠΌΠ½ΡΠΌ ΠΈ ΡΠ²Π΅ΡΠ»ΡΠΌ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ Ρ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΏΠΎΠΈΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ»ΠΎΡΠΊΠ°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
Π ΡΡΠΎΠΌ CodePen Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΌΡΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π₯Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΠ²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ
Π₯Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΏΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ
ΠΠ°ΠΌ Π½ΡΠΆΠ½Ρ ΠΏΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²? Π ΡΡΠΎΠΌ CodePen Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ 3 ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Ρ Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅ ΡΡΡ Π°ΡΠΈ Π² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π½ΠΎΠ΅, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅, ΡΡΠ° ΠΏΠ°Π½ΠΈΡΠΎΠ²ΠΎΡΠ½Π°Ρ ΡΡΡ Π°ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Π°ΡΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΠΎΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Aqua CSS ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Aqua CSS
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Ribbon Breadcrumb Trail
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠΎ ΡΡΠ°ΡΠΎΠΉ Π»Π΅Π½ΡΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠΎΠΉ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π°ΡΡΠΈΡΡΡΡΠ°ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡΠΎΡΠΊΠΈ, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΠΎΠΉΡΠΈ ΡΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π²Π΅ΡΡΠΈΠΈ Ρ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π’ΠΎΡΠ΅ΡΠ½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
ΠΡΠΎ Π½Π°ΠΊΠ»ΠΎΠ½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠ΅ΠΊ Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΎΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Ρ ΠΊΠΎΠ½ΡΡΡΠ°ΠΌΠΈ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Ρ ΠΎΠ±Π²Π΅Π΄Π΅Π½Π½ΡΠΌΠΈ, Π½Π°ΠΊΠ»ΠΎΠ½Π΅Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠ΅Π»ΠΎΠ²ΠΈΠ΄Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
Haml
SCSS
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ
Π ΡΡΠΎΠΌ CodePen ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΉΡΠΈ 4 Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ, Π½ΠΎ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠΌΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ CodePen, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ 5 Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ Ρ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ, Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Π΅ΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘Π²Π΅ΡΠ½ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΡΠ»ΠΈ ΠΌΠ΅ΡΡΠ° Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΌΠ°Π»ΠΎ, ΡΡΠ° ΡΠ²Π΅ΡΠ½ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΡΡ Π²Π°ΡΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°ΠΊΠ»ΠΎΠ½Π½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ°
3 Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ Π½Π°ΠΊΠ»ΠΎΠ½ΠΎΠΌ, Π½ΠΎ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΡΡ ΡΠΆΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΈΠ·Π°ΠΉΠ½ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠ΅ΠΊ (ΠΠ΅ΡΠ΅ΠΊΠΎΡ, Π Π°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΡΡΡΠ΅ΠΊΡ ΡΠ΅Π»ΡΠΊΠ°)
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ 3 ΠΏΠΎΡ ΠΎΠΆΠΈΡ Ρ Π»Π΅Π±Π½ΡΡ ΠΊΡΠΎΡΠΊΠΈ, Π½ΠΎ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
«Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ» Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π·Π°ΠΊΠ°Π·Π°
«Π₯Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ», ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΊΠ°ΡΡΡ, Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΠΏΠΈΡΠΎΠΊ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠ΅ΠΊ
ΠΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 9 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅ΠΏΠΎΡΠ΅ΠΊ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΉΡΠΈ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ ΠΈ ΡΡΠΈΠ»Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π ΠΎΠ·ΠΎΠ²Π°Ρ ΠΊΡΠΎΡΠΊΠ°
ΠΡΠ»ΠΈ ΡΠΎΠ·ΠΎΠ²ΡΠΉ β Π²Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ ΡΠ²Π΅Ρ, ΡΡΠ° ΠΊΡΠΎΡΠΊΠ° Π΄Π»Ρ Π²Π°Ρ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Chevron Breadcrumbs
ΠΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² ΡΡΠΈΠ»Π΅ ΡΠ΅Π²ΡΠΎΠ½Π° Ρ ΡΠΎΠ½ΠΊΠΈΠΌ ΡΠ΅ΡΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΠΏΡ
SCSS
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°Ρ Π°Π»ΡΠ½ΡΠ΅ Ρ Π»Π΅Π±Π½ΡΠ΅ ΠΊΡΠΎΡΠΊΠΈ
ΠΡΠ΅Π°ΡΠΈΠ²Π½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½Π°Ρ Ρ Π»Π΅Π±Π½Π°Ρ ΠΊΡΠΎΡΠΊΠ° Ρ ΠΏΡΠΈΡΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ΅ΠΊΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ:
HTML
CSS
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π°ΡΡΠΈΡΡΠ΅ΠΌΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Π΄Π»Ρ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ, ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.