Bootstrap 3 Β· ΠΠΊΠΎΠ½ΠΊΠΈ, ΠΌΠ΅Π½Ρ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΡΠ°Π±Ρ, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΈ Π΄Ρ.
ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ
ΠΠΊΠ»ΡΡΠ΅Π½ΠΎ 200 ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΈΠ· Π½Π°Π±ΠΎΡΠ° Glyphicon Halflings. ΠΠ±ΡΡΠ½ΠΎ Glyphicons Halflings Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ, Π½ΠΎ Π°Π²ΡΠΎΡ ΡΠ΄Π΅Π»Π°Π» ΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Bootstrap. ΠΠ°ΠΊ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΡ, ΠΌΡ Π±Ρ ΠΏΡΠΎΡΠΈΠ»ΠΈ Π²Π°Ρ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° Glyphicons, Π³Π΄Π΅ Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
ΠΠ»Ρ Π»ΡΡΡΠ΅ΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΠΊΠ»Π°ΡΡΠ΅ ΠΈ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠ»Π°ΡΡΠ΅ Π·Π½Π°ΡΠΊΠΎΠ². Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ Π·Π½Π°ΡΠΊΠΎΠΌ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΡΠΏ (padding).
ΠΠ΅ ΡΠΌΠ΅ΡΠΈΠ²Π°ΠΉΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
ΠΠ»Π°ΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π½Π΅ ΠΌΠΎΠ³ΡΡ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ½ΠΈ ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΡΠ΅ <span>
ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΊΠ»Π°ΡΡΠΎΠ² <span>
<span></span>
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ , Π³ΡΡΠΏΠΏΠ°Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΡΡΠ°Π²ΠΊΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ.
<button type="button"><span></span> Star</button>
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ΅, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΡΡΡΠ»ΠΎΠΊ. ΠΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΡΡΡ JavaScript ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Π΄Π»Ρ dropdown ΠΌΠ΅Π½Ρ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° .dropdown
ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅Ρ position: relative;
.
<div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Π§ΡΠΎ-ΡΠΎ Π΅ΡΠ΅</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> </ul> </div>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ 100% ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π²Π΄ΠΎΠ»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
.dropdown-menu-right
ΠΊ .dropdown-menu
Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π°.ΠΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Dropdowns Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΠΌΠΈ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ overflow
ΠΈΠ»ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ΄ΡΠ΅ΡΡΠΉΡΠ΅ ΡΡΠΈ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ.
.pull-right
ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅Π Π²Π΅ΡΡΠΈΠΈ 3.1, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ .pull-right
Π΄Π»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .dropdown-menu-right
.dropdown-menu-left
.<ul role="menu" aria-labelledby="dLabel">
. ..
</ul>
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΠΎΠ±Ρ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΡΠΊΠΈ Π² Π»ΡΠ±ΠΎΠΌ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
<ul role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation">ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ</li> ... <li role="presentation"></li> <li role="presentation">ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ</li> ... </ul>
ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Ρ ΡΠ°ΡΡΠΈ ΠΌΠ΅Π½Ρ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ .disabled
ΠΊ <li>
Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΡΠ»ΠΊΡ.
<ul role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΠ±ΡΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ΠΡΡΠ³Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
Π‘Π³ΡΡΠΏΠΏΠΈΡΡΠΉΡΠ΅ ΡΠ΅ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π²ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠ΄Π½Ρ Π»ΠΈΠ½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π² ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π³ΡΡΠΏΠΏΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΡ Π² Π³ΡΡΠΏΠΏΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΡΠ΅Π±ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΠΎΠ² (popovers) Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
.btn-group
, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ container: 'body'
, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅ ΠΈ/ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡΠ΅ΡΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½Π½Ρ ΡΠ³Π»ΠΎΠ² ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΠΎΠ²).
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ΅ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .btn
ΠΊΠ»Π°ΡΡ .btn-group
.
ΠΠ΅Π²Π°Ρ Π‘ΡΠ΅Π΄Π½ΡΡ ΠΡΠ°Π²Π°Ρ
<div> <button type="button">ΠΠ΅Π²Π°Ρ</button> <button type="button">Π‘ΡΠ΅Π΄Π½ΡΡ</button> <button type="button">ΠΡΠ°Π²Π°Ρ</button> </div>
ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅ Π½Π°Π±ΠΎΡ <div>
Ρ ΠΏΠΎΠΌΠΎΡΡΡ <div>
Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
<div role="toolbar">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π³ΡΡΠΏΠΏΠ΅, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ .btn-group-*
— .btn-group
.
<div>...</div> <div>...</div> <div>...</div> <div>...</div>
ΠΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΡ
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ .btn-group
Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ Π΄ΡΡΠ³ΠΎΠΉ .btn-group
, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ΅ΡΠΈΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
<div> <button type="button">1</button> <button type="button">2</button> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul> <li><a href="#">Dropdown ΡΡΡΠ»ΠΊΠ°</a></li> <li><a href="#">Dropdown ΡΡΡΠ»ΠΊΠ°</a></li> </ul> </div> </div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°ΡΠΈΠΈ
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Π½Π°Π±ΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Π° Π½Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. Split ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ.
ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ°<div>
...
</div>
ΠΡΡΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Justified
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ°ΡΡΡΠ½ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠ°ΠΌΠΎΠΊ
ΠΠ·-Π·Π° ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ
HTML ΠΈ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ Π΄Π»Ρ ΠΎΠ±ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ
), Π³ΡΠ°Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ΄Π²ΠΎΡΡΡΡ. Π ΡΠ΅Π³ΡΠ»ΡΡΠ½ΡΡ
Π³ΡΡΠΏΠΏΠ°Ρ
ΠΊΠ½ΠΎΠΏΠΎΠΊ, margin-left: -1px
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΠ΅ΠΊΠ° Π³ΡΠ°Π½ΠΈΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΈΡ
. ΠΠΏΡΠΎΡΠ΅ΠΌ, margin
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ display: table-cell
. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΎΠ³ΠΎ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ
Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π² Bootstrap, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΎΠΊ.
Π‘
<a>
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈΠΡΠΎΡΡΠΎ Π·Π°ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΠ΅ΡΠΈΡ . btn
s Π² .btn-group.btn-group-justified
.
<div>
...
</div>
Π‘
<button>
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈΠΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΡΡΠΏΠΏ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ <button>
, <button>
, Π½ΠΎ ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ
ΠΠ΅Π²Π°Ρ
Π‘ΡΠ΅Π΄Π½ΡΡ
ΠΡΠ°Π²Π°Ρ
<div>
<div>
<button type="button">ΠΠ΅Π²Π°Ρ</button>
</div>
<div>
<button type="button">Π‘ΡΠ΅Π΄Π½ΡΡ</button>
</div>
<div>
<button type="button">ΠΡΠ°Π²Π°Ρ</button>
</div>
</div>
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π»ΡΠ±ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ² Π΅Π΅ Π²
, ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ² Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ-ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌ ΠΌΠ΅Π½Ρ.
ΠΠ΄ΠΈΠ½ΠΎΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π±Π°Π·ΠΎΠ²ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
<!-- Single button --> <div> <button type="button" data-toggle="dropdown">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ <span></span></button> <ul role="menu"> <li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li> <li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li> <li><a href="#">Π§ΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅</a></li> <li></li> <li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> </ul> </div>
Π Π°ΡΡΠ΅ΠΏΠ»Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΠ·ΡΠ΅ΠΏΠ»Π΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Π² ΡΠΎΠ·ΠΌΡΡΠΊΡ, ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Primary ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Success ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Info ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Warning ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Danger ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ<!-- Split button -->
<div>
<button type="button">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</button>
<button type="button" data-toggle="dropdown">
<span></span>
<span>ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ</span>
</button>
<ul role="menu">
<li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">Π§ΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅</a></li>
<li></li>
<li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
</div>
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΠ½ΠΎΠΏΠΊΠΈ Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
<!-- Large button group -->
<div>
<button type="button" data-toggle="dropdown">
ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span>
</button>
<ul>
...
</ul>
</div>
<!-- Small button group -->
<div>
<button type="button" data-toggle="dropdown">
ΠΠ°Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span>
</button>
<ul>
...
</ul>
</div>
<!-- Extra small button group -->
<div>
<button type="button" data-toggle="dropdown">
ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span>
</button>
<ul>
...
</ul>
</div>
ΠΠ°ΡΠΈΠ°Π½Ρ ΡΠΏΠΈΡΠΊΠ° ΡΠ²Π΅ΡΡ Ρ
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡΡΡ Π²Π²Π΅ΡΡ
, ΠΏΡΠΈΠ±Π°Π²ΠΈΠ² .dropup
ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ.
<div>
<button type="button">ΠΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ</button>
<button type="button" data-toggle="dropdown">
<span></span>
<span>ΠΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ</span>
</button>
<ul>
<!-- Dropdown menu links -->
</ul>
</div>
Π Π°Π·Π²Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎ, ΠΏΠΎΡΠ»Π΅, Ρ ΠΎΠ±Π΅ΠΈΡ
ΡΡΠΎΡΠΎΠ½ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .input-group
Ρ .input-group-addon
Π² Π½Π°ΡΠ°Π»ΠΎ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Π΅Ρ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .form-control
.
ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <select>
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΡΡΠΈΠ»ΡΠ·ΡΠ²Π°ΡΠΈΡΡ Π² WebKit Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΡ Π² Π³ΡΡΠΏΠΏΠ΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠ΅Π±ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ
ΠΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΡ (popovers) Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
.input-group
, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ container: 'body'
, Π΄Π»Ρ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΏΠΎΠ±ΠΎΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅ ΠΈ/ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡΠ΅ΡΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½Π½Ρ ΡΠ³Π»ΠΎΠ² ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ΅ΡΠΎΠ²).
ΠΠ΅ ΡΠΌΠ΅ΡΠΈΠ²Π°ΠΉΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
ΠΠ΅ ΡΠΌΠ΅ΡΠΈΠ²Π°ΠΉΡΠ΅ Π³ΡΡΠΏΠΏΡ ΡΠΎΡΠΌ ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Ρ Π³ΡΡΠΏΠΏΠ°ΠΌΠΈ Π²Π²ΠΎΠ΄Π°. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, Π²Π½Π΅Π΄ΡΠΈΡΠ΅ Π³ΡΡΠΏΠΏΡ Π²Π²ΠΎΠ΄Π° Π²Π½ΡΡΡΠΈ Π³ΡΡΠΏΠΏΡ ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎ ΠΎΠ±Π΅ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ Π²Π²ΠΎΠ΄Π°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½.
ΠΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΠΌΠ΅ΡΡΠΎΠΎΡΠΎΠ½Π΅.
ΠΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ form-control Π² ΠΎΠ΄Π½ΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅ Π²Π²ΠΎΠ΄Π°.
<div>
<span>@</span>
<input type="text" placeholder="Username">
</div>
<div>
<input type="text">
<span>.00</span>
</div>
<div>
<span>$</span>
<input type="text">
<span>.00</span>
</div>
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΎΠ΄Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π»ΡΠ±ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΡΠΎΡΠΌΡ Π²Π²ΠΎΠ΄Π°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ ΠΏΠΎ ΠΎΠ±Π΅ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΡΠΎΡΠΌΡ Π²Π²ΠΎΠ΄Π°. ΠΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
<div>
<span>@</span>
<input type="text" placeholder="Username">
</div>
<div>
<span>@</span>
<input type="text" placeholder="Username">
</div>
<div>
<span>@</span>
<input type="text" placeholder="Username">
</div>
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ
ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π»ΡΠ±ΡΠ΅ ΠΎΠΏΡΠΈΠΈ Π³Π°Π»ΠΎΡΠ΅ΠΊ (checkbox) ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ Π² ΡΠ°ΠΌΠΊΠ°Ρ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ Π²Π²ΠΎΠ΄Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅ΠΊΡΡΠ°.
<div>
<div>
<div>
<span>
<input type="checkbox">
</span>
<input type="text">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div>
<div>
<span>
<input type="radio">
</span>
<input type="text">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ½ΠΎΠΏΠΊΠΈ Π² Π³ΡΡΠΏΠΏΠ°Ρ
Π²Π²ΠΎΠ΄Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΈ ΡΡΠ΅Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ. ΠΠΌΠ΅ΡΡΠΎ .input-group-addon
, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ .input-group-btn
. ΠΡΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·-Π·Π° ΡΡΠΈΠ»Π΅ΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ.
<div>
<div>
<div>
<span>
<button type="button">Go!</button>
</span>
<input type="text">
</div><!-- /input-group -->
</div><!-- /. col-lg-6 -->
<div>
<div>
<input type="text">
<span>
<button type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ
<div>
<div>
<div>
<div>
<button type="button" data-toggle="dropdown">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ <span></span></button>
<ul>
<li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">Π§ΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅</a></li>
<li></li>
<li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text">
</div><!-- /input-group -->
</div><!-- /. col-lg-6 -->
<div>
<div>
<input type="text">
<div>
<button type="button" data-toggle="dropdown">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ <span></span></button>
<ul>
<li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">Π§ΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅</a></li>
<li></li>
<li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Π‘Π΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
<div>
<div>
<!-- Button and dropdown menu -->
</div>
<input type="text">
</div>
<div>
<input type="text">
<div>
<!-- Button and dropdown menu -->
</div>
</div>
ΠΠΎΡΡΡΠΏΠ½Π° Π² Bootstrap Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° . nav
, ΠΈ Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ. ΠΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΠΌΠ΅Π½ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ Π΄ΠΎΡΡΡΠΏΠ° Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ.
ΠΠΊΠ»Π°Π΄ΠΊΠΈ
ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΠΊΠ»Π°ΡΡ .nav-tabs
ΡΡΠ΅Π±ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° .nav
.
<ul>
<li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li>
<li><a href="#">ΠΡΠΎΡΠΈΠ»Ρ</a></li>
<li><a href="#">Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅</a></li>
</ul>
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² JavaScript-ΠΏΠ»Π°Π³ΠΈΠ½Π΅
ΠΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript-ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ ΡΠΎΡ ΠΆΠ΅ HTML, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .nav-pills
Π²ΠΌΠ΅ΡΡΠΎ .nav-tabs
:
<ul>
<li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li>
<li><a href="#">ΠΡΠΎΡΠΈΠ»Ρ</a></li>
<li><a href="#">Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅</a></li>
</ul>
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠ΅. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ .nav-stacked
.
<ul>
...
</ul>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΉ
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ .nav-justified
ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎ 768px. ΠΠ° ΠΌΠ΅Π½ΡΡΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΎΡΡΠΎΡΡΡ.
WebKit ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ, Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅
ΠΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π° v7.0.1, Safari ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π½ΠΈΠ²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½Ρ ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ. ΠΡΠ° ΠΎΡΠΈΠ±ΠΊΠ° ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π² ΠΏΡΠΈΠΌΠ΅Ρ justified nav.
<ul>
...
</ul>
<ul>
...
</ul>
ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
Π Π»ΡΠ±ΡΡ
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠΏΠΈΡΠΊΠΎΠ²) ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ .disabled
Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π½ΠΈΡ
ΡΠ΅ΡΡΡ
ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½Π½Ρ
ΠΡΠΎΡ ΠΊΠ»Π°ΡΡ ΠΌΠ΅Π½ΡΠ΅Ρ Π»ΠΈΡΡ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ <a>
, Π½ΠΎ Π½Π΅ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ. ΠΠ»Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ JavaScript.
<ul>
...
<li><a href="#">ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
...
</ul>
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ HTML ΠΈ JavaScript ΠΏΠ»Π°Π³ΠΈΠ½Π° Π΄Π»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠΊΠ»Π°Π΄ΠΊΠΈ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ
<ul>
...
<li>
<a data-toggle="dropdown" href="#">
Dropdown <span></span>
</a>
<ul>
...
</ul>
</li>
...
</ul>
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ
<ul>
...
<li>
<a data-toggle="dropdown" href="#">
Dropdown <span></span>
</a>
<ul>
...
</ul>
</li>
...
</ul>
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²Π»ΡΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ΅Π»Ρ-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»ΡΠΆΠ°Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΡΠ°ΠΉΡΠΎΠ². ΠΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΎΠ½ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ (ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ), Π° ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΌΠΎΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΌΡ.
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Bootstrap Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ NavBar, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΡΠ΄Ρ. Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅:
- Π£ΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ NavBar ΠΏΡΠ½ΠΊΡΠΎΠ².
- Π‘ΠΊΡΠΎΠΉΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ NavBar Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΡΠΊΡΠ°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΡΠΈΠ»ΠΈΡ.
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠΎΡΠΊΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈ NavBar ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ²Π΅ΡΠ½ΡΡΡΠΌ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌΠΎΠΌ. ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
@grid-float-breakpoint
ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²mnt ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ.
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² JavaScript
ΠΡΠ»ΠΈ JavaScript ΠΎΡΠΊΠ»ΡΡΠ΅Π½ ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° ΡΡΠ°Π½Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ·ΠΊΠΎΠΉ, Π΄Π»Ρ ΡΡΠΎΠ±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΠ²Π΅ΡΠ½ΡΠ»Π°ΡΡ, ΡΠΎ ΡΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .navbar-collapse
.
<nav role="navigation">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div>
<ul>
<li><a href="#">Π‘ΡΡΠ»ΠΊΠ°</a></li>
<li><a href="#">Π‘ΡΡΠ»ΠΊΠ°</a></li>
<li>
<a href="#" data-toggle="dropdown">Dropdown <b></b></a>
<ul>
<li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">Π§ΡΠΎ-ΡΠΎ Π΅ΡΠ΅</a></li>
<li></li>
<li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
<li></li>
<li><a href="#">ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
</li>
</ul>
<form role="search">
<div>
<input type="text" placeholder="Search">
</div>
<button type="submit">ΠΡΠΏΡΠ°Π²ΠΈΡΡ</button>
</form>
<ul>
<li><a href="#">Π‘ΡΡΠ»ΠΊΠ°</a></li>
<li>
<a href="#" data-toggle="dropdown">Dropdown <b></b></a>
<ul>
<li><a href="#">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">ΠΡΡΠ³ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅</a></li>
<li><a href="#">Π§ΡΠΎ-ΡΠΎ Π΅ΡΠ΅</a></li>
<li></li>
<li><a href="#">ΠΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li>
</ul>
</li>
</ul>
</div><!-- /. navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π² Π²Π°ΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Bootstrap ΡΡΠ΅Π±ΡΠ΅Ρ ΠΏΠ»Π°Π³ΠΈΠ½Π° collapse.
ΠΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ role="navigation"
Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΈΡ
Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ.
Π€ΠΎΡΠΌΡ
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΎΡΠΌΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
.navbar-form
Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, ΠΈ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΡΠ²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ·ΠΊΠΈΡ
ΡΠΌΠΎΡΡΠΎΠ²ΡΡ
ΠΎΠΊΠ½Π°Ρ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, Π³Π΄Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
ΠΠ°ΠΊ Π²Π΅Π΄ΡΡΠΈΠΉ, ΠΊΠ»Π°ΡΡ .navbar-form
ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ .form-inline
ΡΠ΅ΡΠ΅Π· mixin. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π³ΡΡΠΏΠΏΡ Π²Π²ΠΎΠ΄Π°, ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² navbar.
<form role="search">
<div>
<input type="text" placeholder="Search">
</div>
<button type="submit">ΠΡΠΏΡΠ°Π²ΠΈΡΡ</button>
</form>
ΠΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ Π² Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π½Π°ΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΡΠ»ΡΠΊΠΈ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° (screen readers) Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠ»ΡΠΊΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°. ΠΠ»Ρ Π΄Π°Π½Π½ΡΡ
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΡΠΎΡΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΡΡΡΡ ΡΡΠ»ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»Π°ΡΡ .sr-only
.
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ .navbar-btn
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ <ΠΈ>
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² <html>
Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡ
ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»ΡΡ
.
<button type="button">ΠΠΎΠΉΡΠΈ</button>
Π‘ΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΠΊ ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, .navbar-btn
ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
<a>
ΠΈ <input>
. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½ΠΈ ΠΎΠ΄ΠΈΠ½ .navbar-btn
ΠΈΠ»ΠΈ ΠΆΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
<a>
Π²Π½ΡΡΡΠΈ . navbar-nav
.
Π’Π΅ΠΊΡΡ
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΡΡΠΎΠΊΡ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .navbar-text
, ΠΎΠ±ΡΡΠ½ΠΎ Ρ ΡΠ΅Π³ΠΎΠΌ <p>
, Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ²Π΅ΡΠ°.
<p>Signed in as Mark Otto</p>
ΠΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
ΠΡΠ΄ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π½Π΅ΠΎΠ±ΡΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊΠ»Π°ΡΡ .navbar-link
Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ
ΡΠ²Π΅ΡΠΎΠ² Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»ΡΡ
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»ΡΡ
.
<p>Signed in as <a href="#">Mark Otto</a></p>
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°ΠΉΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, ΡΠΎΡΠΌΡ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΅ΠΊΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ .navbar-left
ΠΈΠ»ΠΈ .navbar-right
. ΠΠ±Π° ΠΊΠ»Π°ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ CSS float Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, Π²Π»ΠΎΠΆΠΈΡΠ΅ ΠΈΡ
Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ <ul>
Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ.
ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ ΡΠ²Π»ΡΡΡΡΡ ΡΠΌΠ΅ΡΠ°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ ΠΊΠ»Π°ΡΡΠΎΠ² .pull-left
ΠΈ .pull-right
, Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ².
Π€ΠΈΠΊΡΠ°ΡΠΈΡ Π²Π²Π΅ΡΡ Ρ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ .navbar-fixed-top
ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ .container
ΠΈΠ»ΠΈ .container-fluid
Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΎΠ²ΠΊΠΈ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
<nav role="navigation">
<div>
...
</div>
</nav>
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ padding Π΄Π»Ρ body
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π½Π°Π»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ padding
Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ <body>
. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅. Π‘ΠΏΡΠ°Π²ΠΊΠ°: ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 50px.
body { padding-top: 70px; }
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΡΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ Bootstrap CSS.
Π€ΠΈΠΊΡΠ°ΡΠΈΡ Π²Π½ΠΈΠ·Ρ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ .navbar-fixed-bottom
ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ .container
ΠΈΠ»ΠΈ .container-fluid
Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΎΠ²ΠΊΠΈ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
<nav role="navigation">
<div>
...
</div>
</nav>
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ padding Π΄Π»Ρ body
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π½Π°Π»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ padding
Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ <body>
. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅. Π‘ΠΏΡΠ°Π²ΠΊΠ°: ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 50px.
body { padding-bottom: 70px; }
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΡΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ Bootstrap CSS.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²Π΅ΡΡ
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π° ΠΏΠΎΠ»Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² . navbar-static-top
ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΠ΅ .container
ΠΈΠ»ΠΈ .container-fluid
, Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΎΠ²ΠΊΠΈ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΠΎΡΡΡΡΠΏΠ»Π΅Π½ΠΈΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ² .navbar-fixed-*
, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π»ΡΠ±ΠΎΠΉ padding
ΠΈ body
.
<nav role="navigation">
<div>
...
</div>
</nav>
ΠΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² .navbar-inverse
.
<nav role="navigation">
...
</nav>
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ.
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π² CSS ΡΠ΅ΡΠ΅Π· :before
ΠΈ content
.
<ol>
<li><a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a></li>
<li><a href="#">ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°</a></li>
<li>ΠΠ°Π½Π½ΡΠ΅</li>
</ol>
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ, ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° Π»ΠΈΡΡΠ°Π½ΠΈΡ.
ΠΡΠΎΡΡΠ°Ρ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΡ inspired by Rdio, ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΏΠΎΠΈΡΠΊΠ°. ΠΠΎΠ»ΡΡΠΎΠΉ Π±Π»ΠΎΠΊ ΡΡΡΠ΄Π½ΠΎ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Ρ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
Π‘ΡΡΠ»ΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π½ΡΠΆΠ΄. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .disabled
Π΄Π»Ρ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΈ .active
Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1 <span>(current)</span></a></li>
. ..
</ul>
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ»ΠΈ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Ρ anchors Π΄Π»Ρ <span>
ΡΠ΄Π°Π»ΠΈΠ² Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ, ΠΏΡΠΈ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠΈ ΡΠ΅Π»Π΅Π²ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ.
<ul>
<li><span>«</span></li>
<li><span>1 <span>(current)</span></span></li>
...
</ul>
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΡΡΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ²ΠΎΠ΄Π°? ΠΠΎΠ±Π°Π²ΡΡΠ΅ .pagination-lg
ΠΈΠ»ΠΈ .pagination-sm
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
<ul>...</ul>
<ul>...</ul>
<ul>...</ul>
ΠΡΡΡΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ Ρ Π»Π΅Π³ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ ΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΡΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΠ³ΠΈ ΠΈ ΠΆΡΡΠ½Π°Π»Ρ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π»ΠΈΡΡΠ°Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ»ΠΊΠΈ, Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ-ΡΠ΅Π½ΡΡΡ.
<ul>
<li><a href="#">ΠΡΠ΅Π΄ΡΠ΄ΡΡΠ°Ρ</a></li>
<li><a href="#">Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ</a></li>
</ul>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠ»ΠΊΡ:
<ul>
<li><a href="#">← Π‘ΡΠ°ΡΠ°Ρ</a></li>
<li><a href="#">ΠΠΎΠ²Π°Ρ →</a></li>
</ul>
ΠΠ°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
ΠΠΈΡΡΠ°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ .disabled
.
<ul>
<li><a href="#">← Π‘ΡΠ°ΡΠ°Ρ</a></li>
<li><a href="#">ΠΠΎΠ²Π°Ρ →</a></li>
</ul>
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΠΎΠ²ΡΠΉ
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΠΎΠ²ΡΠΉ
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΠΎΠ²ΡΠΉ
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΠΎΠ²ΡΠΉ
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΠΎΠ²ΡΠΉ
<h4>ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° <span>ΠΠΎΠ²ΡΠΉ</span></h4>
ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ
ΠΠΎΠ±Π°Π²ΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΌΠ΅ΡΠΊΠΈΠΈ.
Default Primary Success Info Warning Danger
<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>
ΠΠ΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΈΠ»ΠΈ Π½Π΅ΠΏΡΠΎΡΠΈΡΠ°Π½Π½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ <span>
, Bootstrap Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅.
<a href="#">Inbox <span>42</span></a>
Π‘Π°ΠΌΠΎΡΠ²Π΅ΡΡΡΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠ³Π΄Π° Π½Π΅Ρ Π½ΠΎΠ²ΡΡ
ΠΈΠ»ΠΈ Π½Π΅ΠΏΡΠΎΡΠΈΡΠ°Π½Π½ΡΡ
Π·Π°ΠΏΠΈΡΠ΅ΠΉ, Π·Π½Π°ΡΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ²Π΅ΡΠ½ΡΡΡ (ΡΠ΅ΡΠ΅Π· CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ :empty
), ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
ΠΠ½Π°ΡΠΊΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°ΠΌΠΎΠ·Π³ΠΎΡΡΠ°ΡΠΈΡΡ Π² Internet Explorer 8, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΠΌΡ Π½Π΅ Ρ
Π²Π°ΡΠ°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° :empty
.
ΠΠ΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π·Π½Π°ΡΠΊΠΈ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°Ρ .
<ul>
<li>
<a href="#">
<span>42</span>
ΠΠ»Π°Π²Π½Π°Ρ
</a>
</li>
...
</ul>
ΠΠ΅Π³ΠΊΠΈΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΈΡΡΡΡ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ ΠΈ ΠΎΡΠ΅Π½Ρ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ, Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊ Π²Π°ΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅
<div>
<h2>ΠΡΠΈΠ²Π΅Ρ, ΠΌΠΈΡ!</h2>
<p>...</p>
<p><a role="button">Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅</a></p>
</div>
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΊΡΠ°Π½ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π±Π΅Π· Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ
ΡΠ³Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ .container
, Π½ΠΎ, Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΌΠ΅ΡΠ°Π΅Ρ .container
.
<div>
<div>
...
</div>
</div>
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ ΠΏΡΠΎΡΡΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ Π΄Π»Ρ h2
, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΎΡΡΡΡΠΏ ΠΈ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. Π Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ small
ΠΈ h2
, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ).
<div>
<h2>ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ <small>ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ</small></h2>
</div>
Π Π°ΡΡΠΈΡΡΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΊΠΈ Bootstrap Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΡΡΠΊΠΈΠ·Π° Π΄Π»Ρ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π²ΠΈΠ΄Π΅ΠΎ, ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΡΠΊΠΈΠ·Ρ Bootstrap ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ, Π»ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ.
<div>
<div>
<a href="#">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
ΠΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ HTML, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ, ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΡΡΠΊΠΈΠ·ΠΎΠ².
Π―ΡΠ»ΡΠΊ ΡΡΠΊΠΈΠ·Π°
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ°
Π―ΡΠ»ΡΠΊ ΡΡΠΊΠΈΠ·Π°
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ°
Π―ΡΠ»ΡΠΊ ΡΡΠΊΠΈΠ·Π°
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ΠΠ½ΠΎΠΏΠΊΠ° ΠΠ½ΠΎΠΏΠΊΠ°
<div>
<div>
<div>
<img data-src="holder.js/300x200" alt="...">
<div>
<h4>Π―ΡΠ»ΡΠΊ ΡΡΠΊΠΈΠ·Π°</h4>
<p>...</p>
<p><a href="#" role="button">ΠΠ½ΠΎΠΏΠΊΠ°</a> <a href="#" role="button">ΠΠ½ΠΎΠΏΠΊΠ°</a></p>
</div>
</div>
</div>
</div>
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ²ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Π§ΡΠΎΠ±Ρ Π±ΡΠ»Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΊΡΡΡΠΈΡ ΡΠ°ΠΊΠΈΡ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ jQuery.
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΠ»Ρ Π±Π°Π·ΠΎΠ²ΡΡ
Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΠΉ, ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΡ ΠΈ ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ .alert
, ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ
ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, .alert-success
).
ΠΠ΅Π· ΠΊΠ»Π°ΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠ°ΠΆΠ½ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π° ΠΈΠΌΠ΅ΡΡ Π»ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ°ΠΆΠ½ΡΠ΅ ΡΠ΅ΡΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΌΠ°Π»ΠΎ ΡΠΌΡΡΠ»Π°, ΡΠ°ΠΊ ΡΡΠΎ Π²Π°ΠΌ Π΅ΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ Π΄Π»Ρ Π½ΠΈΡ ΡΠΈΠΏ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ. ΠΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΈΠ· Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΠΉ: ΡΡΠΏΠ΅ΡΠ½ΠΎΠ΅, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠ΅, ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Better check yourself, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
ΠΠ°ΠΌΠ΅ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡΡΡΡ
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π»ΡΠ±ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ .alert-dismissable
ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ Π·Π°ΠΊΡΡΡΠΈΡ.
Γ Warning! Better check yourself, you’re not looking too good.
<div>
<button type="button" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
ΠΠ±Π΅ΡΠΏΠ΅ΡΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <button>
Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ data-dismiss="alert"
.
Π‘ΡΡΠ»ΠΊΠΈ Π² Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ .alert-link
, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ²Π΅ΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π»ΡΠ±ΠΎΠ³ΠΎ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡ.
<div>
<a href="#">...</a>
</div>
<div>
<a href="#">...</a>
</div>
<div>
<a href="#">...</a>
</div>
<div>
<a href="#">...</a>
</div>
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²ΡΡΠ΅ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ Ρ ΠΎΠ΄Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΠΈΠ»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½ΠΎ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Internet Explorer 9 ΠΈ ΡΡΠ°ΡΡΠ΅, ΠΈΠ»ΠΈ Π² ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΡΡ Firefox. Opera 12 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span>60% Complete</span>
</div>
</div>
Π‘ ΠΌΠ΅ΡΠΊΠΎΠΉ
Π£Π΄Π°Π»ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡ .sr-only
ΠΈΠ·Π½ΡΡΡΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ. ΠΠ»Ρ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ°, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ min-width
ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ ΠΌΠ΅ΡΠΊΠ° ΡΠ΅ΠΊΡΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ.
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
60%
</div>
</div>
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ
ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΊΠ»Π°ΡΡΡ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ.
<div>
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span>40% Complete (success)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span>20% Complete</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span>60% Complete (warning)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<span>80% Complete</span>
</div>
</div>
ΠΠΎΠ»ΠΎΡΠ°ΡΡΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΠ°ΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. ΠΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π² IE8.
<div>
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span>40% Complete (success)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span>20% Complete</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span>60% Complete (warning)</span>
</div>
</div>
<div>
<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<span>80% Complete (danger)</span>
</div>
</div>
ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ .active
— .progress-striped
Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π»Π΅Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠ°ΡΠΎΡΡΠΈ. ΠΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π² IE9 ΠΈ Π½ΠΈΠΆΠ΅.
<div>
<div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
<span>45% Complete</span>
</div>
</div>
Π‘Π²ΠΎΠ΄Π½ΡΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ
Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .progress
Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div>
<div>
<span>35% Complete (success)</span>
</div>
<div>
<span>20% Complete (warning)</span>
</div>
<div>
<span>10% Complete (danger)</span>
</div>
</div>
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ Π±Π»ΠΎΠ³Π°, ΡΠ²ΠΈΡΡΠ΅ΡΠ°, ΠΈ Ρ.Π΄.), ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΡΠ΄ΠΎΠΌ Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡΡ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΠΈΠ΄Π΅ΠΎ, Π°ΡΠ΄ΠΈΠΎ) ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
<div>
<a href="#">
<img src="..." alt="...">
</a>
<div>
<h5>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠ΅Π΄ΠΈΠ°</h5>
...
</div>
</div>
Π‘ΠΏΠΈΡΠΎΠΊ ΠΌΠ΅Π΄ΠΈΠ°
ΠΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΡΠΏΠΈΡΠΊΠΎΠ² (ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΡΠ΄Π° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΊΠ° ΡΡΠ°ΡΠ΅ΠΉ).
<ul>
<li>
<a href="#">
<img src="..." alt="...">
</a>
<div>
<h5>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠ΅Π΄ΠΈΠ°</h5>
...
</div>
</li>
</ul>
Π‘ΠΏΠΈΡΠΎΠΊ Π³ΡΡΠΏΠΏ ΡΠ²Π»ΡΠ΅ΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΈ ΠΌΠΎΡΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, Π½ΠΎ ΠΈ Π΄Π»Ρ ΡΠ΅Π³ΠΎ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
Π‘Π°ΠΌΡΠΌ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ Π³ΡΡΠΏΠΏΡ Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½ΠΈΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ, ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ. ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΊ Π½Π΅ΠΌΡ ΠΎΠΏΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, ΠΈΠ»ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSS.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Morbi leo risus</li>
<li>Porta ac consectetur ac</li>
<li>Vestibulum at eros</li>
</ul>
ΠΠ½Π°ΡΠΊΠΈ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π΄ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΡΠΏΠΈΡΠΊΠ° Π³ΡΡΠΏΠΏ, ΠΈ ΠΎΠ½ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
<ul>
<li>
<span>14</span>
Cras justo odio
</li>
</ul>
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π‘ΡΡΠ»ΠΎΡΠ½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΡΠΏΠΈΡΠΊΠΎΠ² Π³ΡΡΠΏΠΏ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² <a>
Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ° (Π·Π΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div>
Π²ΠΌΠ΅ΡΡΠΎ <ul>
). ΠΠ΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π΅ΡΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠ½ΠΊΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
<div>
<a href="#">
Cras justo odio
</a>
<a href="#">Dapibus ac facilisis in</a>
<a href="#">Morbi leo risus</a>
<a href="#">Porta ac consectetur ac</a>
<a href="#">Vestibulum at eros</a>
</div>
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΠΎ. Π’Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ .active
.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
<ul>
<li>Dapibus ac facilisis in</li>
<li>Cras sit amet nibh libero</li>
<li>Porta ac consectetur ac</li>
<li>Vestibulum at eros</li>
</ul>
<div>
<a href="#">Dapibus ac facilisis in</a>
<a href="#">Cras sit amet nibh libero</a>
<a href="#">Porta ac consectetur ac</a>
<a href="#">Vestibulum at eros</a>
</div>
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠΉ HTML, Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π³ΡΡΠΏΠΏ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
<div>
<a href="#">
<h5>ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠ½ΠΊΡΠ° ΡΠΏΠΈΡΠΊΠ° Π³ΡΡΠΏΠΏΡ</h5>
<p>...</p>
</a>
</div>
Π₯ΠΎΡΡ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π²ΠΎ ΡΡΠΎ-ΡΠΎ ΡΠΏΠ°ΠΊΠΎΠ²Π°ΡΡ DOM. ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°Π΅Π², ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠ°Π½Π΅Π»ΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²ΡΠ΅ .panel
ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ°ΠΌΠΊΠ° (border) ΠΈ ΠΎΡΡΡΡΠΏΡ (padding), ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
<div>
<div>
Basic panel example
</div>
</div>
ΠΠ°Π½Π΅Π»Ρ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
ΠΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ .panel-heading
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π»ΡΠ±ΠΎΠΉ <h2>
—<h6>
Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .panel-title
, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ΅Π΄Π²ΠΈΠ·Π½Π°ΡΠ΅Π½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ.
Panel heading without title
Panel content
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
<div>
<div>Panel heading without title</div>
<div>
Panel content
</div>
</div>
<div>
<div>
<h4>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ</h4>
</div>
<div>
Panel content
</div>
</div>
ΠΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² .panel-footer
. ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΡΡΠ° ΠΏΠ°Π½Π΅Π»Ρ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΎΠΌ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ°ΠΌΠΊΠΈ (borders), ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
<div>
<div>
Panel content
</div>
<div>Panel footer</div>
</div>
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ².
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ
Panel content
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
Π‘ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ
ΠΡΡΠ°Π²ΡΡΠ΅ Π»ΡΠ±ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Π±Π΅Π· ΡΠ°ΠΌΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .table
Π²Π½ΡΡΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ .panel-body
, ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π΅ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Π²Π²Π΅ΡΡ
Ρ Π΄Π»Ρ ΡΠ°Π·Π³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ.
Panel heading
ΠΠ΄Π΅ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | ΠΠΌΡ | Π€Π°ΠΌΠΈΠ»ΠΈΡ | ΠΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div>
<!-- Default panel contents -->
<div>Panel heading</div>
<div>
<p>...</p>
</div>
<!-- Table -->
<table>
...
</table>
</div>
ΠΡΠ»ΠΈ ΠΏΠ°Π½Π΅Π»Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»Π°, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡΡΡ ΠΈΠ· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ.
Panel heading
# | ΠΠΌΡ | Π€Π°ΠΌΠΈΠ»ΠΈΡ | ΠΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div>
<!-- Default panel contents -->
<div>Panel heading</div>
<!-- Table -->
<table>
...
</table>
</div>
Π‘ΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ Π³ΡΡΠΏΠΏ
ΠΠ΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π³ΡΡΠΏΠΏ Π² ΠΏΡΠ΅Π΄Π΅Π»Ρ Π»ΡΠ±ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
Panel heading
ΠΠ΄Π΅ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div>
<!-- Default panel contents -->
<div>Panel heading</div>
<div>
<p>...</p>
</div>
<!-- List group -->
<ul>
<li>Cras justo odio</li>
<li>Dapibus ac facilisis in</li>
<li>Morbi leo risus</li>
<li>Porta ac consectetur ac</li>
<li>Vestibulum at eros</li>
</ul>
</div>
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΡΡΠ΅ΠΉΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΊΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ — Π±ΡΠ΄ΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ΅ΠΊΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠ΅.
<div>...</div>
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ
Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΠΏΡ (padding) ΠΈ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ ΡΠ³Π»ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π²Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΊΠ»Π°ΡΡΠΎΠ².
Look, I’m in a large well!
<div>...</div>
Look, I’m in a small well!
<div>...</div>
Bootstrap ΠΡΡΡΡΡΠ°ΠΏ Π£ΡΠ΅Π±Π½ΠΈΠΊ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
Bootstrap ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ HTML, CSS ΠΈ JavaScript Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
Bootstrap Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ!
ΠΠ°ΡΠ½ΠΈΡΠ΅ ΠΈΠ·ΡΡΠ°ΡΡ Bootstrap ΡΠ΅ΠΉΡΠ°Ρ Β»
Start Bootstrap
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
Π ΡΡΠΎΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ Bootstrap ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠΎΡΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Bootstrap.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ Bootstrap
Β Β ΠΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ Bootstrap ΡΡΡΠ°Π½ΠΈΡΠ°
Β ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ!
<div>
Β <div>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 1</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ
..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β </div>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 2</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ
..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β </div>
Β Β Β <div>
Β Β Β Β Β <h4>ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 3</h4>
Β Β Β Β Β <p>ΠΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ
..</p>
Β Β Β Β Β <p>ΠΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ..</p>
Β Β Β </div>
Β </div>
</div>
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅», ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Bootstrap
ΠΠ° HTML5CSS Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Bootstrap Π²ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠΎΠ² CSS, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ JavaScript ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²-Π²ΡΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ:
Π’Π΅ΠΌΡ/ΡΠ°Π±Π»ΠΎΠ½Ρ Bootstrap
ΠΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Bootstrap, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ. ΠΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ:
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 β ΠΠΎΠ²Π΅ΠΉΡΠ°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap; Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡΡ.
Bootstrap 4 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅, ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠ΅ Π²ΡΠΏΡΡΠΊΠΈ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΏΠ»Π°ΡΡΠΎΡΠΌ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Internet Explorer 9 ΠΈ Π²Π½ΠΈΠ· Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE8-9, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap 3. ΠΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap, ΠΈ ΠΎΠ½Π° ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π΄Π»Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΠΊ Π½Π΅ΠΌΡ.
bootstrap 4.* β ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ
Π ΠΊΠΎΠ½ΡΠ΅ Π»Π΅ΡΠ° Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Bootstrap, ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π·Π°ΠΏΠΈΡΡ ΠΎ Π²ΡΡ ΠΎΠ΄Π΅ Π°Π»ΡΡΠ° Π²Π΅ΡΡΠΈΡ Botstrap 4. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ²Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ΄Π°ΡΠΈΡ Π½Π°ΠΌ Π΄Π°Π½Π½ΡΠΉ ΡΠ΅Π»ΠΈΠ·.
- ΠΠΌΠ΅ΡΡΠΎ Less, Π² Bootstrap 4 ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Sass
- Π£Π»ΡΡΡΠ΅Π½Π° ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ
- ΠΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° FlexBox
- ΠΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² Bootstrap 4 β ΠΊΠ°ΡΡΠΎΡΠΊΠΈ (cards)
- ΠΠΎΡΠ²ΠΈΠ»ΡΡ ΡΠ±ΡΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ Reboot
- ΠΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅ΠΌ Bootstrap
- ΠΡΠ΅ΠΊΡΠ°ΡΠ΅Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE8
- ΠΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ EM ΠΈ REM
- ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ΡΒ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ JavaScript
- Π£Π»ΡΡΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ popover ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
- ΠΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ΡΡΡΡΠΊΡΡΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² Bootstrap 4
Less Sass Bootstrap
Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Bootstrap 4 ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π° Sass, ΡΠ°Π½ΡΡΠ΅ Bootstrap ΡΠΎΠ·Π΄Π°Π²Π°Π»ΡΡ Π½Π° Less. ΠΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Libsass, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π±ΡΡΡΡΠ΅Π΅ ΡΠ²ΠΎΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΎΠ².
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ Bootstrap
Bootstrap 4 ΡΡΠ°Π» Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π΅Π½ ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ (ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ, ΠΏΠ»Π°Π½ΡΠ΅ΡΡ). ΠΠΈΠΊΡΠΈΠ½Ρ Π² Bootstrap 4 ΡΡΠ°Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎ-ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ. ΠΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΌΠΈΠΊΡΠΈΠ½Π°ΠΌΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° FlexBox
Π Bootstrap 4 Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ FlexBox, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠΎΡΠΎΡΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ. Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ FlexBox Π² Bootstrap, Π½ΡΠΆΠ½ΠΎ Π²ΡΡΡΠ°Π²ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΈ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π·Π°Π½ΠΎΠ²ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ (cards)
Π Bootstrap 4 Π±ΡΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ (wells, thumbnails ΠΈ panels) Π²ΠΌΠ΅ΡΡΠΎ Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ cards (ΠΊΠ°ΡΡΠΎΡΠΊΠΈ), ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π»ΡΡΡΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½Π΅ΠΉ.
Π‘Π±ΡΠΎΡ HTML Reboot
ΠΠΎΡΠ²ΠΈΠ»ΡΡ Π½ΠΎΠ²ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ HTML-ΡΠ΅Π³ΠΎΠ² (Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ²ΠΎΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ. ΠΠ°Π½Π½ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΡΠ΅ΠΏΠ΅ΡΡ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² Sass ΡΠ°ΠΉΠ»Π΅ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Reboot. ΠΡΠ΅ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ ΡΠ±ΡΠΎΡΠ°, ΡΠΎΠ±ΠΈΡΠ°ΡΡΡΡ Π² ΡΠ°ΠΉΠ» normalize.css
ΠΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅ΠΌ
Π Bootstrap 4, ΠΏΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° (ΡΠ²Π΅ΡΠ°, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ ΠΈ Ρ.Π΄.) ΡΠΎΠ±ΡΠ°Π½Ρ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, ΡΡΠΎ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
IE8 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ
ΠΡΠ°ΡΠ·Π΅Ρ Internet Explorer Π²ΠΎΡΡΠΌΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, Π² Bootstrap 4 Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈΠ· CSS3, Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡΡΠΎ Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ Π±Π»Π°Π³ΠΎΡΠ²ΠΎΡΠ½ΠΎ ΡΠΊΠ°ΠΆΠ΅ΡΡΡ Π½Π° Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°.
Π Π°Π·ΠΌΠ΅ΡΡ Π² em ΠΈ rem
Π Bootstrap 4 Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² em ΠΈ rem, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΈΡΡΡ ΠΈ ΠΌΠΎΠ΄ΡΠ»ΠΈ ΡΡΠ°Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ.
JavaScript ES6
ΠΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Botstrap 4, Π±ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Ρ Ρ ES5 (JavaScript 5) Π½Π° Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΡ JavaScript ES6. ΠΠΎΠ΄ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π½Π° ES6 (JavaScript 6) Π±ΠΎΠ»Π΅Π΅ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½ Π½Π°Π΄ΡΠΆΠ΅Π½ ΠΈ Π±ΡΡΡΡ.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ popover ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ popover (Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅) ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² Bootstrap 4 ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»Π°ΠΆΠ΅Π½Π½ΠΎ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎ.
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Bootstrap 4
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Bootstrap 4 ΡΡΠ°Π»Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Markdown (ΠΎΠ±Π»Π΅Π³ΡΡΠ½Π½ΡΠΉ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ), ΡΠ°ΠΊΠΆΠ΅ ΡΠ»ΡΡΡΠ΅Π½ ΠΏΠΎΠΈΡΠΊ ΠΏΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Bootstrap 3
ΠΠΎΠ³Π΄Π° Bootstrap ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ»ΡΡ ΡΠΎ Π²ΡΠΎΡΠΎΠΉ (2) Π²Π΅ΡΡΠΈΠΈ Π½Π° ΡΡΠ΅ΡΡΡ (3), ΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Bootstrap 2 ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΠ»Π°ΡΡ. ΠΡΠΎ Π²ΡΠ·Π²Π°Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°ΡΠ΅ΠΊΠ°Π½ΠΈΠΉ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°. ΠΠ° ΡΡΠΎΡ ΡΠ°Π· Ρ Π²ΡΡ ΠΎΠ΄ΠΎΠΌ Bootstrap 4, ΡΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ ΠΏΡΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠΈ Π±Π°Π³ΠΎΠ².
ΠΡ ΠΈ Π½Π°ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ, ΠΊΠΎΠ΄ ΡΠ°ΠΉΡΠΎΠ² ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap 3, Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈΠΉ Π΄ΠΎ Bootstrap 4, ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ.
ΠΡΡΠ°Π»ΡΠ½ΠΎΠ΅
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Bootstrap 4 ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ Π½Π΅ ΠΌΠ°Π»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π΅ΡΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ, ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡΠΌΠΈ.
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ΄ Bootstrap 3.0 ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ?
ΠΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π½ΡΡΠ΅ Π±ΡΠ»ΠΈ Π½Π° http: / / rc.getbootstrap.com/ , ΠΈΡΡΠ΅Π·Π»ΠΈ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π», ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ:
ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ.
— ΠΠ΄Π΅ ΠΎΠ½ ? ΠΈΠ»ΠΈ ΠΊΡΠΎ-ΡΠΎ Π·Π½Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ Π²ΡΠΏΡΡΠ΅Π½ boostrap 3.0 Π² ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ?
css twitter-bootstrap mobileΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ Mathieu Β Β 01 ΠΌΠ°Ρ 2013 Π² 11:03
3 ΠΎΡΠ²Π΅ΡΠ°
- ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΠΏΠΎΠ»Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ zurb-foundation
ΠΠ°ΠΊ (ΠΈ Π³Π΄Π΅) ΠΏΠΎΠ»ΡΡΠΈΡΡ Π³ΠΎΡΠΎΠ²ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ zurb-foundation. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Zurb’s Foundation 3 ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠ» Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΎΡ http:/ / foundation.zurb.com / docs/index. php . ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠΎΡΠΌΡ. Π ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΎΠ½ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΡΠΌΡ…
- ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Swift?
Π― ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΏΠΎ ΡΠ·ΡΠΊΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Swift, ΠΈ ΠΎΠ½ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΡΡΠ°ΡΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ String[] Π²ΠΌΠ΅ΡΡΠΎ [String]. Π Π±Π»ΠΎΠ³Π΅ Apple Swift Ρ Π²ΠΈΠΆΡ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Π΅ Π΄ΠΎΡΡΡΠΏΠ° (ΠΏΡΠ±Π»ΠΈΡΠ½ΠΎΠΌ, ΡΠ°ΡΡΠ½ΠΎΠΌ, Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌ), Π½ΠΎ Π½Π΅ Π²ΠΈΠΆΡ Π΅Π³ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ…
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ nickl- Β Β 30 ΠΈΡΠ»Ρ 2013 Π² 09:37
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ gma992 Β Β 24 ΠΈΡΠ½Ρ 2014 Π² 14:54
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Appleshell Β Β 01 ΠΌΠ°Ρ 2013 Π² 11:10
- Π³Π΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ bootstrap 3.0 carousal Ρ 4 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ?
Π― ΠΏΡΡΠ°ΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΎΠ΄Π½Ρ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΡΡ ΠΊΠ°ΡΡΡΠ΅Π»Ρ (Ρ 4 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π·Π° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·).) Π² Π±ΡΡΡΡΡΠ°ΠΏ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ. Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Ρ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ bootstrap 3.0. ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π΄Π°ΡΡ ΠΈΠ΄Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ? Π― Π½Π΅ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΡΠΉ 3.0 ΠΏΡΡΠ½ΠΊΠ°…
- ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ nuget.exe 3.0+?
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ, nuget 3.0 Π±ΡΠ» ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π΅Π½. VS2015 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π·Π°ΠΏΠ΅ΡΠ΅Π½Π½ΡΠΌ 3.0. ΠΠ΄Π½Π°ΠΊΠΎ NuGet.CommandLine , ΠΏΠΎΡ ΠΎΠΆΠ΅, Π·Π°ΡΡΡΡΠ» Π½Π° 2.8.6 ( https:/ / www.nuget.org/packages/NuGet.CommandLine ), ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡ, ΠΊΠ°ΠΊ TeamCity, Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π΄ΠΎ 3.0. ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ nuget Π΄Π»Ρ…
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ petclinic Π΄Π»Ρ Spring 3.0?
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ, ΡΠΎΡΡΠΌΡ ΠΈ Ρ. Π΄. ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Spring petclinic. ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎ Π·Π° spring 3.0.x ? (ΠΏΠΎΡ ΠΎΠΆΠ΅, ΠΎΠ½ Π½Π΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅ Ρ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ C# 3.0 grammar?
Π― ΠΏΠ»Π°Π½ΠΈΡΡΡ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ C# 3.0 Π² C#. Π³Π΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ grammar Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΏΠ°ΡΡΠ΅ΡΠ°? ΠΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ANTLR v3 Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Vaadin Π²Π΅ΡΡΠΈΠΈ 6
Π― ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ vaadin version6 . ΠΠ° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ vaadin Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π΄Π»Ρ Vaadin Π²Π΅ΡΡΠΈΠΈ 7 . ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ: ΠΠ½ΠΈΠ³Π° vaadin Π²Π΅ΡΡΠΈΠΈ 6? Π‘ΡΠΌΠΏΠ»Π΅Ρ Π΄Π»Ρ Vaadin Π²Π΅ΡΡΠΈΠΈ 6? ΠΡΠΈΠΌΠ΅Ρ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΠΏΠΎΠ»Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ zurb-foundation
ΠΠ°ΠΊ (ΠΈ Π³Π΄Π΅) ΠΏΠΎΠ»ΡΡΠΈΡΡ Π³ΠΎΡΠΎΠ²ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ zurb-foundation. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Zurb’s Foundation 3 ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠ» Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΎΡ http:/ / foundation.zurb.com / docs/index. php . ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Swift?
Π― ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° ΠΏΠΎ ΡΠ·ΡΠΊΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Swift, ΠΈ ΠΎΠ½ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΡΡΠ°ΡΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ String[] Π²ΠΌΠ΅ΡΡΠΎ [String]. Π Π±Π»ΠΎΠ³Π΅ Apple Swift Ρ Π²ΠΈΠΆΡ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅…
Π³Π΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ bootstrap 3.0 carousal Ρ 4 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ?
Π― ΠΏΡΡΠ°ΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΎΠ΄Π½Ρ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΡΡ ΠΊΠ°ΡΡΡΠ΅Π»Ρ (Ρ 4 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π·Π° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·).) Π² Π±ΡΡΡΡΡΠ°ΠΏ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ. Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Ρ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ bootstrap 3.0. ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ,…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ nuget.exe 3.0+?
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ, nuget 3.0 Π±ΡΠ» ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π΅Π½. VS2015 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π·Π°ΠΏΠ΅ΡΠ΅Π½Π½ΡΠΌ 3.0. ΠΠ΄Π½Π°ΠΊΠΎ NuGet.CommandLine , ΠΏΠΎΡ ΠΎΠΆΠ΅, Π·Π°ΡΡΡΡΠ» Π½Π° 2.8.6 ( https:/ / www.nuget.org/packages/NuGet.CommandLine ), ΡΡΠΎ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² CakePHP 3.0 Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap?
Π― Π½Π°ΡΠΈΠ½Π°Ρ ΡΠ°Π±ΠΎΡΡ Ρ CakePHP 3.0 ΠΈ Π·Π°ΡΡΡΠ΅Π²Π°Ρ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°Ρ Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ΄Π°. Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Twitter Bootstrap: https://github.com/elboletaire/twbs-cake-plugin Ρ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Bootstrap transitions.js?
Π― Π±Ρ Ρ ΠΎΡΠ΅Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Bootstrap Collapse . Collapse ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠ»Π°Π³ΠΈΠ½ transitions Π±ΡΠ» Π²ΠΊΠ»ΡΡΠ΅Π½ Π² Π²Π°ΡΡ Π²Π΅ΡΡΠΈΡ Bootstrap. Π― ΡΠΊΠ°ΡΠ°Π» bootstrap-3.3.7-dist.zip , Π½ΠΎ ΠΎΠ½ Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ…
ΠΠ΄Π΅ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ tkinter?
ΠΠΎΠ³Π΄Π° Ρ ΡΠΌΠΎΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ tkinter Π΄Π»Ρ Python, ΡΠ°ΠΌ Π½Π΅Ρ ΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ ΠΊΠ°ΠΊΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΈΡΡ…
Bootstrap Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π° ΡΡΡΡΠΊΠΎΠΌ
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ web-ΠΏΡΠΎΠ΅ΠΊΡΡ Ρ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ Π² ΠΌΠΈΡΠ΅ front-end Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Bootstrap β ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, CSS ΠΈ JS. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Sass ΠΈ ΠΌΠΈΠΊΡΠΈΠ½Ρ, Π³ΠΈΠ±ΠΊΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΎΠΊ, ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΌΠΎΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° jQuery.
Π’Π΅ΠΊΡΡΠ°Ρ Π²Π΅ΡΡΠΈΡ v4.3.1
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
ΠΠΊΠ»ΡΡΠΈΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Bootstrap Sass ΠΈ JavaScript ΡΠ΅ΡΠ΅Π· Bower, Composer, Meteor ΠΈΠ»ΠΈ npm. ΠΠ°ΠΊΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΎΠΊ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, Π½ΠΎ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²Π°ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎΠΌΠΎΡΠΈ.
Bootstrap CDN
ΠΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ BootstrapβΠΎΠ²ΡΠΊΠΈΠ΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS ΠΈΠ»ΠΈ JS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CDN Bootstrap.
Π’ΠΎΠ»ΡΠΊΠΎ CSS
JS, Popper.js ΠΈ jQuery
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅ΠΌΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap 4 Π½Π° Π½ΠΎΠ²ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΏΡΠ΅ΠΌΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Π½Π° Bootstrap, Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ.
ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅ΠΌΡ
Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΎ ΡΠΎ Π²ΡΠ΅ΠΉ Π»ΡΠ±ΠΎΠ²ΡΡ ΠΊ ΠΌΠΈΡΡ @mdo ΠΈ @fat . ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΈ ΡΡΠ°ΡΡΠΈΠΈ Π½Π°ΡΠΈΡ ΠΈΠ½Π²Π΅ΡΡΠΎΡΠΎΠ² .
ΠΠΊΡΡΠ°Π»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ v4.3.1. ΠΠΎΠ΄ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠΎ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΈ MIT , Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠΎ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΈ CC BY 3.0 .
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ β Π. ΠΠΎΡΠ½ΠΈΠ»ΠΎΠ². Π‘Π²ΠΎΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ°Π·Π²ΠΈΡΠΈΡ ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Ρ ΠΏΡΠΈΡΡΠ»Π°ΠΉΡΠ΅ Π½Π° ΠΏΠΎΡΡΡ [email protected]
Bootstrap ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ HTML, CSS ΠΈ JavaScript Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
Bootstrap Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ!
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
Π ΡΡΠΎΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ Bootstrap ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠΎΡΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Bootstrap.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ Bootstrap
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ!
ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 1
ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 2
ΠΠΎΠ»ΠΎΠ½ΠΊΠ° 3
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅», ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Bootstrap
ΠΠ° HTML5CSS Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Bootstrap Π²ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠΎΠ² CSS, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ JavaScript ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²-Π²ΡΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ:
Π’Π΅ΠΌΡ/ΡΠ°Π±Π»ΠΎΠ½Ρ Bootstrap
ΠΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Bootstrap, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ. ΠΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ:
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 β ΠΠΎΠ²Π΅ΠΉΡΠ°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap; Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡΡ.
Bootstrap 4 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅, ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠ΅ Π²ΡΠΏΡΡΠΊΠΈ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΏΠ»Π°ΡΡΠΎΡΠΌ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Internet Explorer 9 ΠΈ Π²Π½ΠΈΠ· Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE8-9, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap 3. ΠΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap, ΠΈ ΠΎΠ½Π° ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π΄Π»Ρ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΠΊ Π½Π΅ΠΌΡ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
web-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ°ΠΌΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ CSS ΠΈ HTML.
Π’Π΅ΠΊΡΡΠ°Ρ Π²Π΅ΡΡΠΈΡ v3.3.2
ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΅Ρ , Π²ΠΎ Π²ΡΠ΅ΠΌ ΠΌΠΈΡΠ΅.
Bootstrap β ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π² ΡΠΎΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠΎΡΠΊ, ΠΏΠΎΠ²ΡΡΠ°ΡΡΠΈΠΉ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ ΠΎΠ±Π»Π΅Π³ΡΠ°ΡΡΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ web-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠ΅ Π΅ΡΠ΅ ΠΈΡΠ΅ΡΠ΅ ΠΏΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ±Ρ Π²Π»ΡΠ±ΠΈΡΡΡΡ Π² Bootstrap?
ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ CSS, Bootstrap Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π΄Π²ΡΡ ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ CSS ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ², Less ΠΈ Sass.
ΠΠ΄ΠΈΠ½ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ².
Bootstrap Π»Π΅Π³ΠΊΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ Π±Π°Π·ΠΎΠΉ ΠΊΠΎΠ΄Π°, ΠΎΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² Π΄ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ².
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
Π‘ Bootstrap, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΎΠ±ΡΠΈΡΠ½ΡΡ ΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Ρ ΡΠΎΡΠ½ΡΠΌΠΈ ΠΆΠΈΠ²ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Bootstrap Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Π€ΡΠ΅ΠΉΠΌΠΎΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½Π° GitHub.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π½Π° Bootstrap.
ΠΠΈΠ»Π»ΠΈΠΎΠ½Ρ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΡ Π΄Π΅Π»Π°ΡΡΡΡ Π½Π° Bootstrap. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π² ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ°ΡΡΡΡΠ΅ΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ².
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π½Π° Bootstrap Expo, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap.
Π‘ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Ρ Π»ΡΠ±ΠΎΠ²ΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠΈΡΡ, Π°Π²ΡΠΎΡΠ°ΠΌΠΈ: @mdo ΠΈ @fat.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡΠΈ ΡΡΠ°ΡΡΠΈΠΈ Π½Π°ΡΠΈΡ Π²ΠΊΠ»Π°Π΄ΡΠΈΠΊΠΎΠ².
ΠΠΎΠ΄ ΠΏΠΎ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ CC BY 3.0.
ΠΡΡΠ΅Π» ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap 3.4 βΒ Π½ΠΎΠ²ΠΎΡΡΠΈ Π½Π° Tproger
ΠΡΡΠ΅Π» BootstrapΒ 3.4Β β ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΒ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΠΌΠ°Π½Π΄Π° ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠ΅Π½Π° Π½Π°Β ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ BootstrapΒ 4.2, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΊΡΡΠ°Ρ Π²Π΅ΡΡΠΈΡ ΠΏΠΎΠ»ΡΡΠΈΠ»Π° Π½Π΅Β ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ΠΒ ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΡΠ·Π²ΠΈΠΌΠΎΡΡΡΡ ΠΊ XSS ΠΈΒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ΅ΡΠ΅Π· Algolia.
Π§ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ Π²Β ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅
- Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ
.row-no-gutters
, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠΈΡΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· Algolia ΠΈΒ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ.navbar-fixed- *
ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ. - Π Π΅ΡΠ΅Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΡΠ·Π²ΠΈΠΌΠΎΡΡΡΡ ΠΊ XSS-Π°ΡΠ°ΠΊΠ°ΠΌ Π²Β ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ Alert, Carousel, Collapse, Dropdown, Modal ΠΈΒ Tab.
- ΠΠ²ΠΎΠΉΠ½ΡΡ ΡΠ°ΠΌΠΊΡ Π²Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
<abbr>
ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ±ΡΠ°Π»ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ ΠΎΡΠΊΠ°Π·Π°Π»ΠΈΡΡ ΠΎΡΒ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·Β Π½Π°ΡΡΡΠΎΠΉΡΠΈΠΊΠ° ΠΈΒ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Β Π²Π΅Π±-Π½Π°ΡΡΡΠΎΠΉΡΠΈΠΊΠ΅ Gist, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ GitHub Π΄Π°Π²Π½ΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΠ» ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ.
Π§ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ Π²Β Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
- ΠΒ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎΒ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π½ΠΎΠ²ΡΡ ΠΈΒ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Π²Π΅ΡΡΠΈΠΉ.
- ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π²Β Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π° ZeroClipboard Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π½Π°Β clipboard.js, Π°Β ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π²Π΅Π»ΠΈ Π½Π°Β BrowserStack.
- Π Π΅ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ CSS v3Β Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Less.
baseurl
Π·Π°ΠΌΠ΅Π½ΡΠ½ Π½Π°/docs/3.4/
.- ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΠΈΡ Β ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π· HTTPS ΠΈΒ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π΅ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠ΅ URL-Π°Π΄ΡΠ΅ΡΠ°.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π²ΡΠ΅Ρ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ BootstrapΒ 3.4.0 Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π²Β ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. ΠΠ»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π΄ΠΎΒ BootstrapΒ 3.4.0Β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² npm ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΠΊΠΎΠΌΠ°Π½Π΄Ρ npm i bootstrap@previous
ΠΈΠ»ΠΈ npm i [email protected]
. ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΒ ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ΅ΡΠ΅Π· Bower Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎ.
ΠΒ ΡΠ½Π²Π°ΡΠ΅ 2018 Π³ΠΎΠ΄Π° Π²ΡΡΠ»Π° ΡΡΠ°Π±ΠΈΠ»ΡΠ½Π°Ρ ΡΠ΅ΡΠ²ΡΡΡΠ°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°. ΠΒ Π½Π΅ΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈΒ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ, Π°Β ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ CSS Π²ΠΌΠ΅ΡΡΠΎ Sass.
Source: Π±Π»ΠΎΠ³ Bootstrap
html — Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Bootstrap?
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΡΠ΅Π±Π½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π½Π° Webreference.ru. Π’Π°ΠΌ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ ΠΡΡΡΡΡΠ°ΠΏΠ°, Π°Β ΡΡΠ΄ΠΎΠΌΒ β ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠΈ ΠΏΠΎΒ CSS ΠΈΒ HTML.
ΠΡΡΡΡΡΠ°ΠΏΒ β ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ Ρ Π½Π°Π±ΠΎΡΠΎΠΌ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ°Β Π½ΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ±ΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΠ°ΠΉΡ ΡΠΎΒ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠΌ ΠΈΒ Π²ΡΠ΅ΠΌ ΠΏΡΠΎΡΠΈΠΌ, Π½ΠΎΒ Π·Π°Β ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΡΡΡΡΡΠ°ΠΏ Π½Π΅Β ΠΎΡΠ²ΠΎΠΈΡΡ.
ΠΠ°ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΠΡΡΡΡΡΠ°ΠΏ, Π½ΠΎΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π½ΡΠΆΠ½ΠΎ.
ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΏΡΠΎΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΠ°Π³Π°ΠΌΠΈ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄Π½Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΡ Π·Π°Π΄Π°ΡΡ ΠΈΒ ΡΠ΅ΡΠΈΡΠ΅ Π΅Ρ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΠΡΡΡΡΡΠ°ΠΏΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·Β ΠΡΡΡΡΡΠ°ΠΏΠ° ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠΈΡΠ΅ Π½Π°Β ΠΡΡΡΡΡΠ°ΠΏΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ·Β Π±Π»ΠΎΠΊΠΎΠ² Π½Π°Β ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΊΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ. HTML-ΠΊΠΎΠ΄Ρ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ Π½ΠΈΠΌ.
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ΅Π±Π΅ Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΡ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΠΆΠΈΠΊΠ²Π΅ΡΠΈ ΠΈΒ ΠΡΡΡΡΡΠ°ΠΏ ΡΒ CDN, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΡΠ΅Π½Π΅ΡΠΎΠ²Π°ΡΡΡΡ ΠΈΒ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΡΠΆΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--[if lte IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header></header>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
ΠΡΠ°ΠΊΡΠΈΠΊΠΎΠ²Π°ΡΡΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎ Π½Π° https://codepen.io/ Π’Π°ΠΌ ΡΡΠΈΠ»ΠΈ ΠΈΒ ΡΠΊΡΠΈΠΏΡΡ ΠΡΡΡΡΡΠ°ΠΏΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΠ·Β Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π² ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ, ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ, ΡΡΠΎ ΠΡΡΡΡΡΠ°ΠΏ ΡΠΌΠ΅Π΅Ρ ΡΠ°ΠΌ, Π°Β ΡΡΠΎ Π½Π΅Ρ. Π’ΠΎΠ³Π΄Π° ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π°Β ΡΡΡΡΠΊΠΎΠΌ ΠΈΒ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ SO, ΠΊΠ°ΠΊ ΡΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ. ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΉ Π΅ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ, Π°Β Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅Β ΠΡΡΡΡΡΠ°ΠΏ.
Drupal Bootstrap Documentation
Primary tabs
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΡΠ΅ΠΌΠ΅ Drupal Bootstrap
ΠΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΈΠ· ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ². ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°. Π’Π΅ΠΌΡ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½Ρ ΠΈΠ· Markdown ΡΠ°ΠΉΠ»Ρ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅ΡΡΡ ΠΈΠ· Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² PHP.
Π’Π΅ΠΌΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π°Π·Ρ Drupal Bootstrap. ΡΠ΅ΠΌΠ°. ΠΠ½ΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠΎΠ²Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ²ΡΡΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π±Π°Π·ΠΎΠ²Π°Ρ ΡΠ΅ΠΌΠ° Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠΉ.
Π‘ΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ΅ΠΌΡ
ΠΠΎΠ΄-ΡΠ΅ΠΌΡ
ΡΠ°Π±Π»ΠΎΠ½Ρ
ΠΠΎΠΌΠΌΡΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΡΠ»ΡΠ³ΠΈ
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ
Π‘ΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°
Π’Π΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ
Π’Π΅ΡΠΌΠΈΠ½ «bootstrap» ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ΅Π·ΠΌΠ΅ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΡΡΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. ΠΠ»Ρ ΡΡΠ½ΠΎΡΡΠΈ ΠΌΡ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅ΠΌ ΠΏΡΡΠ°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ»ΠΎΠ²ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ. ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
ΠΡΠΈ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΈ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° ΠΏΡΠΎΠ΅ΠΊΡΠ° Drupal Bootstrap ΠΎΠ½ΠΈ
Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ./ themes / bootstrap
ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ
ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Ρ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ. Π’ΠΎΡΠΊΠ° (.
) ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ
ΠΏΠ°ΠΏΠΊΠ° DOCROOT
Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Drupal. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΉΠ»
ΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΡΠΉ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ ./themes/bootstrap/docs/README.md
.
ΠΡΠΈ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΈ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ΄ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ./themes/THEMENAME/
, Π³Π΄Π΅ THEMENAME
— ΡΡΠΎ ΠΌΠ°ΡΠΈΠ½Π½ΠΎΠ΅ ΠΈΠΌΡ Π²Π°ΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠ΅ΠΌΡ.ΠΠ½ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Ρ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ Drupal ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΌΡ: ./themes/THEMENAME/THEMENAME.info.yml
.
ΠΠ ΠΠΠΠ§ΠΠΠΠ: ΠΠ±ΡΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΡ
Π½Π°
Drupal.org Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΠΈ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ contrib
ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ / ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠΉ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΊΠΎΠ΄
Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ
. ΠΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ Π½Π°ΡΡΡΠΎΠ΅Π½ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°ΡΡΡΠΎΠΉΡΠ΅ Π²ΡΠ΅
ΠΏΡΡΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ (Ρ.Π΅. ./ themes / contrib / bootstrap
ΠΈ ./themes/custom/THEMENAME
).
ΡΠ°Π±Π»ΠΎΠ½: bootstrap3 [Β«ΠΠΎΠΊΡΠΠΈΠΊΠΈΒ»]
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Β«ΠΠΎΠΊΡΠΠΈΠΊΠΈΒ»
- 2020-07-29 «Hogfather» Π΄Π°
- 22.04.2018 Β«ΠΡΠΈΠ±ΠΎΒ» Π΄Π°
- 19.02.2017 «Π€ΡΡΡΡΡΠΈΠΊ ΠΡΠ½Π½Π΅ΡΡ» Π΄Π°
- 26.06.2016 «ΠΠ»Π΅Π½ΠΎΡ Π¦ΠΎΡΡ» Π΄Π°
Π¨ΠΈΡΠΎΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Bootstrap Π΄Π»Ρ DokuWiki
- ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅
- 2021-03-11
- Π Π΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ
- ΠΡΡΠΎΡΠ½ΠΈΠΊ
Π‘ ΡΠ΅Π³Π°ΠΌΠΈ bootstrap, bootswatch, cms, cookielaw, hooks, html5, navbar, response, right-sidebar, semantic, sidebar, themes
Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ twistienav4bootstrap3
ΠΠΈΠ±ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Bootstrap Π΄Π»Ρ Β«ΠΠΎΠΊΡΠΠΈΠΊΠΈΒ».
ΠΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ Π°Π΄Π°ΠΏΡΠΈΠ²Π΅Π½ ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ² (ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΡΡ , Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ Ρ. Π.).
Π§ΡΠΎΠ±Ρ Π·Π°Π²Π΅ΡΡΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ / ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠΎΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Bootstrap Wrapper ΠΈ Icons.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
HTML5 ΠΈ CSS3
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ
Π¨Π°Π±Π»ΠΎΠ½ Bootstrap 3.x
ΠΠΏΠΎΡΠ° AnchorJS
Π’ΠΈΠΏ ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΉ ΠΎΠΏΠΎΡΡ
ΠΡΡΠΎΠΊΠ°Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΡΡΡ ΡΠ΅ΡΠ΅Π· Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ
ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Ρ ΡΠΊΠΎΠ² html ΠΈ DokuWiki
ΠΠΏΠΎΡΠ° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ (Π»Π΅Π²Π°Ρ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ°Π²Π°Ρ)
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ΅ΠΌ
Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎ Π±Π°Π½Π½Π΅ΡΠ΅ Π·Π°ΠΊΠΎΠ½Π° ΠΎ ΡΠ°ΠΉΠ»Π°Ρ cookie
ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Ρ Google Analytics
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π°Π²Π°ΡΠ°ΡΠ° Π΄Π»Ρ Gravatar, Libravatar ΠΈ Office365
ΠΠΊΠ»ΡΡΠ°Π΅Ρ
Π Π΅Π»ΠΈΠ·Ρ
ΠΡΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊ Π²ΡΠΏΡΡΠΊΡ ΡΠ°Π±Π»ΠΎΠ½Π°:
ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²
ΠΠ°ΠΏΡΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²
ΠΠΎΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΡ
ΠΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²:
ΠΠΈΡΠ°ΠΉΡΠΊΠΈΠΉ
Π§Π΅ΡΡΠΊΠΈΠΉ
Π€ΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΠΉ
ΠΠ΅ΠΌΠ΅ΡΠΊΠΈΠΉ
ΠΠ΅Π½Π³Π΅ΡΡΠΊΠΈΠΉ
ΠΠ½Π΄ΠΎΠ½Π΅Π·ΠΈΠΉΡΠΊΠΈΠΉ
ΠΡΠ°Π»ΡΡΠ½ΡΠΊΠΈΠΉ
Π―ΠΏΠΎΠ½ΡΠΊΠΈΠΉ
ΠΠΎΡΠ΅ΠΉΡΠΊΠΈΠΉ
ΠΠΎΡΠ²Π΅ΠΆΡΠΊΠΈΠΉ
ΠΠ΅ΡΡΠΈΠ΄ΡΠΊΠΈΠΉ
ΠΠΎΠ»ΡΡΠΊΠΈΠΉ
ΠΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΈΠΉ
ΠΠΎΡΡΡΠ³Π°Π»ΡΡΠΊΠΈΠΉ (ΠΡΠ°Π·ΠΈΠ»ΠΈΡ)
Π ΡΡΡΠΊΠΈΠΉ
Π‘Π»ΠΎΠ²Π°ΡΠΊΠΈΠΉ
ΠΡΠΏΠ°Π½ΡΠΊΠΈΠΉ
ΠΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΠ΅ΡΡ ΠΊ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ Transifex, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΡΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ Π½Π° ΡΠ²ΠΎΠΉ Π»ΡΠ±ΠΈΠΌΡΠΉ ΡΠ·ΡΠΊ.
ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ Π² Β«ΠΠΎΠΊΡΠ²ΠΈΠΊΠΈΒ».
ΠΠ°ΠΏΡΠ°Π²Π»ΡΡΡΠ°Ρ
ΡΠ°ΠΉΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ ΡΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡ
Π Π°Π·Π²ΠΈΡΠΈΠ΅
Π Π΅Π»ΠΈΠ·Ρ
ΠΡΡΠΎΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ
ΠΠ»Π°Π²Π½ΡΠΉ ΡΠΈΠ»ΠΈΠ°Π»
ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
ΠΡΠΈΠ±ΠΊΠΈ / Π·Π°ΠΏΡΠΎΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ
Π‘ΠΎΠΎΠ±ΡΠ°ΠΉΡΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ°Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΡΡ Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ.
ΠΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
Π‘ΠΏΠΈΡΠΎΠΊ Π΄Π΅Π» / Π‘ΠΏΠΈΡΠΎΠΊ ΠΆΠ΅Π»Π°Π½ΠΈΠΉ
FAQ
ΠΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ² ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ (ΠΈΠ»ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ) Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ — Ρ Π±Ρ Ρ ΠΎΡΠ΅Π», ΡΡΠΎΠ±Ρ Π»Π΅Π²Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Π°Ρ , Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡ Π½Π΅ Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π΅ΡΡΡ Π½Π°Π±ΠΎΡ ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ. ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ?
ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ²Π΅ΡΠ½ΡΡΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ?
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΠ°Π±Π»ΠΎΠ½, ΠΎΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ! 02 Π΄Π΅ΠΊΠ°Π±ΡΡ 20, Liz T Π²ΠΎ Π€ΡΠ°Π½ΡΠΈΠΈ
django-bootstrap3 Β· PyPI
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°
ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Bootstrap 3 Π΄Π»Ρ Django.
Π¦Π΅Π»Ρ
Π¦Π΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° — Π±Π΅ΡΡΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Django ΠΈ Bootstrap 3.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ
Python 3.6 ΠΈΠ»ΠΈ Π½ΠΎΠ²Π΅Π΅ Ρ Django> = 2.2 ΠΈΠ»ΠΈ Π½ΠΎΠ²Π΅Π΅.
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠΎΠ»Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° https://django-bootstrap3.readthedocs.io/
.Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ pip:
pip install django-bootstrap3
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ»ΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ΅ΠΏΠΎ ΠΈ Π²ΡΠ·Π²Π°ΡΡ
pip install -e.
.ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ
INSTALLED_APPS
Π² Π²Π°ΡΠ΅ΠΌsettings.py
:INSTALLED_APPS = ( # ... "bootstrap3", # ... )
Π ΡΠ²ΠΎΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ
bootstrap3
ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ΠΈbootstrap_ *
:
ΠΡΠΈΠΌΠ΅Ρ ΡΠ°Π±Π»ΠΎΠ½Π°
{% load bootstrap3%} {# ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΡΠΌΡ #}
ΠΠ΅ΠΌΠΎ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² demo
.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΡΡΡΠΈΡΡ Π΅Π³ΠΎ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ python manage.py runserver
.
ΠΡΠΈΠ±ΠΊΠΈ ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ ΠΎΡΠΈΠ±ΠΊΡ ΠΈΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π·Π°ΠΏΡΠΎΡ Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π½Π° GitHub.
https://github.com/zostera/django-bootstrap3/issues
ΠΠΈΡΠ΅Π½Π·ΠΈΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ Π² BSD-3-Clause. Π‘ΠΌ. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π² ΡΠ°ΠΉΠ»Π΅ LICENSE.
ΠΠ²ΡΠΎΡ
Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Zostera.
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ Π°Π²ΡΠΎΡ: ΠΠΈΠ»Π°Π½ ΠΠ΅ΡΡ ΡΠ»Ρ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π²ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π·Π°ΠΏΡΠΎΡΡ Π½Π° Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅, ΠΈΠ΄Π΅ΠΈ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π΄ΠΎΠ±ΡΡΠ΅ ΡΠ»ΠΎΠ²Π°.
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΠΠ’ΠΠ Π« Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ° ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ².
Π‘ΠΊΠ°ΡΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ
ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΠ°ΠΉΠ» Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ Π²ΡΠ±ΡΠ°ΡΡ, ΡΠ·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².
Master Bootstrap Π¨Π°Π±Π»ΠΎΠ½ Joomla — ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠ²ΡΠΎΡ: Gonzalo SuezΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ°: ΠΡΠΎΡ Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π·Π°ΡΠΈΡΠ΅Π½ ΠΎΡ ΡΠΏΠ°ΠΌ-Π±ΠΎΡΠΎΠ².Π£ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½ JavaScript Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΠ²ΡΠΎΡ: www.gsuez.cl
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: GNU GPL2
ΠΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Master Bootstrap Π΄Π»Ρ Joomla! 3.x ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ Bootstrap 3.3.5. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ … ΠΠ°ΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΡΡ — ΠΏΡΠ΅Π΄Π΅Π»!
Master Bootstrap ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ:
Π²Π²Π΅ΡΡ
Ρ
Ρ
Π»Π΅Π±Π½ΡΡ
ΠΊΡΠΎΡΠ΅ΠΊ
Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ
Π²ΠΈΡΡΠΈΠ½Π°
ΡΡΠ½ΠΊΡΠΈΡ
ΡΠ»Π΅Π²Π°
ΡΠΏΡΠ°Π²Π°
Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
ΠΊΠΎΠΏΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° 6 ΡΠ°ΡΡΠ΅ΠΉ, ΠΊΡΠΎΠΌΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈΠ· templateDetails.xml ΠΈ index.php
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΡ ΡΠΎΡΠΌΠΈΡΡΠ΅ΠΌ Π½Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΊΠ»Π°ΡΡ ΠΌΠΎΠ΄ΡΠ»Ρ.
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ· Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ Π² ΠΌΠΎΠ΄ΡΠ»Ρ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ — ΠΠΊΠ»Π°Π΄ΠΊΠ° Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΒ» — Π‘ΡΡΡΠΈΠΊΡ ΠΊΠ»Π°ΡΡΠ° ΠΌΠ΅Π½Ρ:
navbar-nav navbar-right
ΠΠ΄Π΅ΡΡ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ.
ΠΠΎΠ΄ΡΠ»ΠΈ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡΡ
, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π²ΠΈΡΡΠΈΠ½Ρ Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° ΡΠ°ΠΊ:
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄Π°ΡΡ col-md-4 class (col-sm-4 ΠΈΠ»ΠΈ col-xl-4) ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ.ΠΠΎΡΡΠ΄ΠΎΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅ΡΠ΅ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ.
ΠΡΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ;
Π²Π΅ΡΡ
ΠΏΠΎΠ»Π½Π°Ρ ΡΠΈΡΠΈΠ½Π°
Π²ΠΈΡΡΠΈΠ½Π°
ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π½ΠΈΠ·
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
ΠΊΠΎΠΏΠΈΡ
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ — ΡΠ²Π΅ΡΡ Ρ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ — ΡΠ½ΠΈΠ·Ρ , Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° .
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΅Π³ΠΎ-ΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏ, ΠΌΡ Π΄Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ:
ΠΊΠΎΠ»-ΠΌΠ΄-2, ΠΊΠΎΠ»-ΠΌΠ΄-5, ΠΊΠΎΠ»-ΠΌΠ΄-2, ΠΊΠΎΠ»-ΠΌΠ΄-3
Π ΡΠ°Π±Π»ΠΎΠ½Π΅ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ° Ρ Π½Π°Ρ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.2, 3, 4, 5. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΠΎΠ²Π°Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ ΡΡΠΎΡΠΎΠ½Π° ΠΌΠ΅Π½Ρ
, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ 1.2.0, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΌΠ΅Π½Ρ.
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
- ΠΠ° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΒ» — Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΠΠΠΠΠ¬.
- Π ΠΌΠΎΠ΄ΡΠ»Π΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π²Ρ ΠΏΠΈΡΠ΅ΡΠ΅ panelnav position.
- ΠΠ°Π·Π½Π°ΡΠΈΡΡ Π²ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ
ΠΠ²Π° ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π»ΡΠ±ΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ , ΠΏΠΎΠ»Π΅1 ΠΈΠ»ΠΈ , ΠΏΠΎΠ»Π΅2 .
Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΡΠΈΠ»Ρ? Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ — Π‘ΡΠΈΠ»Ρ ΠΌΠΎΠ΄ΡΠ»Ρ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Master Bootstrap MBstyle .
ΠΠ½Π°ΡΠΎΠΊΠ² ΡΠΈΡΡΠΎΠ²Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅? Π½Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, Π·Π°ΡΠ°Π½Π΅Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠ° ΠΌΠΎΠ΄ΡΠ»Ρ — ΠΠ»Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Font awesome http://fortawesome.github.io/Font-Awesome/icons/
ΠΡΠΈΠΌΠ΅Ρ: fa fa-joomla
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡΠ΅ΡΡ!
ΠΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² — ΠΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Sitefinity CMS
ΠΠ±Π·ΠΎΡ
ΠΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π² Sitefinity CMS Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ.ΠΡ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΡΠ΅ΡΡΡΡΠΎΠ². ΠΠ½ΠΈ Π³ΡΡΠΏΠΏΠΈΡΡΡΡ Π²Π°ΡΠΈ ΡΠ΅ΡΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΠΏΠΊΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈ ΡΠ΅ΡΡΡΡΡ ΠΊ Π²Π°ΡΠΈΠΌ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΈ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌ. ΠΠ°ΠΊΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠ΅Π½Π°ΡΠΈΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ, ΡΠ°Π±Π»ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² ΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².
Sitefinity CMS Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΠ°ΠΏΠΊΡ ResourcePackages Π² ΠΊΠΎΡΠ½Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠ° ΠΏΠ°ΠΏΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Sitefinity CMS Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΏΠ°ΠΊΠ΅Ρ Bootstrap 4, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ Π² ΠΏΠ°ΠΏΠΊΡ ResourcePackages.
Π£ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°ΠΊΠ΅Ρ. ΠΡ ΡΠ²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Ρ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΠ°Π±Π»ΠΎΠ½ ΠΊ ΠΏΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ². ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π±Π»ΠΎΠ½. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. Π¨Π°Π±Π»ΠΎΠ½Ρ ΡΡΡΠ°Π½ΠΈΡ.
ΠΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠ ΠΠΠΠΠ‘Π«ΠΠΠ : ΠΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈ Bootstrap 4 Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Node.js ΠΈ npm.ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Node.js Π½Π° ΡΠ°ΠΉΡΠ΅ Node.js
.
Sitefinity CMS ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ Bootstrap 4 , ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ «ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ». ΠΠ°ΠΊΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ Bootstrap. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΌ. ΠΠ° ΡΠ°ΠΉΡΠ΅ Bootstrap.
ΠΠ ΠΠΠΠ§ΠΠΠΠ : ΠΠ°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ 12.0, Sitefinity CMS ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ ΡΠ΅ΡΡΡΡΠΎΠ² Bootstrap 4 , ΠΈ ΡΡΠΎ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΠ°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap.ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Bootstrap 3 , Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ Π²ΡΡΡΠ½ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π΅Π³ΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ Feather GitHub ΠΈ ΠΎΡΡΠΈΠ»ΡΡΡΠΎΠ²Π°Π² ΠΏΠΎ ΡΠ΅Π³Π°ΠΌ Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ Π΄ΠΎ 13.0.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ° Bootstrap ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΡΠΌ. Π ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ Bootstrap 4 GitHub
.ΠΠ°ΠΊΠ΅Ρ Sitefinity CMS Bootstrap ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ΅ΡΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ CSS, ΡΠ°Π±Π»ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΠΎΠ²ΠΎΡΡΠΈ , ΠΠ»ΠΎΠ³ΠΈ , ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Ρ. Π.
ΠΠ°ΠΊΠ΅Ρ Bootstrap 4 ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
- ΠΠ½ΡΡΠ°ΡΡΡΡΠΊΡΡΡΠ° ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² Npm
Bootstrap 4 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΠΈΠ½ΡΡΠ°ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ — ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° Grunt, Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ΅Π½Π°ΡΠΈΠΈ npm. ΠΠ»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ°ΠΊΠ΅Ρ Bootstrap 4 ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π² package.json. Π ΡΠ°ΠΊΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΈΠΌΡ ΠΏΠ°ΠΏΠΊΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², ΠΈΠΌΡ ΠΏΠ°ΠΏΠΊΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΈΠΌΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΈΠΌΠΏΠΎΡΡΠ° SCSS ΠΈ Ρ. Π.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΠ· ΠΏΠ°ΠΊΠ΅ΡΠ° ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ·Π»ΠΈΡΠ½ΠΈΠ΅ ΠΈ ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΠΈ JavaScript. - SVG-ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ
Font Awesome
Π‘Π»Π΅Π΄ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΡΠΌ, ΠΏΠ°ΠΊΠ΅Ρ Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡFont Awesome
ΡΠΎ ΡΠΏΡΠ°ΠΉΡΠ°ΠΌΠΈ Π·Π½Π°ΡΠΊΠΎΠ² SVG. ΠΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ , ΡΠΎΡ ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Font Awesome ΠΎ ΡΠΏΡΠ°ΠΉΡΠ°Ρ SVG. - ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° RTL
Π Bootstrap 4 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° RTL Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠ·ΡΡΠ½ΡΡ ΡΠ°ΠΉΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ΅Π½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° RTL Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΎΠΏΡΠΈΡ RTL Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π² ΡΠ°ΠΉΠ»Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ SCSS. - Π£Π»ΡΡΡΠ΅Π½ΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ
Π‘ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ Bootstrap 4 ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π²Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ±Π»ΡΠ΄Π°Π΅ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ WCAG 2.1 ΡΡΠΎΠ²Π½Ρ AA ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π» 508 . Bootstrap 4 ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΠΌ ΠΏΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠΎΠ²ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π΄Π»Ρ:- ΠΠΎΠ΄ΡΡΠ°Π²ΠΊΠ° Π΄Π»Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ
- Π£Π»ΡΡΡΠ΅Π½Π½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΎΡΠΈΠ±ΠΎΠΊ
- ΠΠ»Π°Π½ΠΊΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ
- ΠΠ°ΠΉ-ΠΡΠΈΡ
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ·ΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ
- ΠΠΎΡΡΡΠΏΠ½Π°Ρ ΠΊΠ°ΠΏΡΠ°
ΠΠ ΠΠΠΠ§ΠΠΠΠ : ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠΎΠ±Π»ΡΠ΄Π΅Π½ΠΈΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠ² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² — ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈΡ, ΡΡΠ΅Π±ΡΡΡΠΈΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ Π°Π²ΡΠΎΡΠΎΠ² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.ΠΡΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ, ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΎΠ²Π΅ΡΡΡΡΡΡ.
Π§ΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ Π²Π°ΠΆΠ½ΡΠΌΠΈ ΡΠΎΠ²Π΅ΡΠ°ΠΌΠΈ, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΡΡΡΡΡΠ°ΠΏ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½Π°Ρ ΡΡΠ΅Π΄Π°Bootstrap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ — Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΌ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ. ΠΡΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΡ MVC ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π° ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ Bootstrap.
ΠΠ ΠΠΠΠ§ΠΠΠΠ : ΠΠΈΠ΄ΠΆΠ΅Ρ Navigation ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΌ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ MVC.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Bootstrap, ΡΠΌ. Π Bootstrap 4.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΆΠ½ΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² CSS ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ΅ΡΠΎΠΊ Π² ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Bootstrap:
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΡΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ
Minimal — ΡΡΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ News , Blogs ΠΈ Images , Π² Π²ΠΈΠ΄Π΅ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ HTML, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ CSS ΠΈ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ grunt.
Π ΠΠΠΠΠΠΠΠΠ¦ΠΠ― : ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ, ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΎΡ Bootstrap. ΠΠ°ΠΊ ΠΈ ΠΏΠ°ΠΊΠ΅Ρ Bootstrap, Minimal ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π·Π°ΠΏΡΡΠΊΠ° Π·Π°Π΄Π°Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ, ΡΡΠ΅Π½Π°ΡΠΈΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Ρ. Π.
Π‘ΡΡΡΠΊΡΡΡΠ° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° ΡΠ΅ΡΡΡΡΠΎΠ² ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρ ΠΏΠ°ΠΊΠ΅ΡΠ° Bootstrap, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ, ΡΠ°Π±Π»ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ², ΡΠ°Π±Π»ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Grunt.ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΌ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ GitHub.
ΠΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Ρ Bootstrap Π²Π΅ΡΡΠΈΠΈ 3 Π½Π° 4
Bootstrap β’ ΠΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Sam Norton β’ 14 ΠΌΠ°ΡΡΠ° 2016 Π³. β’ 8 ΠΌΠΈΠ½ΡΡ ΠΠ ΠΠ§ΠΠ’ΠΠ’Π¬
ΠΡΠ°ΠΊ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ Ρ Bootstrap 3 Π½Π° Bootstrap 4 ?
ΠΡΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Ρ Bootstrap Π²Π΅ΡΡΠΈΠΈ 4 Π½Π° 5.
ΠΠ°ΠΌ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ; ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π΅ΡΡΠΈΡΠΌΠΈ.ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°.
ΠΡΠ΅ΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ Bootstrap?
Π§ΡΠΎΠ±Ρ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π²Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΆΡΡΠ½Π°Π»Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Ρ ΡΠΎΡΡΠ°Π²ΠΈΠ» ΡΠΏΠΈΡΠΎΠΊ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ Ρ Bootstrap 3 Π½Π° Bootstrap 4.
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π²Π½Π΅ΡΠ΅Π½Π½ΡΡ Π² ΡΡΡΡΠΊΡΡΡΡ Bootstrap 4, ΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π±ΡΡΡΡΡΠ°ΠΏΠ° ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ flexbox ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ ΠΈ ββΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ JavaScript Π² Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅
Π‘ Postcards Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΠ΅ΠΌ ΠΎΠ½Π»Π°ΠΉΠ½ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π½Π°Π²ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ! ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 100 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΠ΅ΠΌ Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ Π±ΠΎΠΊΡ.ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΡΠ°ΠΉΡ ΡΠΎ ΡΡΠ°ΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Bootstrap Π½Π° Bootstrap 4, ΡΡΠ° ΡΡΠ°ΡΡΡ Π΄Π»Ρ Π²Π°Ρ.
ΠΡΠΈΡΡΡΠΏΠΈΠΌ.
ΠΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊ
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΡΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Bootstrap 4:
- ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ Ρ ΠΠ΅Π½Π΅Π΅ Π½Π° Sass Π΄Π»Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² CSS.
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΎ Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° rem Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS.
- ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ΅ΠΏΠ΅ΡΡ Π² ems Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ . Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
- Global ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ Ρ 14px Π΄ΠΎ 16px .
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Bootstrap
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄Bootstrap 3 Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ CSS, JavaScript ΠΈ ΡΡΠΈΡΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Less, JavaScript ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ.
Π Bootstrap v4.0.0-alpha ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Less Π±ΡΠ» Π·Π°ΠΌΠ΅Π½Π΅Π½ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ Sass ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ Ρ Less Π½Π° Sass ΡΠ΅ΡΠ΅Π· libSass. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Bootstrap 4 Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π³Π»ΠΈΡΠΈΠΊΠΎΠ½Ρ, ΠΏΠ°ΠΏΠΊΠ° ΡΡΠΈΡΡΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ»Π° ΠΎΠΏΡΡΠ΅Π½Π°.Bootstrap 4 ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ².
ΠΠ° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Bootstrap 4 Π΅ΡΠ΅ Π½Π΅ Π±ΡΠ»Π° Π΄ΠΎΡΡΡΠΏΠ½Π°.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Bootstrap 4
Bootstrap 4 ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. Bootstrap 4 Alpha ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π²ΡΡΠ΅Π», ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ Π²ΡΠ΅ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Π΅ΡΠ΅ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ Π°Π»ΡΡΠ°-Π²Π΅ΡΡΠΈΡ 4, Π½ΠΎ ΠΎΠ½Π° Π²ΡΠΉΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠΊΠΎΡΠΎ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π½ΡΠΆΠ½ΡΠ΅ Π²Π°ΠΌ ΠΎΠΏΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ.
- ΠΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap, Π·Π°Π³ΡΡΠ·ΠΈΠ² ΠΏΠΎΠ»Π½ΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΏΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Sass, JavaScript ΠΈ ΡΠ°ΠΉΠ»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ Sass, Autoprefixer ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ CSS ΠΈ JavaScript Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° Π² ΡΠ°Π·Π΄Π΅Π» ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ CSS.
- Bootstrap CDN: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Bootstrap CDN, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ Π»ΡΠ΄ΡΠΌΠΈ ΠΈΠ· MaxCDN. Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΡΡΡΠ»ΠΊΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° Π² ΡΠ°Π·Π΄Π΅Π» ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ CSS.
- ΠΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Bower, npm, meteor ΠΈ composer, Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Bootstrap. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΡΡΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ Sass ΠΈ Autoprefixer Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΌ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π²Π΅ΡΡΠΈΡΠΌ.
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠ°Ρ ΡΠ±ΠΎΡΠΊΠ°: ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ CSS ΠΈΠ»ΠΈ JS Bootstrap, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½Ρ ΠΈΠ· Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ±ΠΎΡΠΎΠΊ:
- Reboot Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ / ΠΌΠΈΠΊΡΠΈΠ½Ρ, Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ. ΠΠ΅Ρ JavaScript.
- Π’ΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠΊΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ / ΠΌΠΈΠΊΡΠΈΠ½Ρ ΠΈ Π½Π°ΡΡ ΡΠ΅ΡΠΊΡ.ΠΠ΅Ρ JavaScript.
- Flexbox Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²Π΅ΡΡ Bootstrap Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ flexbox ΠΈ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ Bootstrap 4 ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΡ HTML, Π½ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°ΡΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΠ΅ΡΠΊΠΈ ΠΈΠ· 12 ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠΊΠΈ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ΠΡΠΎ Π½Π΅ Π½ΠΎΠ²ΠΎΡΡΡ; Bootstrap 3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ΅ ΠΆΠ΅ ΠΊΠ»Π°ΡΡΡ.ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠ»Π°ΡΡΡ Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ems , Π° Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ , ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ Π½ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ ΠΈ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°.
- col-xs Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΡΠΏΠ»Π΅Ρ (ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½Π΅Π΅ 34em)
- col-sm Π΄Π»Ρ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ Π΄ΠΈΡΠΏΠ»Π΅Ρ (ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° 34em ΠΈ Π²ΡΡΠ΅)
- col-md Π΄Π»Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ Π΄ΠΈΡΠΏΠ»Π΅Ρ (ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° 48em ΠΈ Π²ΡΡΠ΅)
- col-lg Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ Π΄ΠΈΡΠΏΠ»Π΅Ρ (ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° 62em ΠΈ Π²ΡΡΠ΅)
- col-xl Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π΄ΠΈΡΠΏΠ»Π΅Ρ (ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° 75em ΠΈ Π²ΡΡΠ΅)
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, — ΡΡΠΎ ΠΊΠ»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΡΡΡΠΎΠΊΠΈ.ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π² Π±ΡΡ, , Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΡΡΠΎΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ»Ρ -.9375 rem ΠΈ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΎΡΡΡΡΠΏΡ 0.9375 rem, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Bootsrap 3.
Π₯ΠΎΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ Π²Π΅ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°, Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²ΡΠΊΠ½ΡΡΡ ΠΊ ΡΡΠΎΠΌΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Photoshop, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ Π² ΡΠ²ΠΎΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Sass CSS Bootstrap 4, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ΅ΡΠΊΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅:
- $ grid-columns: ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΡΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (12 ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- $ grid-gutter-width: ΠΎΠ±ΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΡΡΡΡΠΏΠΎΠ² Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
- $ grid-float-breakpoint: ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ , ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π΅ΡΠ²Π΅ΡΠ½ΡΡΠΎΠΉ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ $ screen-sm-min)
- $ grid-float-breakpoint-max: ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° $ grid-float-breakpoint — 1)
Π‘Π±ΡΠΎΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
ΠΠΎΡΠΌΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΠΈΠΊΠΎΠ»Π°ΡΠ° ΠΠ°Π»Π»Π°Ρ Π΅ΡΠ°.css ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ Π² Bootstrap 3 Π΄Π»Ρ ΡΠ±ΡΠΎΡΠ° CSS ΠΈ Π±ΡΠ» ΡΠ»ΡΡΡΠ΅Π½ Π² Bootstrap 4.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π² Boostrap 3, ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΠΎΠ±Π½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ ΡΠ±ΡΠΎΡΠ° Bootstrap ΠΈ Π±Π°Π·ΠΎΠ²ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠΆΠ°Π»ΠΈ Π΅Π³ΠΎ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΈ Π½Π°Π·Π²Π°Π»ΠΈ Π΅Π³ΠΎ reboot.css. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ Π²Π΅ΡΡΠΈΡΠΌΠΈ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈΠΌΠ΅Π½ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π±ΡΠ»ΠΈ ΠΎΡΠΎΠ·Π²Π°Π½Ρ. Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ rems. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ px ΠΈ em, ΡΡΠΎ Π½Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎΠΉ ΠΈΠ»ΠΈ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅ΠΉ ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ΄ΠΈΠ½ΠΈΡΠ° rem ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ΅Π³Π° HTML. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ px, em ΠΈ pt Π² ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
Bootstrap, Π΅ΡΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅. Π§ΡΠΎΠ±Ρ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ rems, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ target Π½Π° base size html Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΠ΅Π³ Π°Π±Π·Π°ΡΠ° Π² 1 rem, ΡΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ 16px Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° html. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ΅Π³ h2 Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ 1.875rem, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½Π° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ html, ΡΠ°Π²Π½ΡΠΉ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Bootstrap 4 Π²ΡΡΠ°ΡΠΈΠ» ΠΌΠΎΠ΄ΡΠ»ΠΈ rems Π² ΡΡΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ 100% ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.ΠΡΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ². Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π³Π° html ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Bootstrap 3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π² ΡΡΡΠΎΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ. Π Bootstrap 4 ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ. Π’Π°Π±Π»ΠΈΡΠ° — ΠΏΡΠ΅ΡΠΈΠΊΡ * Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°. Bootstrap 3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠ»Π°ΡΡ .table-condensed , ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎΠ» Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΌ, ΡΠ°Π·ΡΠ΅Π·Π°Π² Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅Π΅ΠΊ ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ.Π Bootstrap 4 ΠΎΠ½ Π±ΡΠ» ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ Π². table-sm Π΄Π»Ρ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ. Π€ΠΎΡΠΌΡ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π²Π½Π΅ΡΠ΅Π½Π½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ — ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π°. input-lg ΠΈ. input-sm ΠΊΠ»Π°ΡΡΡ Π΄ΠΎ. form-control-lg ΠΈ. form-control-sm ΠΈ ΡΠ±ΡΠΎΡΠΈΠ². Π³ΡΡΠΏΠΏΠ° ΡΠΎΡΠΌ- *. Π Bootstrap 4 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π½ΠΎΠ²ΡΠΉ. form-control-label — ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .form-control. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ. ΠΠΎΠΌΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ
Π²ΡΡΠ΅, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΠ΅ Ρ Bootstrap 3 Π½Π° Bootstrap 4. Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π·Π°Π²ΠΈΡΠΈΠΌΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² JavaScript, ΠΈ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΎΠ±ΡΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ
, Π½Π΅ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΠ°ΡΡΠΈ JavaScript. ΠΠ½ΠΎΠ³Π΄Π° ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΎΠΊ, Π½ΠΎ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅.ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΎΠΊ: ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ Π²Π½Π΅ΡΠ΅Π½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΡΡ
Π΅ΠΌΡ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ, Π½ΠΎ Π² ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π½ΠΎΠ²ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ. Π Bootstrap 4 ΠΏΠ°Π½Π΅Π»ΠΈ, ΡΡΠΊΠΈΠ·Ρ ΠΈ Π»ΡΠ½ΠΊΠΈ Π±ΡΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½Ρ ΠΈ Π·Π°ΠΌΠ΅Π½Π΅Π½Ρ ΠΊΠ°ΡΡΠΎΡΠΊΠ°ΠΌΠΈ. ΠΡΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠΈ, ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Π΅ΡΡ
Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅, Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΡΠΎΠ½Π°. Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΊΠ°ΡΡΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅. card ΠΈ .card-block ΠΊΠ»Π°ΡΡΠΎΠ² ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠΈ .ΠΊΠ°ΡΡΠ° ΠΊΠ»Π°ΡΡΠ° . ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. ΠΡΠΎ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ. ΠΠΈΠ΄Π΅ΡΡ? ΠΠ½ΠΈ ΠΊΠ»Π°ΡΡΠ½ΡΠ΅! ΠΠΎΠ΄ Π²ΡΡΠ΅ Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. ΠΡΠ΅ ΠΎΠ΄Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Π°Ρ Π² Bootstrap 4, — ΡΡΠΎ flexbox. ΠΠΈΠ±ΠΊΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈΠ»ΠΈ flexbox — ΡΡΠΎ Π½ΠΎΠ²Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ CSS3.ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Β«ΠΏΡΠ΅Π΄Π²ΠΎΡΡ
ΠΈΡΠ°Π»ΠΈΒ» ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Bootstrap 4, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ $ enable-flex Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true Π² ΡΠ°ΠΉΠ»Π΅ _variables.scss ΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ ΠΎΠΆΠΈΠ΄Π°ΠΉΡΠ΅, ΡΡΠΎ Π²ΡΡ ΡΠ΅ΡΠΊΠ° ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ flexbox, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ HTML. ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΊΠΎΠ΄Π° ΠΎΡ ΠΠΈΠΊΠΎΠ»Π°ΡΠ° Π§Π΅ΡΠΌΠΈΠ½Π°ΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ flexbox ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Flexbox Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Internet Explorer 9 ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Bootstrap ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° jQuery.ΠΡΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ , Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΠΆΠ΅ΠΉΡΠΎΠ½ΠΎΠΌ Π€ΡΠ΅ΠΉΠΌΠΎΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π² Bootstrap 4 ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π² Tether, ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Π½ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π²ΠΊΠ»ΡΡΠΈΡΠ΅ tether.js Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ bootstrap.js . ΠΠ· ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π΅ Ρ Bootstrap 3 Π½Π° Bootstrap 4. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° Π±ΡΠ΄ΡΡΠΈΠΌΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡΠΌΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅ΡΠ° ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΏΡΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ.Π§ΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ Π·Π°Π΄Π°ΡΠΈ Grunt.js Π²ΠΌΠ΅ΡΡΠ΅ Ρ node.js, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ Π²Π°ΡΠ΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ»ΠΈΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ Π°Π»ΡΡΠ°-Π²Π΅ΡΡΠΈΡ Bootsrap 4. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Sass ΠΈ grunt.js Π΄Π»Ρ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Boostrap. Π‘ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π»ΠΊΠΈΡ
Π΄Π΅ΡΠ°Π»Π΅ΠΉ. ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ ΡΡΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ. ΠΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π½ΠΈΠΆΠ΅, ΠΈ ΠΏΠΎΠ²ΠΎΠ·ΠΈΡΡΡΡ Ρ Π½Π΅ΠΉ, ΡΡΠΎΠ±Ρ Π²Π½Π΅ΡΡΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. Π’Π°ΠΊ ΡΡΠΎ Π½Π΅ ΡΠ°ΡΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ. Π₯ΠΎΡΠΎΡΠΎ ΠΈΠΌΠ΅ΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½ΠΎ Π½ΠΈ Π² ΠΊΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΅Π³ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ. ΠΠ΅ΡΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π±ΡΠ΄Π΅Ρ Β«Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»ΡΒ». ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ Β«btnΒ», ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΉ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ΅ΡΠ΅Π· Bootstrap. ΠΠ½ΡΡΡΠΈ div Β«navbarΒ» Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ div Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«containerΒ». ΠΠ½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ Π΄Π²Π° div. ΠΠ΅ΡΠ²ΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΠ»Π°ΡΡ navbar-header. Π£ Π²ΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄ΡΡ ΠΊΠ»Π°ΡΡΡ Β«navbar-collapseΒ» ΠΈ Β«collapseΒ». ΠΠ΄Π΅ΡΡ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠΌ Π½Π°Π»ΠΈΡΠΈΠ΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΠ½ΡΡΡΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²Π°ΠΌ Π·Π½Π°ΠΊΠΎΠΌΠ°, Π½ΠΎ Ρ Π½Π΅Π΅ Π±ΡΠ΄ΡΡ Π΄Π²Π° Π½ΠΎΠ²ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠ°.βData-toggle =Β» collapse Β»β ΠΈ Β«data-target =Β». Navbar-collapse Β». ΠΡΠΎ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Bootsrap, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΌΠ΅Π½Ρ, Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π»ΠΎΡΡ ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π»ΠΎΡΡ, Π° div, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ, Π±ΡΠ΄Π΅Ρ Π²Π°ΡΠΈΠΌ div Β«navbar-collapseΒ». ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ div navbar-collapse, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΌΡ Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π° ΠΏΠΎΠ·ΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ .table , .table-Bordered ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ²
Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
html {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏ{
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 1 Π±ΡΡ; / * 1rem = 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
}
h2 {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 1.875rem; / * 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ / 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 1,875 Π±ΡΡ * /
}
Π’Π°Π±Π»ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ²
Π‘ΠΆΠ°ΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ° ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π°
<ΡΠ°Π±Π»ΠΈΡΠ°>
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ 1
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ 2
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π±Π»ΠΈΡΡ 3
Π―ΡΠ΅ΠΉΠΊΠ° 1
Π―ΡΠ΅ΠΉΠΊΠ° 2
Π―ΡΠ΅ΠΉΠΊΠ° 3
Π―ΡΠ΅ΠΉΠΊΠ° 4
Π―ΡΠ΅ΠΉΠΊΠ° 5
Π―ΡΠ΅ΠΉΠΊΠ° 6
Π―ΡΠ΅ΠΉΠΊΠ° 7
Π―ΡΠ΅ΠΉΠΊΠ° 8
Π―ΡΠ΅ΠΉΠΊΠ° 9
ΠΠ»Π°ΡΡΡ ΡΠΎΡΠΌ
<ΡΠΎΡΠΌΠ°>
ΠΡΡΠ³ΠΈΠ΅ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ JavaScript
ΠΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ
ΠΠ°ΡΡ
ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ
Flexbox
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π°
ΠΡΠ°Π²ΠΈΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅? ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΠΈ Π³Π»Π°Π²Π½ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ.
Bootstrap 3 Π·Π° 10 ΠΌΠΈΠ½ΡΡ.ΠΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠ°ΠΌΠΎΡΡΠΊΠΈβ¦ | ΠΠ½Π΄ΡΡ ΠΠΈΠΌΠΌΠ°
Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π½Π°Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ , ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΠ±ΡΠΈΡ Bootstrap, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ. ΠΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ Β«dropdown-toggleΒ» ΠΈ Π°ΡΡΠΈΠ±ΡΡ Β«data-toggle =Β» dropdown Β».