Bootstrap ΠΡΡΡΡΡΠ°ΠΏ 4 Π£ΡΠ΅Π±Π½ΠΈΠΊ Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ Π½Π° ΡΡΡΡΠΊΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΡ
Bootstrap 4 β ΡΡΠΎ Π½ΠΎΠ²Π΅ΠΉΡΠ°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ HTML, CSS ΠΈ JavaScript Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
Bootstrap 4 Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ!
ΠΠ°ΡΠ½ΠΈΡΠ΅ ΡΡΠΈΡΡ Bootstrap 4 ΡΠ΅ΠΉΡΠ°Ρ Β»
Start Bootstrap 4
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΎΡ ΡΡΠ΅Π±Π½ΠΈΠΊ Bootstrap 4 ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΡΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Bootstrap 4.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ Bootstrap 4
Β Β ΠΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ Bootstrap ΡΡΡΠ°Π½ΠΈΡΠ°
Β ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ!
<div>
Β <div>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 1</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ
..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β </div>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 2</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ
..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 3</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ ..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β </div>
Β </div>
</div>
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π½Π° «ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅» ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 β Π½ΠΎΠ²Π΅ΠΉΡΠ°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap; Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡΡ.
Bootstrap 4 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅, ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠ΅ Π²ΡΠΏΡΡΠΊΠΈ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΏΠ»Π°ΡΡΠΎΡΠΌ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Internet Explorer 9 ΠΈ Π²Π½ΠΈΠ· Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE8-9, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap 3. ΠΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap, ΠΈ ΠΎΠ½Π° ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π΄Π»Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΠΊ Π½Π΅ΠΌΡ.
ΠΠ°Π·ΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Bootstrap 4
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Ρ Bootstrap 4. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ, ΡΠΎΡ ΡΠ°
Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ Bootstrap | ΠΠ’ Π¨Π΅Ρ
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ
18.01.2020, 22:44
ΠΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ! ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠΈΠ²Π΅Π΄ΠΈΡΠ΅ ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ° ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π² mFilter2 Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡβ¦
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ
17.01.2020, 23:07
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ ΠΠ°ΠΌ Π·Π° ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ ΠΎΡΠ²Π΅Ρ.
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ ΠΠ°Π»ΡΡΠ΅Π²
17.01.2020, 12:50
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Google Π½Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ JavaScript ΠΊΠ°ΠΊ Googlebot. ΠΠΎΡΡΠΎΠΌΡ Π²Π°Ρ ajax-ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈβ¦
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ! Π‘ΠΊΡΠΈΠΏΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ, Π½ΠΎ Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Ρ <iframe ΡΡΠΊ=Β«index1.htmlΒ»> ΠΈ Π΄Π°Π»Π΅Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Ρ script, ΡΠΊΡΠΈΠΏΡ ΠΎΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΡβ¦
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ
15.01.2020, 11:25
ΠΠΎΠΏΡΠΎΡ ΡΠ½ΡΡ, ΡΠ΅ΡΠΈΠ» Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ°Π²ΠΊΠΎΠΉ ΠΊΠ»Π°ΡΡΠ° SMTP.
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ ΠΠ°Π»ΡΡΠ΅Π²
14.01.2020, 03:33
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅! ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π²ΠΌΠ΅ΡΡΠΎ 500 Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΡΠ½ΠΊΡΠΈΡ, Π·Π°Π΄Π°Π½Π½Π°Ρ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ΅ setTimeout,β¦
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ ΠΠ°Π»ΡΡΠ΅Π²
11.01.2020, 11:00
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°! Π’Π°ΠΌ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ, Ρ.Π΅. ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΡΡΡΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ (ΡΠ»Π΅ΠΏΠΎΠΊ),β¦
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ
10.01.2020, 03:12
ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ, Π±Π°Π³ Ρ ΠΊΠΎΠ½Π½Π΅ΠΊΡΠΎΡΠΎΠΌ Π±ΡΠ» Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ, ΡΠ΅ΠΉΡΠ°Ρ Π²ΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠ° Π²Π΅ΡΡΠΈΡ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΡΠ΅ΡΡΠΈΠ» ΠΈ ΠΏΡΡΠ°Π»ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π±ΡΠ»Π° Π½ΠΎΠ²Π°Ρ ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡβ¦
ΠΠ»Π°Π΄ΠΈΡΠ»Π°Π² ΠΠΎΠΏΠ΅ΡΠ½ΠΈΠΊΠΎΠ²
09.01.2020, 01:14
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅. ΠΡΠΆΠ΅Π½ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Ρ Π΅Π»ΠΏ. ΠΠΎΠ²ΠΈΡΠΎΠΊ Π² js. ΠΡΡΡ ΡΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ: 1)ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Ρ Π°ΠΏΠΈ2) ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΠΌΠ΅ΡΡΡΠ΅Π² 3) ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡΡβ¦
Oleksandr
03.01.2020, 16:56
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΠΎΠ»ΠΎΡΠΎΡΠΊΠΈ, ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°: ΠΊΠ°ΠΊ Π·Π΄Π΅ΡΡ, ΡΠΎ-Π΅ΡΡΡ ΠΊΠ°ΠΊ Π²ΡΠ½Π΅ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ Π·Π° ΠΏΠ΅ΡΠ΅Π΄Π΅Π»Ρ Π±Π»ΠΎΠΊΠ°: getinstance.info/articles/css/responsive-menu/ <divβ¦
<h2> — <h6> ΠΈΠ»ΠΈ .h2 — .h6 |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² h2 — h6 .ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <h2>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ h2</h2> <p>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2 ΡΡΠΎΠ²Π½Ρ</p> |
<small> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠ²Π΅Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <h2>h2<small>h2</small></h2> <p>2<small>2</small></p> |
.small |
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° (85% ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°). ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p calss="small"> ΠΠ±Π·Π°Ρ Ρ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ°. </p> |
.lead |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π°Π±Π·Π°ΡΠ° ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p calss="lead"> ΠΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΉ Π°Π±Π·Π°Ρ. </p> |
<mark> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <mark>Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</mark>. </p> |
<del> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΡΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <del>ΡΠ΄Π°Π»ΡΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</del>. </p> |
<s> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΆΠ΅ ΡΡΡΠ°ΡΠΈΠ» ΡΠ²ΠΎΡ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <s>ΡΠ΅ΠΊΡΡ, ΡΡΡΠ°ΡΠΈΠ²ΡΠΈΠΉ ΡΠ²ΠΎΡ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ</s>. </p> |
<ins> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <ins>Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</ins>. </p> |
<u> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <u>ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ ΡΠ΅ΠΊΡΡ</u>. </p> |
<strong> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ ΡΠ΅ΠΊΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π΅Π³ΠΎ ΠΆΠΈΡΠ½ΡΠΌ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <strong>ΠΆΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ</strong>. </p> |
<em> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ ΡΠ΅ΠΊΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π΅Π³ΠΎ ΠΊΡΡΡΠΈΠ²ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> <em>ΠΊΡΡΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</em>. </p> |
.text-left |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ... </p> |
.text-center |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ... </p> |
.text-right |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.<p> ... </p> |
.text-justify |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ... </p> |
.text-nowrap |
ΠΠ°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ»ΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ΠΡΠ΅Π½Ρ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ. </p> |
.text-lowercase |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅Π³ΠΈΡΡΡΠ° Π²ΡΠ΅Ρ
Π±ΡΠΊΠ² Π½Π° ΡΡΡΠΎΡΠ½ΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. </p> |
.text-uppercase |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅Π³ΠΈΡΡΡΠ° Π²ΡΠ΅Ρ
Π±ΡΠΊΠ² Π½Π° ΠΏΡΠΎΠΏΠΈΡΠ½ΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. </p> |
.text-capitalize |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅Π³ΠΈΡΡΡΠ° ΠΏΠ΅ΡΠ²ΡΡ
Π±ΡΠΊΠ² Π²ΡΠ΅Ρ
ΡΠ»ΠΎΠ² Π½Π° ΠΏΡΠΎΠΏΠΈΡΠ½ΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <p> ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. </p> |
<abbr> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <abbr title="Π‘ΠΎΡΠ· Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΡ Π³ΠΎΡΡΠ΄Π°ΡΡΡΠ²"> Π‘ΠΠ </abbr>ΠΠ»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ° Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <abbr> ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ .initialism :<abbr title="Π‘ΠΎΡΠ· Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΡ Π³ΠΎΡΡΠ΄Π°ΡΡΡΠ²" > Π‘ΠΠ </abbr> |
<address> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± Π°Π²ΡΠΎΡΠ΅ ΡΡΠ°ΡΡΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <address> Π‘ΡΠ°ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½Π° itchief.ru. Π‘ΡΡΠ°Π½ΠΈΡΠ° Π² <a href="#" >Facebook</a>. </address> |
<blockquote> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΡΠ°Ρ.<blockquote> <p>Π’Π΅ΠΊΡΡ ΡΠΈΡΠ°ΡΡ</p> <small><cite>ΠΠ²ΡΠΎΡ</cite></small> </blockquote> ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΡΠ°ΡΡ, Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΠΎΠΉ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ <blockquote> <p>Π’Π΅ΠΊΡΡ ΡΠΈΡΠ°ΡΡ</p> <small><cite>ΠΠ²ΡΠΎΡ</cite></small> </blockquote> |
<ul> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <ul> <li>ΠΠΎΡΠ΅</li> <li>ΠΠΎΠ»ΠΎΠΊΠΎ</li> </ul> |
<ol> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <ol> <li>ΠΠΎΡΠ΅</li> <li>ΠΠΎΠ»ΠΎΠΊΠΎ</li> </ol> |
.list-unstyled |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <ol> <li>ΠΠΎΡΠ΅</li> <li>ΠΠΎΠ»ΠΎΠΊΠΎ</li> </ol> |
.list-inline |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ², ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΡΠΎΡΡΡ
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <ol> <li>ΠΠΎΡΠ΅</li> <li>ΠΠΎΠ»ΠΎΠΊΠΎ</li> </ol> |
<dl> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <dl> <dt>ΠΠΎΡΠ΅</dt> <dd>- Π³ΠΎΡΡΡΠΈΠΉ Π½Π°ΠΏΠΈΡΠΎΠΊ ΡΡΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</dd> <dt>ΠΠΎΠ»ΠΎΠΊΠΎ</dt> <dd>- ΠΏΡΠΎΡ Π»Π°Π΄Π½ΡΠΉ Π½Π°ΠΏΠΈΡΠΎΠΊ Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</dd> </dl> |
.dl-horizontal |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ΅ΡΠΌΠΈΠ½Ρ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΈΡ
ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ.<dl> <dt>ΠΠΎΡΠ΅</dt> <dd>- Π³ΠΎΡΡΡΠΈΠΉ Π½Π°ΠΏΠΈΡΠΎΠΊ ΡΡΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</dd> <dt>ΠΠΎΠ»ΠΎΠΊΠΎ</dt> <dd>- ΠΏΡΠΎΡ Π»Π°Π΄Π½ΡΠΉ Π½Π°ΠΏΠΈΡΠΎΠΊ Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°</dd> </dl> |
<code> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π° Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: ΠΠ»Π΅ΠΌΠ΅Π½Ρ <code>h2</code>. |
<kbd> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΈΠ»ΠΈ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <kbd>Alt+F4</kbd> |
<pre> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡΠΎΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΡΠΎΠΊ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡ .pre-scrollable ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <pre> , ΡΠΎ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅ΡΡΠΈΠΉ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ 350px ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ y.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <pre> ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ ΠΊΠΎΠ΄, ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΠΊ </pre> <samp> Π’Π΅ΠΊΡΡ Π½Π° Π²ΡΡ ΠΎΠ΄Π΅ ΠΈΠ· ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ </samp> |
<var> |
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <var>y</var> = <var>x</var><sup>2</sup> |
Π‘Π»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Β· Bootstrap Π½Π° ΡΡΡΡΠΊΠΎΠΌ
Bootstrap Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π΄Π΅ΡΡΡΠΊΠΈ ΡΡΠΈΠ»ΠΈΡβΠΊΠ»Π°ΡΡΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ-Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎΡΡ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΠΌΠΎΡΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ Π² CSS ΠΏΠΎΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ ΡΠ°Π·Π²ΠΈΡΠΈΡ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅
ΠΠ°Π·Π½Π°ΡΡΡΠ΅ margin
ΠΈΠ»ΠΈ padding
ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΅Π³ΠΎ ΡΡΠΎΡΠΎΠ½ Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ², Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 1rem
.
ΠΠ»Π°ΡΡΡ ΠΈΠΌΠ΅ΡΡ ΠΈΠΌΠ΅Π½Π° Π² ΡΠΎΡΠΌΠ°ΡΠ΅: {property}-{sides}-{size}
ΠΠ΄Π΅ property ΠΎΠ΄Π½ΠΎ ΠΈΠ·:
m
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡmargin
p
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡpadding
ΠΠ΄Π΅ sides ΠΎΠ΄Π½ΠΎ ΠΈΠ·:
t
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡmargin-top
ΠΈΠ»ΠΈpadding-top
b
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡmargin-bottom
ΠΈΠ»ΠΈpadding-bottom
l
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡmargin-left
ΠΈΠ»ΠΈpadding-left
r
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², Π½Π°Π±ΠΎΡmargin-right
ΠΈΠ»ΠΈpadding-right
x
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ ΠΎΠ±Π°*-left
ΠΈ*-right
y
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ ΠΎΠ±Π°*-top
ΠΈ*-bottom
a
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡmargin
ΠΈΠ»ΠΈpadding
Π½Π° Π²ΡΠ΅ 4 ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ΄Π΅ size ΠΎΠ΄Π½ΠΎ ΠΈΠ·:
0
— Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΡΠ°Π½ΡΡΡmargin
ΠΈΠ»ΠΈpadding
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅0
1
— (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ Themargin
ΠΈΠ»ΠΈpadding
Π΄Π»Ρ$spacer-x
ΠΈΠ»ΠΈ$spacer-y
2
— (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ Themargin
ΠΈΠ»ΠΈpadding
Π΄Π»Ρ$spacer-x * 1.5
ΠΈΠ»ΠΈ$spacer-y * 1.5
3
— (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡ Themargin
ΠΈΠ»ΠΈpadding
Π΄Π»Ρ$spacer-x * 3
ΠΈΠ»ΠΈ$spacer-y * 3
(ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°ΠΏΠΈΡΠΈ Π² $spacers
Sass ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΊΠ°ΡΡΠ΅.)
ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΏΠΈΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠ· ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ²:
.m-t-0 {
margin-top: 0 !important;
}
.m-l-1 {
margin-left: $spacer-x !important;
}
.p-x-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Bootstrap ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ .m-x-auto
ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
ΠΎΡΡΡΡΠΏΠΎΠ² auto
.
<div>
Centered element
</div>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°
ΠΠ΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΡΡΡΠΎΠΈΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠ»Π°ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ.
Justified text.
No wrap text.
<p>Justified text.</p>
<p>No wrap text.</p>
Π‘Π»Π΅Π²Π°, ΡΠΏΡΠ°Π²Π° ΠΈ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅, aΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΊΠ»Π°ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ°.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<p>Left aligned text on all viewport sizes.</p>
<p>Center aligned text on all viewport sizes.</p>
<p>Right aligned text on all viewport sizes.</p>
<p>Left aligned text on viewports sized SM (small) or wider.</p>
<p>Left aligned text on viewports sized MD (medium) or wider.</p>
<p>Left aligned text on viewports sized LG (large) or wider.</p>
<p>Left aligned text on viewports sized XL (extra-large) or wider.</p>
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΊΠ»Π°ΡΡΡ ΠΊΠ°ΠΏΠΈΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>CapiTaliZed text.</p>
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ text-capitalize
ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ²ΡΡ Π±ΡΠΊΠ²Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, ΠΎΡΡΠ°Π²Π»ΡΡ Π² ΡΠ»ΡΡΠ°Π΅ Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠΈΡΡΠΌΠ° Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΠΈΡΠ½ΡΠΉ ΠΈ ΠΊΡΡΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ
ΠΡΡΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΆΠΈΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΊΡΡΡΠΈΠ²Π°.
Bold text.
Normal weight text.
Italic text.
<p>Bold text.</p>
<p>Normal weight text.</p>
<p>Italic text.</p>
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½Π°Ρ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΡΠΎΠ½ΠΎΠ²
ΠΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠΌΡΡΠ» ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΡΠ²Π΅ΡΠ° Ρ Π³ΠΎΡΡΡΠΊΠΎΠΉ ΡΡΠΈΠ»ΠΈΡΠ° Π°ΠΊΡΠ΅Π½Ρ ΠΊΠ»Π°ΡΡΡ. ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΈ ΠΏΠΎΡΠ΅ΠΌΠ½Π΅Π΅Ρ Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π°ΡΠΈ ΡΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΉ ΠΊΠ»Π°ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° Π°Π½ΠΊΠ΅ΡΡ Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΡΠΎΠΊΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
<a href="#">Muted link</a>
<a href="#">Primary link</a>
<a href="#">Success link</a>
<a href="#">Info link</a>
<a href="#">Warning link</a>
<a href="#">Danger link</a>
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΉ ΡΠ²Π΅Ρ ΠΎΠΏΡΠ°Π²Ρ, Π»Π΅Π³ΠΊΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. Π―ΠΊΠΎΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ΅ΠΌΠ½ΡΠΌ Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈ ΡΠ΅ΠΊΡΡ ΠΊΠ»Π°ΡΡΡ.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum.
<div>Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div>Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div>Etiam porta sem malesuada magna mollis euismod.</div>
<div>Donec ullamcorper nulla non metus auctor fringilla.</div>
<div>Cras mattis consectetur purus sit amet fermentum.</div>
ΠΠ±ΡΠ°ΡΡΡ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΎΠΉ
ΠΠ½ΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½Π°Ρ ΠΊΠ»Π°ΡΡΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΈΠ·-Π·Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² <div>
Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ.
ΠΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠΌΡΡΠ» Π΄Π»Ρ Π°ΡΡΠΈΡΡΠΈΠ²Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²Π΅Ρ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΌΡΡΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ²Π΅Π΄Π΅Π½Π° Π΄ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π°ΡΡΠΈΡΡΠΈΠ²Π½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΡΠΊΡΠ°Π½Π½ΡΠ΅ Π΄ΠΈΠΊΡΠΎΡΡ. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅ΡΡΡ ΡΠ²Π΅Ρ Π»ΠΈΠ±ΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΠΊΡΡ), ΠΈΠ»ΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ
ΡΡΠ΅Π΄ΡΡΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, ΡΠΊΡΡΡΡΠΉ Ρ .sr-only
ΠΊΠ»Π°ΡΡ.
Π¨ΠΈΡΠΈΠ½Π°
ΠΠ΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊ Π²Π΅Π»ΠΈΠΊ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .w-100
ΠΊΠ»Π°ΡΡ-ΡΡΠΈΠ»ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ width: 100%
.
<img src="..." alt="Width = 100%">
CSS display
(block
, inline
, inline-block
)
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .d-block
, .d-inline
ΠΈΠ»ΠΈ .d-inline-block
, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ display
ΠΎΠΏΡΠΈΡ Π² block
, inline
, ΠΈΠ»ΠΈ inline-block
(ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ).
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ display: none
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½Π°Ρ aΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΊΠΎΠΌΠΌΡΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΡΠ»ΡΠ³ΠΈ Π²ΠΌΠ΅ΡΡΠΎ.
Inline
Inline
Blockinline-block
Boot that strap!inline-block
Strap that boot!<div>Inline</div>
<div>Inline</div>
<span>Block</span>
<div>
<h4>inline-block</h4>
Boot that strap!
</div>
<div>
<h4>inline-block</h4>
Strap that boot!
</div>
ΠΠΊΠΎΠ½ΠΊΠ° «Π·Π°ΠΊΡΡΡΡ»
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠ°ΠΊ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ Π³Π»Π°Π³ΠΎΠ»Ρ ΠΈ ΠΎΠΏΠΎΠ²Π΅ΡΠ΅Π½ΠΈΡ. ΠΡΠ΄ΡΡΠ΅ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΠΊ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Ρ aria-label
.
Γ
<button type="button" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS float
ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ. !important
Π²ΠΊΠ»ΡΡΠ΅Π½, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈ. ΠΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ° ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ°.
Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π²Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π½Π΅-ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ Sass ΠΌΠΈΠΊΡΠΈΠ½Π° (pull-left ΠΈ pull-right)
Float left on all viewport sizes
Float right on all viewport sizes
Don’t float on all viewport sizes
Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider
<div>Float left on all viewport sizes</div><br>
<div>Float right on all viewport sizes</div><br>
<div>Don't float on all viewport sizes</div><br>
<div>Float left on viewports sized SM (small) or wider</div><br>
<div>Float left on viewports sized MD (medium) or wider</div><br>
<div>Float left on viewports sized LG (large) or wider</div><br>
<div>Float left on viewports sized XL (extra-large) or wider</div><br>
// Π‘Π²ΡΠ·Π°Π½Π½ΡΡ
ΠΏΡΠΎΡΡΠΎ Π½Π΅-aΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅ΡΠΈ
.element {
@include pull-left;
}
.another-element {
@include pull-right;
}
Clearfix
ΠΠ΅Π³ΠΊΠΎ ΠΎΡΠΈΡΡΠΈΡΡ float
ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ .clearfix
ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠΈΠΊΡΠΎ clearfix ΠΏΠΎΠΏΡΠ»ΡΡΠΈΠ·ΠΈΡΡΠ΅ΠΌΡΠΉ ΠΠΈΠΊΠΎΠ»Π°Ρ ΠΠ°Π»Π»Π°Ρ
Π΅Ρ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ mixin.
<div>...</div>
//Π‘Π°ΠΌ mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ mixin
.element {
@include clearfix;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ° .pos-f-t
ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ
ΡΠΈΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Π²ΠΎΡ ΠΊΠ°ΠΊ ΠΊΠ»Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½:
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
ΠΠ΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
.invisible
ΠΊΠ»Π°ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π΅ΡΡΡ Π΅Π³ΠΎ display
Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ΄Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
<div>...</div>
// ΠΠ»Π°ΡΡ
.invisible {
visibility: hidden;
}
// ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ mixin
.element {
@include invisible;
}
Π§ΠΈΡΠ°ΡΠ΅Π»ΠΈ ΡΠΊΡΠ°Π½Π° ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ
Π‘ΠΊΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΠΊΡΠΎΠΌΠ΅ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° Ρ .sr-only
. ΠΠΎΠΌΠ±ΠΈΠ½Π°Ρ .sr-only
Ρ .sr-only-focusable
ΡΡΠΎΠ±Ρ ΡΠ½ΠΎΠ²Π° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ). Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠΈ.
<a href="#content">Skip to main content</a>
// ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
ΠΠ°ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ .text-hide
ΠΊΠ»Π°ΡΡ ΠΈΠ»ΠΈ mixin ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
<h2>Custom heading</h2>
// ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ mixin
.heading {
@include text-hide;
}
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²ΡΡΠ°Π²ΠΊΠ°
ΠΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ Π Π°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ Π±Π»ΠΎΠΊ, ΡΠΎΠ·Π΄Π°Π² ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅.
ΠΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ <iframe>
, <embed>
, <video>
, ΠΈ <object>
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ; ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²Π½ΡΡ ΠΊΠ»Π°ΡΡ ΠΏΠΎΡΠΎΠΌΠΎΠΊ .embed-responsive-item
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠ°ΠΉΠ»ΠΈΠ½Π³ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ².
Pro-Π‘ΠΎΠ²Π΅Ρ! ΠΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ frameborder="0"
Π² <iframe>
, ΠΊΠ°ΠΊ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΎ Π΄Π»Ρ Π²Π°Ρ.
<div>
<iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
ΠΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π°ΡΡΡΠΎΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡ.
<!-- 21:9 Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ -->
<div>
<iframe src="..."></iframe>
</div>
<!-- 16:9 Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ -->
<div>
<iframe src="..."></iframe>
</div>
<!-- 4:3 Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ -->
<div>
<iframe src="..."></iframe>
</div>
<!-- 1:1 Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ -->
<div>
<iframe src="..."></iframe>
</div>
ΠΡΠΈΠΌΠ΅ΡΡ. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Β· Bootstrap
ΠΠ°ΡΠ½ΠΈΡΠ΅ Π±ΡΡΡΡΡΠΉ Π·Π°ΠΏΡΡΠΊ ΠΏΡΠΎΠ΅ΠΊΡΠ° Ρ Π»ΡΠ±ΡΠΌ ΠΈΠ· Π½Π°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
ΠΠΎΠ²ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π° ΡΠ°Π±ΠΎΡΡ Ρ Bootstrap Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠ΅ΠΉ Π»ΡΡΡΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΠΊ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π² ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ.
ΠΠ»ΡΠ±ΠΎΠΌ
ΠΡΠΎΡΡΠΎΠΉ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ, ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΡΠ°ΠΉΡΠ»ΠΈΡΡ
ΠΡΠΈΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠ΅Π½ΠΎΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ°ΡΡ, Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°.
Checkout
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠ°Ρ ΡΠΎΡΠΌΠ° Π·Π°ΠΊΠ°Π·Π°, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠΎΡΠΌΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΡΠΎΠ΄ΡΠΊΡ
ΠΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ³Π°ΡΡΠ°Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΠΎΠ±ΡΠΈΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ±Π»ΠΎΠΆΠΊΠ°
ΠΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΡΡ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ.
Π‘Π»Π°ΠΉΠ΄Π΅Ρ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, ΠΊΠ°ΡΡΡΠ΅Π»Ρ ΠΈ Π½ΠΎΠ²ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ.
ΠΠ»ΠΎΠ³
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π±Π»ΠΎΠ³Π° Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ.
ΠΡΠΈΠΆΠ°ΡΡΠΉ ΡΡΡΠ΅Ρ
ΠΡΠΈΠΆΠ°ΡΡΠΉ ΡΡΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠΊΠ½Π° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΊΠΎΡΠΎΡΠΊΠΎΠ΅.
ΠΡΠΈΠΆΠ°ΡΡΠΉ ΡΡΡΠ΅Ρ Ρ ΠΌΠ΅Π½Ρ
ΠΡΠΈΠΆΠ°ΡΡΠΉ ΡΡΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠΊΠ½Π° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΊΠΎΡΠΎΡΠΊΠΎΠ΅. ΠΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ.
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ
ΠΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Ρ Π½Π° Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Bootstrap.
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ.
Jumbotron
ΠΠ°ΠΊΠ΅Ρ jumbotron Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ Π±Π°Π·ΠΎΠ²Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° navbar ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Π° Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΡΠΏΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΡΠΏΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²Π΅ΡΡ Π½Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ.
ΠΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΡ
ΠΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° Π±ΡΠ΄ΡΡΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ.
Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π²ΡΠ°ΡΠΈΡΠ΅ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² ΡΠΊΠΎΠ»ΡΠ·ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ.
Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Β· Bootstrap
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ Bootstrap, Π²ΠΊΠ»ΡΡΠ°Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΡΠ΅ΠΊΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠΏΠΈΡΠΊΠΈ ΠΈ Ρ.Π΄.
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ
Bootstrap ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΈ ΡΡΡΠ»ΠΎΠΊ. ΠΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π½Π°ΡΠΈ ΠΊΠ»Π°ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΠΈΠ»ΠΈΡ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½Π°Π±ΠΎΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΡΠΈΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ±Π΅ΡΠ΅Ρ Π»ΡΡΡΠ΅Π΅ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ²
font-family
Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΠ‘ ΠΈ Π΄Π΅Π²Π°ΠΉΡΠΎΠ². - ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎΠΉ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΊΠ°Π»Ρ ΡΡΠΈΡΡΠΎΠ² BS4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
font-size
(ΠΎΠ±ΡΡΠ½ΠΎ 16px), ΡΠ°ΠΊ ΡΡΠΎ ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ°ΠΌΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΈΡΡΡ ΡΠ΅ΡΠ΅Π· Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ°. - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ
$font-family-base
,$font-size-base
ΠΈ$line-height-base
ΠΊΠ°ΠΊ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ Π±Π°Π·Ρ Π΄Π»Ρ<body>
. - ΠΠ°Π΄Π°Π²Π°ΠΉΡΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΎΠΊ ΡΠ΅ΡΠ΅Π·
$link-color
ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²:hover
. - ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
$body-bg
Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡbackground-color
Π΄Π»Ρ<body>
(ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎΠΈΡ#fff
).
ΠΡΠΈ ΡΡΠΈΠ»ΠΈ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² _reboot.scss
, Π° Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² _variables.scss
. ΠΠ°Π΄Π°Π²Π°ΠΉΡΠ΅ $font-size-base
Π² rem
.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
ΠΡΠ΅ HTML-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ (<h2>
—<h6>
) Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² BS4.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ | ΠΡΠΈΠΌΠ΅Ρ |
---|---|
|
h2. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
|
h3. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
|
h4. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
|
h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
|
h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
|
h6. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap |
<h2>h2. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h2>
<h3>h3. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h3>
<h4>h4. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h4>
<h5>h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h5>
<h5>h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h5>
<h6>h6. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </h6>
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΈΡΡΠ° ΡΠΎΠ²ΠΏΠ°Π΄Π°Π»Π° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΎΡΠ½Π΅ΡΠ΅Π½Π½ΡΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠ»Π°ΡΡΡ .h2
— .h6
ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ.
h2. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
h3. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
h4. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
h6. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap
<p>h2. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
<p>h3. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
<p>h4. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
<p>h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
<p>h5. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
<p>h6. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ bootstrap </p>
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ΡΡ ΠΎΠ±ΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ Π²ΡΠΎΡΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°-ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΠ· Bootstrap 3.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π‘ Π²ΡΡΠ²Π΅ΡΡΠΈΠΌ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ
<h4>
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
<small>Π‘ Π²ΡΡΠ²Π΅ΡΡΠΈΠΌ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ</small>
</h4>
Β«ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΈΡΠΏΠ»Π΅ΡΒ»
Π’ΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ Π΄Π»Ρ Β«ΡΠ°Π±ΠΎΡΡΒ» Β«Π² Π³Π»ΡΠ±ΠΈΠ½Π΅Β» Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Β«Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΈΡΠΏΠ»Π΅ΡΒ» — Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠ»Π΅Π³ΠΊΠ° Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΡΡΠ½ΡΠΉ.
Display 1 |
Display 2 |
Display 3 |
Display 4 |
<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>
Β«ΠΠΈΠ΄Β»
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡΡΠΈΠΉΡΡ, ΠΎΡΡΡΠΎΡΡΠΈΠΉ ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΌΠ°ΡΡΡ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ° .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΡΡ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML5.
ΡΠ΅Π³-Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΡΠ΅ΠΊΡΡΠ°.
Π£Π΄Π°Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.
ΠΠ°ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ.
Π‘ΡΡΠΎΠΊΠ° — Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ.
ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΠ°Ρ
ΠΠ΅Π»ΠΊΠΈΠΉ ΡΡΠΈΡΡ (ΡΠΈΠΏΠ° Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈΠ½Π΄Π΅ΠΊΡ).
ΠΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ.
ΠΡΡΡΠΈΠ².
<p>ΡΠ΅Π³-Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ <mark>ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ</mark> ΡΠ΅ΠΊΡΡΠ°.</p>
<p><del>Π£Π΄Π°Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.</del></p>
<p><s>ΠΠ°ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ.</s></p>
<p><ins>Π‘ΡΡΠΎΠΊΠ° - Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ.</ins></p>
<p><u>ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΠ°Ρ</u></p>
<p><small>ΠΠ΅Π»ΠΊΠΈΠΉ ΡΡΠΈΡΡ (ΡΠΈΠΏΠ° Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈΠ½Π΄Π΅ΠΊΡ).</small></p>
<p><strong>ΠΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ.</strong></p>
<p><em>ΠΡΡΡΠΈΠ².</em></p>
ΠΠ»Π°ΡΡΡ .mark
ΠΈ .small
Π΄Π°ΡΡ ΡΡΠΈΠ»ΠΈ, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ Ρ ΡΠ΅Π³Π°ΠΌΠΈ <mark>
ΠΈ <small>
, Π½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Ρ ΡΠ΅Π³Π°ΠΌΠΈ.
Π’Π°ΠΊΠΆΠ΅, ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠ΅Π³Π°ΠΌΠΈ <b>
ΠΈ <i>
Π² HTML5. <b>
ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»ΠΎΠ² ΠΈΠ»ΠΈ ΡΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΡΠ»ΠΎΠ²Π°ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π²Π°ΠΆΠ½ΠΎΡΡΠΈ, Π° <i>
Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠ°ΡΡ, ΠΏΡΡΠΌΡΡ ΡΠ΅ΡΡ, ΡΠ΅ΡΠΌΠΈΠ½Ρ ΠΈ Ρ.Π΄.
ΠΠ»Π°ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΠΈΠ»ΠΈΡ
ΠΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΈΠ»Ρ, Β«ΠΆΠΈΡΠ½ΠΎΡΡΡΒ» ΠΈ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΠΈΠ»ΠΈΡ ΠΈ ΡΡΠΈΠ»ΠΈΡ ΡΠ²Π΅ΡΠ°.
Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <abbr>
Π½ΡΠΆΠ½Π° Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° ΠΏΠΎΠ»Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π°ΠΊΡΠΎΠ½ΠΈΠΌΠΎΠ² ΠΈ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠΎΡ ΡΠ΅Π³ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ βhelp-cursorβ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ·Π΅ΡΠ°ΠΌ-ΠΈΠ½Π²Π°Π»ΠΈΠ΄Π°ΠΌ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ .initialism
ΠΊ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»Π΅Π³ΠΊΠ° ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°.
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
Π¦ΠΈΡΠ°ΡΡ
ΠΠ»Ρ ΡΠΈΡΠ°Ρ Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² <blockquote>
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΡΠ°ΡΡ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ΠΠ°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
ΠΠΎΠ±Π°Π²ΡΡΠ΅ <footer>
Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°. ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΠΈΠΌΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° Π² <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>ΠΡΠΎ-ΡΠΎ Π·Π½Π°ΠΌΠ΅Π½ΠΈΡΡΠΉ Π² <cite title="ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°">Source Title</cite></footer>
</blockquote>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠΈΡΠ°Ρ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>ΠΡΠΎ-ΡΠΎ Π·Π½Π°ΠΌΠ΅Π½ΠΈΡΡΠΉ Π² <cite title="ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°">ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>ΠΡΠΎ-ΡΠΎ Π·Π½Π°ΠΌΠ΅Π½ΠΈΡΡΠΉ Π² <cite title="ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°">ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°</cite></footer>
</blockquote>
Π‘ΠΏΠΈΡΠΊΠΈ
ΠΠ΅Π· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ
Π£Π΄Π°Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ list-style
ΠΈ Π»Π΅Π²ΡΠΉ ΠΌΠ°ΡΠ΄ΠΆΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° (ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΡΠΌΡΠ΅ Β«ΠΏΠΎΡΠΎΠΌΠΊΠΈΒ»). ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΠΈΡΡ Π΄Π»Ρ ΠΏΡΡΠΌΡΡ
Β«ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ²Β», Ρ.Π΅. Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ².
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
ΠΠ»ΠΎΡΠ½ΡΠ΅
Π£Π΄Π°Π»ΡΠ΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠΎΠΊ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΡΡΠΏ margin
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² .list-inline
ΠΈ .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul>
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ BS4 (ΠΈΠ»ΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠΈΠΊΡΠΈΠ½Ρ). ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ .text-truncate
ΡΡΠΎΠ±Ρ Β«ΡΡΠ΅ΡΡΒ» ΡΠ΅ΠΊΡΡ ΡΠ»Π»ΠΈΠΏΡΠΎΠΌ.
- Π‘ΠΏΠΈΡΠΊΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- ΠΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΡ
-
- Π‘ΠΏΠΈΡΠΎΠΊ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Truncated term is truncated</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt>Nesting</dt>
<dd>
<dl>
<dt>Nested definition list</dt>
<dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
ΠΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Β«ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°Β»
ΠΡΠΎΡ ΡΠ΅ΡΠΌΠΈΠ½ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠΎΠΉ ΠΊΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° font-size
Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
. Bootstrap Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ°ΠΌΠΈ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΡΠ±ΠΈΡΠ°ΠΉΡΠ΅ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ³ΠΎΠ΄Π½ΠΎ font-size
ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
50+ Π»ΡΡΡΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΊ Bootstrap / DataArt corporate blog / Habr
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ CSS ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap, Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΠΌΠ°ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ. ΠΠ°ΠΆΠ΅ ΡΠ΅ΠΉΡΠ°Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Bootstrap ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π»ΡΠ±ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ Π²Π΅Π±ΡΠ°ΠΉΡΠ°.
ΠΠ»Ρ ΡΡΠ°ΡΡΠΈ Ρ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π» Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Β«Π½Π° Π²ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ ΠΆΠΈΠ·Π½ΠΈΒ».
ΠΠ°Π±ΠΎΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
Fuel UX
ΠΡΠ»ΠΈΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠ°ΡΡΡΡ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Bootstrap. Π Π½Π΅Π³ΠΎ Π²Ρ ΠΎΠ΄ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΌΠΎΠ΄ΡΠ»ΠΈ ΠΊΠ°ΠΊ Π΄Π΅ΡΠ΅Π²ΡΡ, ΡΠ°Π±Π»ΠΎΠ½Ρ, Π΄Π°ΡΠ°ΠΏΠΈΠΊΠ΅ΡΡ, Π²ΠΈΠ·Π°ΡΠ΄Ρ ΠΈ Ρ. ΠΏ.
Website
Github
X-editable
ΠΡΠΌΠ°Ρ, ΡΡΠΎ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΠΉ Π½Π°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΈΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Bootstrap ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π±Π΅Π· Π½Π΅Π³ΠΎ (Π½Π° jQuery).
Website
Github
Jasny
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°Π±ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊ Bootstrap. Π Π½Π΅Π³ΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ ΠΊΠ°ΠΊ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΠ°ΡΠΊΠΈ Π΄Π»Ρ ΠΈΠ½ΠΏΡΡΠΎΠ² ΠΈ Ρ. ΠΏ.
Website
Github
Bootstrap Form Helper
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΠΏΡΠ΅ΠΌΠΈΡΠΌ Π²Π΅ΡΡΠΈΡ Π²Ρ ΠΎΠ΄ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ½ΠΏΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° Π²Π°Π»ΡΡ, ΡΡΡΠ°Π½, Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π·ΠΎΠ½, ΡΠ·ΡΠΊΠΎΠ² ΠΈ Ρ. ΠΏ.
Website
Github
Leapstrap
ΠΠ°Π±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π° Leapstrap ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ°. ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ-ΡΠ°ΠΊΠΈ Π½Π΅ΠΎΠ±ΡΡΠ½Π°Ρ Π²Π΅ΡΠΈΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π²ΠΊΠ»ΡΡΠ°Ρ Π΅Π΅ Π² ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ.
Website
Github
ΠΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
jQuery Bootpag
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°ΡΠ°ΡΡΡΡ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ Π² ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅ Bootstrap β Pagination. ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ.
Website
Github
Tocify
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±ΡΠ°ΠΉΡΠΎΠ².
Website
Github
Bootstrap Link Preview
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ (Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ Facebook-ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ°).
Website
Github
Flippant.js
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΊΡΠΈΠΏΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Β» Π±Π»ΠΎΠΊΠΎΠ². ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΡΠΌ, ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΠΈ Ρ. ΠΏ.
Website
Github
Bootstrap Tour
ΠΡΠ»ΠΈΡΠ½ΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Bootstrap, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ ΡΡΡ Π΄Π»Ρ Π½ΠΎΠ²ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
http://bootstraptour.com/
https://github.com/sorich87/bootstrap-tour
Bootstro.js
ΠΠ°ΡΠΈΠ°Π½Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°. ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΡΠ° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π²Π΅Π± ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Website
GitHub
Yet Another MegaMenu (YAMM)
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠΌΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ.
Website
GitHub
Dropdown Menus Enhancement
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌΡ ΠΌΠ΅Π½Ρ Bootstrap. ΠΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ, Π²ΡΠ²ΠΎΠ΄ Π² ΠΌΠ΅Π½Ρ ΡΠ°Π΄ΠΈΠΎ- ΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ-ΠΈΠ½ΠΏΡΡΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Website
Github
Bootstrap Tree View
ΠΡΠΎΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ. ΠΠ°Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Glyph-ΠΈΠΊΠΎΠ½ΠΊΠΈ.
Github
GTreeTable
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ. ΠΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΠ±ΠΈΠ»ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Π°: Drag&Drop, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ. ΠΏ.
Website
Github
Bootstrap Star Rating
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΉΡΠΈΠ½Π³Π°, Π»Π΅Π³ΠΊΠΎ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ. ΠΠΎ ΠΎΠΏΡΡΡ ΠΌΠΎΠ³Ρ ΡΠΊΠ°Π·Π°ΡΡ: ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΈΡΠΊΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ.
Website
Github
Gridmanager.js
Π Π΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΡΡΡΠΎΠΊΠ°Ρ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ Bootstrap-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΠΎΠΊΠ° Π½Π΅ Π½Π°ΡΠ΅Π», ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΡΠ»ΠΎΠΆΠΈΠ» Π±ΠΎΠ»ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Website
GitHub
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΠ»Ρ Π€ΠΎΡΠΌ
Bootstrap Tags
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ². ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΡΠΎΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ Bootstrap.
Website
Github
Bootstrap Switch
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ°, ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΡΡ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ: ΡΠ°Π·ΠΌΠ΅ΡΡ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΠ²Π΅Ρ ΠΈ Ρ. ΠΏ.
Website
Github
Bootstrap Maxlength
ΠΠ΅ΠΏΠ»ΠΎΡ ΠΎΠΉ Β«ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΠ΅Π»ΡΒ» Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΏΠΎΠ»Π΅ΠΉ Π²Π²ΠΎΠ΄Π°. ΠΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΈΠ½ΠΎΠ³Π΄Π° Π±ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ.
Website
Github
Bootstrap Select
ΠΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΡΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Website
Github
Chosen
ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΊΡΠΈΠΏΡ Π΄Π»Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ ΠΈ Π²Π°ΡΠΈΠ°ΡΠΈΠΉ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ.
Website
Github
Bootstrap Multiselect
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠΏΠΈΡΠΊΠ°. ΠΠ°Π½Π½ΡΠΉ ΡΠΊΡΠΈΠΏΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ / Π·Π°ΠΊΡΡΡΠΈΠΈ / Π²ΡΠ±ΠΎΡΠ΅ ΠΈ Ρ. ΠΏ. ΠΠΈΠΊΠΎΠ³Π΄Π° Π²Π΅Π΄Ρ Π½Π΅ Π·Π½Π°Π΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠΏΡΠΎΡΠΈΡ ΠΊΠ»ΠΈΠ΅Π½Ρβ¦
Website
Github
Bootstrap Validator
ΠΠ΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠΎΡΠΌΠ°ΠΌΠΈ Π² Bootstrap-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅. ΠΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ: ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΠΉ ΡΠΎΡΠΌΡ.
Website
Github
jqBootstrapValidation
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ (Π²Π°ΡΠΈΠ°Π½Ρ) Π΄Π»Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ ΡΠΎΡΠΌ Π½Π° Bootstrap-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π²Π²Π΅Π΄Π΅Π½Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π΄Π°Π½Π½ΡΡ .
Website
Github
jQuery File Upload
ΠΠ΅ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π²ΡΠ΅ΠΌΡ, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌ.
Websit
Github
Bootstrap Tag Autocomplete
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π²ΡΠΎΠ΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ (ΠΏΠΎ Π²Π΅ΡΡ) ΡΠΊΡΠΈΠΏΡ. ΠΡΠΌΠ°Ρ, Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π² ΠΊΠΎΠΏΠΈΠ»ΠΊΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
Website
Github
Tag Manager
ΠΠΎΡΠΎΠ²ΡΠΉ ΡΠΊΡΠΈΠΏΡ (ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ) Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ². ΠΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠΈΠΉ ΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Website
Github
Typeahead
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Π°Π²ΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΠΏΠΎΠ»Π΅. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π²Π° ΡΠΊΡΠΈΠΏΡΠ° (Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π²ΠΌΠ΅ΡΡΠ΅, ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
Website
Github
Slider for Bootstrap
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠΌΠΎΠ³Π°ΡΡΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΊΡΡΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠΌΠ΅ΡΡΠΎ Π²Π²ΠΎΠ΄Π° Π΄Π°Π½Π½ΡΡ Π²ΡΡΡΠ½ΡΡ β ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ½ΡΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ. ΠΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠΈΠΉ, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ.
Website
Tokenfield for Bootstrap
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ². ΠΠΎΠ»Π½ΠΎΡΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½, ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠΈΠΉ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²Π²ΠΎΠ΄ ΠΈ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ, ΠΈ ΠΈΠ· Π±ΡΡΠ΅ΡΠ° ΠΎΠ±ΠΌΠ΅Π½Π°.
Website
Github
Label in Place
ΠΠ΅Π³ΠΊΠΈΠΉ ΡΠΊΡΠΈΠΏΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ label-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π°. ΠΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ. ΠΠ½ΠΎΠ³Π΄Π° Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ :).
Website
Github
Strength Meter
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°ΡΠΎΠ»Ρ. ΠΡΠΎΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠΊΠ»ΡΡΠ°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠΈΠΉ ΠΈ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
Website
Github
Bootstrap File Input
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΡΠ»ΡΡΠΈΠ·Π°Π³ΡΡΠ·ΠΊΡ ΠΈ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ. ΠΡΠΎΠΉΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Website
Github
Ladda UI for Bootstrap 3
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ Π·Π°Π΄ΡΠΌΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΡΡΠΌΠΎ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ .
Website
Github
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΊ Twitter Bootstrap ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ. ΠΠ°ΠΆΠ΅ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π°Π΄Π΄ΠΎΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π² ΡΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ.
Date & Time Pickers
Daterangepicker
Website
Github
Bootstrap Timepicker
Website
Github
Clockface
Website
Github
Bootstrap Datetime
Website
Github
Bic_Calendar
Website
Github
Π‘olor Pickers
Pick a Color
Website
Github
Colorpicker for Bootstrap
Website
Github
Color Palette
Website
Github
Editors
Bootstrap Markdown
Website
Github
Bootstrap WYSIHTML5
Website
Github
Summernote
Website
Github
Tables
Tablecloth
Website
Github
Bootstrap Table
Website
Github
Media & Galleries
Bootstrap Lightbox
Website
Github
Bootstrap Image Gallery
Website
Github
Bootstrap Icon Picker
Website
Github
Dialogs & Notifications
Bootbox.js
Website
Github
Bootstrap Modal
Website
Github
Bootstrap Notify
Website
Github
Bootstrap Confirmation
Website
Github
Bootstrap Growl
Website
Github
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ½Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ Π² ΡΠ°Π±ΠΎΡΠ΅ Ρ Bootstrap-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ. ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π² ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΠ°Π΄Π΅ΡΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΠΌΠΎΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ. ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡΠΌΠΈ ΠΈ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ Π² ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ, ΠΎΠΏΠΈΡΠΈΡΠ΅ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , ΠΌΠ½Π΅ (ΠΈ, Π΄ΡΠΌΠ°Ρ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Ρ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ) ΠΎΠ½ΠΈ ΡΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°Π±Π°ΠΊΠΎΠ²
WordPress Developer