Bootstrap Grid: ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Flexbox
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Ρ Π²Π°Ρ Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Bootstrap CSS Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΊΠΈ Bootstrap.
Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Flexbox Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ. Π― ΠΎΠ±ΡΡΡΠ½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS Flexbox, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅ΠΆΠ°Ρ Π² ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Ρ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Flex Bootstrap, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π±ΡΡΡΡΠΎ ΠΈ Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Flexbox?
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ Flexbox . ΠΠ½ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ»ΠΈ Π½Π΅ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°. (ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flex ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ²ΠΎΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΠΎΠ±Π»Π°ΡΡΡΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.)
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Flexbox, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π°Π±ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ² CSS, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ.
Bootstrap ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Flexbox, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π½Π°Π±ΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ²-ΠΎΠ±ΠΎΠ»ΠΎΡΠ΅ΠΊ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Flexbox, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΡΠΈΡΡΠ΅ΠΌΡ Bootstrap Grid
ΠΡΠΈΠ΄-ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΡΡΠΊΡΡΡΡ CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π±Π΅Π· ΠΌΠΎΡΠ½ΠΎΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΎΠΉ Π³ΡΠΈΠ΄-ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ³Π°ΡΡΠ΅ΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ.
Π‘ΡΠ΅Π΄ΠΈ Π½ΠΎΠ²ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΊΠΈ Bootstrap Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ xl
ΠΏΡΠ΅ΡΡΠ²Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ xl
(ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ), ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Flexbox Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ° ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΡΠΎΡΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ Bootstrap, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap: .row
, .row
ΠΈ .col-*-*
. (ΠΠ΅ΡΠ²ΡΠΉ * Π² .col-*-*
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ xs, sm, md, lg, xl
Π° Π²ΡΠΎΡΠΎΠΉ * Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΡΡΠΎΠ»Π±ΡΠ°. Π‘ΡΠΌΠΌΠ° Π²ΡΠ΅Ρ
ΡΡΠΎΠ»Π±ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π²Π½Ρ 12.)
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠ΅ΡΠΊΠΈ Bootstrap.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΎΠΉ Π΄Π»Ρ ΡΠ΅ΡΠΊΠΈ. ΠΡΠΎ div
ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡ .container
Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ .container-fluid
Π΄Π»Ρ 100% ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
Π‘ΡΡΠΎΠΊΠ°
Π‘ΡΡΠΎΠΊΠ° ΡΠ»ΡΠΆΠΈΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°
Π‘ΡΠΎΠ»Π±Π΅Ρ β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π±Π»ΠΎΠΊ Π² ΡΠ΅ΡΠΊΠ΅. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΡΡΠ΄.
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΊΠΈ Bootstrap ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²:
-
.col-xs-*
: ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ -
.col-sm-*
: ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ, ΡΠ°Π²Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠ΅ΠΉ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ -
.col-md-*
: ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΡΠ΅Π΄Π½ΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ> = 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ -
.col-lg-*
: ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ> = 992px -
. col-xl-*
: ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π²Π½Π° ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ .
ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ², Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°; ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ Ρ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅ΠΉ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΠ°Π½ΠΎΠ²Π°. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΌΠ΅ΡΡΠΎ
ΠΈ .col-md-6
Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ .col-sm-6
.
Π‘Ρ Π΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ Ρ Flexbox ΠΏΡΠΎΡΠΈΠ² Floats
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Flexbox Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ ΡΠ°ΠΊΠΈΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΡΡΠΎΠ»Π±ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΡΠΎΠ»Π±ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΠ΅Π³ΠΎ ΡΠ°Π½ΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΡΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ Π°ΠΊΠΎΠ² CSS.
CSS-ΠΌΠ΅ΡΠΎΠ΄Ρ float ΠΈ clearfix Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π±ΡΠ»ΠΈ ΡΡΠ΅Π΄ΠΈ ΡΠ°ΠΊΠΈΡ Ρ Π°ΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΡΡΠ΄Π½ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡΠ»Π°Π΄ΠΊΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap 3, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠΎΡ ΠΆΠ΅ ΠΌΠ°ΠΊΠ΅Ρ Ρ Bootstrap 4, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ:
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Bootstrap 4 ΠΈ Π΅Π³ΠΎ ΡΠ΅ΡΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ flexbox Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ (ΠΊΠ°ΠΊ Π² ΡΠ°Π±Π»ΠΈΡΠ΅), ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΠ»Π±ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ΄ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π²ΡΡΠΎΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Flexbox Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ΅ΡΠΊΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ° (Ρ.Π΅. Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠΎΠ² .col-*
), Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ ΠΏΠΎΡΠΎΠ²Π½Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π±ΡΡΡΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
<div> <div> .col </div> <div> .col </div> <div> .col </div> <div> .col </div> </div>
Π§Π΅ΡΡΡΠ΅ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ° .col-sm
Π±ΡΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 25% ΠΎΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΈ Π²ΡΡΠ΅.
Π‘ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ, Π²ΠΎΡ ΡΡΠΎ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅:
Flexbox Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ
Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Flexbox Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΡΡΡΠΊΠ°ΠΌ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΌΠ°ΠΊΠ΅Ρ: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ . mr-auto
ΠΊΠ»Π°ΡΡ Bootstrap .mr-auto
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ margin-right: auto;
Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ CSS, ΠΈΠ»ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° Bootstrap .ml-auto
( margin-left: auto;
Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ CSS). ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ .mr-auto
ΠΈΠ»ΠΈ .ml-auto
Π² .mr-auto
ΠΈΠ»ΠΈ .mr-auto
Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π° Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² β Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΡΡΠΈΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π»ΠΈΠ±ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, Π»ΠΈΠ±ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π²Π΅ΡΡ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· (Π° Π½Π΅ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ), Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ mb-auto
( margin-bottom: auto;
) ΠΈ mt-auto
( margin-top: auto;
), ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ flex-direction
Π΄Π»Ρ column
ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡ align-items-(start|end)
.
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Flexbox Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ ΡΠ»ΡΠΆΠ΅Π±Π½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Bootstrap Flex
Bootstrap 4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΡΠΈΠ»ΠΈΡ flex , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ·ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ΅ΠΌ, ΠΊΡΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ»ΡΡΠ°Π» ΠΎ Flexbox ΠΈΠ»ΠΈ Π½Π΅ Π·Π½Π°Π΅Ρ, ΠΊΠ°ΠΊ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ flex ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ flex.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Bootstrap ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display:flex
ΠΊ ΡΠ²ΠΎΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠ΅ΡΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Bootstrap ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ HTML-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π² Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² .d-flex
ΠΊ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ .d-sm-flex
ΠΊΠ»Π°ΡΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ .d-sm-flex
.d-md-flex
ΠΈ Ρ. Π.
ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΡΠΈΡΠ½ΡΠΌ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΈ ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΈΠ»ΠΈΡΠ°Ρ
flex, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ .flex-row
, .flex-row-reverse
, .flex-column
ΠΈ .flex-column-reverse
.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Flexbox. Π‘ΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Bootstrap flex.
Flex ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
Flexbox ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ flex, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ flex
ΠΈΠ»ΠΈ inline-flex
:
. mycontainer { display: flex; }
Π£ΡΠΈΠ»ΠΈΡΠ° Bootstrap flex Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ flex-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ d-flex
.
ΠΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΡΠΌΠΎΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Flex, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS flex-direction
Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: row
, row-reverse
, column
ΠΈ column-reverse
.
-
row
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ -
row-reverse
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ -
column
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· -
column-reverse
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ .
Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΡ flex-row
, flex-row-reverse
, flex-column
flex-column-reverse
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Flex. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Flexbox ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Flex, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ order
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ:
.item { order: 1; }
Bootstrap ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° flex ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ±ΡΠΎΡΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΡΡΠ΄ΠΊΠ° Π² ΠΏΠΎΡΡΠ΄ΠΎΠΊ DOM ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ flex ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ order-1
ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅.
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Flex
Flexbox ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π»ΡΠ±ΡΠΌ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π΄Π»Ρ Π²Π°Ρ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ justify-content
Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ flex ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ flex ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ ΠΎΡΠΈ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠΈ x, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ flex-direction
column
). ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:-
flex-start
: ΡΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π½Π°ΡΠ°Π»Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° -
flex-end
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΠΊΠΎΠ½ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° -
center
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° -
space-between
ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΡΠ»Π΅ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ -
space-around
ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ°Π²Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° flex.
ΠΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Bootstrap Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ justify-content
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ:
-
justify-content-start
-
justify-content-end
-
justify-content-center
-
justify-content-between
-
justify-content-around
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ flexbox align-items
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈ. (ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΎΡΡ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ, ΠΏΠΎΠΏΠ΅ΡΠ΅ΡΠ½Π°Ρ ΠΎΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ, ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.)
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ align-items
:
-
stretch
: ΡΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΎ Π²ΡΡΠΎΡΡ ΠΈΡ ΡΠ°ΠΌΡΡ Π²ΡΡΠΎΠΊΠΈΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² -
flex-start
Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² Π½Π°ΡΠ°Π»Π΅ flex-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° -
flex-end
Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° -
center
ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap:
-
align-items-stretch
-
align-items-start
-
align-items-end
-
align-items-center
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΊΠΎΠ΄ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ° Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Bootstrap flex:
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ Bootstrap flex .
ΠΡΠ²ΠΎΠ΄
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ, ΠΊΠ°ΠΊ Flexbox Π΄Π΅Π»Π°Π΅Ρ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΊΠΈ Bootstrap Π±ΠΎΠ»Π΅Π΅ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠΉ Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΠΊΠ°ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΡΡΠΎΠ»Π±ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΡ. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Flexbox, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ Π΄Π»Ρ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΡΠΈΠ»ΠΈΡ Flex Bootstrap ΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠ΄Π°ΡΠΈ ΠΎΡ ΠΈΡ ΠΌΠΎΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎ Bootstrap, Π½ΠΎ ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΠΈ Π΅Π³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, ΡΠΎ ΠΈΠ·ΡΡΠΈΡΠ΅ Π½Π°Ρ ΠΊΡΡΡ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Bootstrap 4, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΠΈ Π²Π΅ΡΠ΅Π»ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΌΠΎΡΡΡ Bootstrap.
Π¨Π°Π±Π»ΠΎΠ½ ΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Bootstrap
ΠΠ°Π·ΠΎΠ²ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ΠΌ Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΡΠ΅ΡΠΊΠΈ Bootstrap.
ΠΡΡΡ ΡΡΠΎΠ²Π½Π΅ΠΉ ΡΠ΅ΡΠΊΠΈ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ ΡΡΠΎΠ²Π½Π΅ΠΉ ΡΠ΅ΡΠΊΠΈ Bootstrap, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π½Π°ΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ.
.col-xs-4
.col-xs-4
.col-xs-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
9000 2 . col-lg-4.col-xl-4
.col-xl-4
.col-xl-4
Π’ΡΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΡΠΎΠ»Π±ΡΠ°
ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ , Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡ ΠΈΡ Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ . ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠ±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ ΡΡΠΎΠ»Π±ΡΡ Π±ΡΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ.
.col-md-4
.col-md-4
.col-md-4
Π’ΡΠΈ Π½Π΅ΡΠ°Π²Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠ°
ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° , Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡ ΠΈΡ Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π΄ΠΎ Π΄Π²Π΅Π½Π°Π΄ΡΠ°ΡΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ»Π±ΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
.col-md-3
.col-md-6
.col-md-3
ΠΠ²Π° ΡΡΠΎΠ»Π±ΡΠ°
ΠΠΎΠ»ΡΡΠΈΡΠ΅ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° , Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡ ΠΈΡ Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² .
.col-md-8
.col-md-4
ΠΠΎΠ»Π½Π°Ρ ΡΠΈΡΠΈΠ½Π°, ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ.
ΠΠ²Π° ΡΡΠΎΠ»Π±ΡΠ° Ρ Π΄Π²ΡΠΌΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ β ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠ΄ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΡΡΠΎΠ»Π±Π΅Ρ. ΠΡΠΎ Π΄Π°Π΅Ρ Π²Π°ΠΌ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° , Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡ Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°Π±ΠΎΡΠΈΡ ΡΡΠΎΠ»ΠΎΠ² , Ρ Π΅ΡΠ΅ Π΄Π²ΡΠΌΡ (ΡΠ°Π²Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ) Π²Π½ΡΡΡΠΈ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°.
ΠΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΡΡΠΈ ΡΡΠΎΠ»Π±ΡΡ ΠΈ ΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ Π±ΡΠ΄ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ.
.col-MD-8.col-md-6
.col-md-6
.col-md-4
Π‘ΠΌΠ΅ΡΠ°Π½Π½ΡΠΉ: ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΉ
Π‘Π΅ΡΠΎΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° Bootstrap v4 ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΡΡ ΡΡΠΎΠ²Π½Π΅ΠΉ ΠΊΠ»Π°ΡΡΠΎΠ²: xs (ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ) , sm (ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ), md (ΡΡΠ΅Π΄Π½ΠΈΠΉ), lg (Π±ΠΎΠ»ΡΡΠΎΠΉ) ΠΈ xl (ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ). ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΠΈ Π»ΡΠ±ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΡ ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ, ΡΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ xs ΠΈ sm, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ xs.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Π‘ΠΌΠ΅ΡΠ°Π½Π½ΡΠΉ: ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ, ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΡΠΉ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΉ
. col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 . col-sm-4
.col- xs-6 .col-sm-4
.col-xs-6 .col-sm-4
ΠΡΠΈΡΡΠΊΠ° ΡΡΠΎΠ»Π±ΡΠΎΠ²
ΠΡΠΈΡΡΠΈΡΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ , ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ Π½Π΅ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
.col-xs-6 .col-sm-3
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΈ pull resets
Π‘Π±ΡΠΎΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ, Π²ΡΡΠ°Π²ΠΎΠΊ ΠΈ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΠΉ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ .
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col -md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
React-Bootstrap Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ React-Bootstrap
Π‘Π΅ΡΠΎΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ΄ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², ΡΡΡΠΎΠΊ ΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° flexbox ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π΅Π½. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠΊΠ° ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅.
ΠΡ Π½ΠΎΠ²ΠΈΡΠΎΠΊ ΠΈΠ»ΠΈ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ flexbox? ΠΡΠΎΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ CSS Tricks ΠΏΠΎ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡΡ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π°Ρ , ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΡ ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°Ρ ΠΊΠΎΠ΄Π°.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ#
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π° ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
.
1 ΠΈΠ· 1
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°>Fluid Container #
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ <ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½Π°Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ />
Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ: 100% Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
1 ΠΈΠ· 1
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½Π°Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ> <Π‘ΡΡΠΎΠΊΠ°> ΠΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΡΠΊΡ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Ρ Π΄Π»Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ
ΠΏΡΠΎΠΏ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π΅Π³ΠΎ Π² ΡΠΎΡΠΊΡ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ( sm, md, lg, xl, xxl
) ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΆΠΈΠ΄ΠΊΠΎΡΡΠΈ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°.
1 ΠΈΠ· 1
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡΠΈ="md"> <Π‘ΡΡΠΎΠΊΠ°>Auto -ΠΌΠ°ΠΊΠ΅Ρ columns#
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π΅ ΡΠΊΠ°Π·Π°Π½Π°, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Col
Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
1 ΠΈΠ· 2
2 ΠΈΠ· 2
1 ΠΈΠ· 3
2 ΠΈΠ· 3
3 ΠΈΠ· 3
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°>Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΈΡΠΈΠ½Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°#
ΠΠ²ΡΠΎ-ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ flexbox ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ (ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅), ΠΏΡΠΈΠΌΠ΅ΡΠΈ ΡΠ΅ΡΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°.
1 ΠΈΠ· 3
2 ΠΈΠ· 3 (ΡΠΈΡΠΎΠΊΠΈΠΉ)
3 ΠΈΠ· 3
1 ΠΈΠ· 3
2 ΠΈΠ· 3 (ΡΠΈΡΠ΅)
3 ΠΈΠ· 3
< ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°>Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ#
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠ° (Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°) ΡΠ°Π²Π½ΡΠΌ "auto"
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
1 ΠΈΠ· 3
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
3 ΠΈΠ· 3
1 ΠΈΠ· 3
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
3 ΠΈΠ· 3
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ>
3 ΠΈΠ· 3
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ#
Col
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ 6 ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ (xs, sm, md, lg, xl ΠΈ xxl).
Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°.ΡΠΌ=8
ΡΠΌ=4
ΡΠΌ=ΠΈΡΡΠΈΠ½Π°
sm=true
sm=true
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°>ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΎΠΏΠΎΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅ΡΠΎΠΊ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°.
xs=12 md=8
xs=6 md=4
xs=6 md=4
xs=6 md=4
xs=6 md=4
xs=6 9000 3
Ρ Π·=6
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> {/* ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠ΄Π΅Π»Π°Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ */} <Π‘ΡΡΠΎΠΊΠ°> ΠΡΠΎΠΏΡ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Col
ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΠΎΠΏΡΠ° object
: {span: number, order: number, offset: number}
Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ order
Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠ΅ΡΠ²ΡΠΉ, Π½ΠΎ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ
ΠΡΠΎΡΠΎΠΉ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ
Π’ΡΠ΅ΡΠΈΠΉ, Π½ΠΎ Π²ΡΠΎΡΠΎΠΉ
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°> Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ order
ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ first
( order: -1
) ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ
( ΠΏΠΎΡΡΠ΄ΠΎΠΊ : $columns+1
).
ΠΠ΅ΡΠ²ΡΠΉ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ
ΠΡΠΎΡΠΎΠΉ, Π½ΠΎ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ
Π’ΡΠ΅ΡΠΈΠΉ, Π½ΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°> ΠΠ»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ ΠΊΠ»Π°ΡΡΠ° ΠΏΠΎΠ»Ρ.
md=4
md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 4, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: 4}}
md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 3, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: 3}}
md={{Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½: 3, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: 3}}
md={{ span: 6, offset: 3 }}
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ°>Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΡΡΡΠΎΠΊΠ΅ #
Π‘ΡΡΠΎΠΊΠ°
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ 5 ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ (xs, sm, md, lg, xl ΠΈ xxl). ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
1 ΠΈΠ· 2
2 ΠΈΠ· 2
1 ΠΈΠ· 3
2 ΠΈΠ· 3
3 ΠΈΠ· 3
1 ΠΈΠ· 3
2 ΠΈΠ· 3 900 03
3 ΠΈΠ· 3
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ° xs={2} md={4} lg={6}> ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ° Row
ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ° Col
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π΄Π»Ρ Π½ΠΈΠΆΠ½ΠΈΡ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ, ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ Ρ. Π Π°Π·ΠΌΠ΅Ρ
Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ΅Π½Π΅Π½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
Π½Π° ΡΡΠ΅Π΄Π½ΠΈΡ
ΠΈ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
1 ΠΈΠ· 3
2 ΠΈΠ· 3
3 ΠΈΠ· 3
<ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ> <Π‘ΡΡΠΎΠΊΠ° md={4}>API#
Container#
ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°ΠΉΠ» import Container from 'react-bootstrap/Container' 9 0166 Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡΡΠ° Π΄Π»Ρ ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΠ°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Π’ΠΈΠΏ ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ elementType
9073 0 ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ true
| "ΡΠΌ"
| "ΠΠ"
| "Π»Π³"
| "XL"
| "xxl"
false
Π Π°Π·ΡΠ΅ΡΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
bsPrefix ΡΡΡΠΎΠΊΠ°
'ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ'
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΠ° ΠΈΠΌΠ΅Π½ΠΈ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° CSS ΠΈ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° . ΠΡΠΎ Π°Π²Π°ΡΠΈΠΉΠ½ΡΠΉ Π»ΡΠΊ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΡΠΌ css.
Row#
ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠ°ΠΉΠ» import Row from 'react-bootstrap/Row'
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡΡΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Row ΠΠΌΡ Π’ΠΈΠΏ ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ elementType
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠΈΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
LG Π½ΠΎΠΌΠ΅Ρ | 'Π°Π²ΡΠΎ' | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | 'auto' }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
(β₯992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ). ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°Π²ΡΠΎ
, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ ΠΈΡ
Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ.
ΠΌΠΊΡ Π½ΠΎΠΌΠ΅Ρ | 'Π°Π²ΡΠΎ' | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | 'auto' }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (β₯768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
ΡΠΌ Π½ΠΎΠΌΠ΅Ρ | 'Π°Π²ΡΠΎ' | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | 'auto' }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
(β₯576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
xl Π½ΠΎΠΌΠ΅Ρ | 'Π°Π²ΡΠΎ' | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | 'auto' }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
(β₯1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
xs Π½ΠΎΠΌΠ΅Ρ | 'Π°Π²ΡΠΎ' | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | 'auto' }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
(<576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
xxl Π½ΠΎΠΌΠ΅Ρ | ‘Π°Π²ΡΠΎ’ | { ΡΡΠΎΠ»Π±ΡΡ: Π½ΠΎΠΌΠ΅Ρ | ‘auto’ }
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π½Π° ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
(β₯1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ auto
, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
BSPREFIX Π‘ΡΡΠΎΠΊΠ°
'ΡΡΠ΄
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° CSS Base Name ΠΈ Modifier ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠ° Prefix. ΠΡΠΎ Π°Π²Π°ΡΠΈΠΉΠ½ΡΠΉ Π»ΡΠΊ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ Π·Π°Π³ΡΡΠ·ΠΎΡΠ½ΡΠΌ css.
Col#
ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Col ΠΈΠ· 'react-bootstrap/Col'
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈΠΌΠΏΠΎΡΡΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Col ΠΠΌΡ 90 718 Π’ΠΈΠΏ ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ as elementType
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠΈΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.