ΠΠ±Π·ΠΎΡ. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Β· Bootstrap. ΠΠ΅ΡΡΠΈΡ v4.6
CΠΌΠΎΡΡΠ΅ΡΡ Π½Π° GitHub
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΠΎΠΏΡΠΈΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Bootstrap, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄Π»Ρ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ, ΠΌΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠ°ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
ΠΡΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Bootstrap ΠΈ ΠΎΠ½ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π°ΡΠ΅ΠΉ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΈ (ΠΈΠ½ΠΎΠ³Π΄Π°) ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ . Π₯ΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π΅ ΡΡΠ΅Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²:
.container
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρmax-width
Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅;.container-fluid
, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎwidth: 100%
Π½Π° Π²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ ;. container-{breakpoint}
, ΡΠΎ Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°width: 100%
Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° max-width
ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° .container
ΠΈ .container-fluid
ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΈ ΡΡΠ°Π²Π½ΠΈΡΠ΅ ΠΈΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π‘Π΅ΡΠΎΠΊ.
Extra small <576px |
Small β₯576px |
Medium β₯768px |
Large β₯992px |
Extra large β₯1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
. container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
ΠΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°ΡΡ .container
ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° max-width
ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅.
<div> <!-- Content here --> </div>
ΠΠ·ΠΌΠ΅Π½ΡΠΈΠ²ΡΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .container-fluid
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
<div> ... </div>
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π² Bootstrap Π²Π΅ΡΡΠΈΠΈ 4.4. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 100%, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ°, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ max-width
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΡ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠΊΠ°Ρ
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, .container-sm
ΠΈΠΌΠ΅Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² 100% Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° sm
, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠΆΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ md
, lg
ΠΈ xl
.
<div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ (small) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΡΡΠ΅Π΄Π½Π΅ΠΉ (medium) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ (large) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΡΠΊΡΡΡΠ° Π±ΠΎΠ»ΡΡΠΎΠΉ (Extra large) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div>
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Bootstrap Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΡΠΌΠ½ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π½Π°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².
Bootstrap Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² — ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ — Π² Π½Π°ΡΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ Sass Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΎΠΊ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) // ΠΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Π΄Π»Ρ `xs`, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Bootstrap // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 576px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 768px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 992px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ, 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 1200px) { . .. }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΏΠΈΡΠ΅ΠΌ Π½Π°Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ CSS Π½Π° Sass, Π²ΡΠ΅ Π½Π°ΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
// ΠΠ»Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ xs Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // ΠΡΠΈΠΌΠ΅Ρ: Π‘ΠΊΡΡΡΡ Π½Π°ΡΠ°Π»ΠΎ Ρ `min-width: 0`, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π² ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅`sm` .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } }
ΠΠ½ΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΈΠ΄ΡΡΠΈΠ΅ Π² Π΄ΡΡΠ³ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Π·Π°Π΄Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 575.98px) { ... } // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, ΠΌΠ΅Π½Π΅Π΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 767. 98px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΠΌΠ΅Π½Π΅Π΅ 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 991.98px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, ΠΌΠ΅Π½Π΅Π΅ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 1199.98px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ) // ΠΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π·Π°ΠΏΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π½Π°Π΄ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ min-
ΠΈ max-
ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Ρ Π΄ΡΠΎΠ±Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ (ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΡΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ) ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΡ
ΡΡΠ°Π²Π½Π΅Π½ΠΈΠΉ.
ΠΡΠ΅ ΡΠ°Π·, ΡΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
@include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { . .. } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } // ΠΠ»Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ xl Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ // ΠΡΠΈΠΌΠ΅Ρ: ΡΡΠΈΠ»Ρ ΠΎΡ ΡΡΠ΅Π΄Π½Π΅ΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΈ Π½ΠΈΠΆΠ΅ @include media-breakpoint-down(md) { .custom-class { display: block; } }
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ ΠΌΠΈΠΊΡΠΈΠ½Ρ Π΄Π»Ρ Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π³ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 575.98px) { ... } // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 768px) and (max-width: 991.98px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 992px) and (max-width: 1199. 98px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ, 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 1200px) { ... }
ΠΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
@include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... }
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ:
// ΠΡΠΈΠΌΠ΅Ρ // ΠΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ ΡΠΎ ΡΡΠ΅Π΄Π½ΠΈΡ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ. @media (min-width: 768px) and (max-width: 1199.98px) { ... }
ΠΠΈΠΊΡΠΈΠ½ Sass Π΄Π»Ρ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π° Π½Π° ΡΠΎΡ ΠΆΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°:
@include media-breakpoint-between(md, xl) { ... }
Z-ΠΈΠ½Π΄Π΅ΠΊΡ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ z-index
, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΡΡΠ΅ΡΡΡ ΠΎΡΡ Π΄Π»Ρ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΡΠΈ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π°, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ². ΠΠ°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² — Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΎΠΊΠ½Π°, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ, ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° — ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ΅Ρ ΠΏΡΠΈΡΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ 100
+ ΠΈΠ»ΠΈ 500
+.
ΠΡ Π½Π΅ ΠΏΠΎΠΎΡΡΡΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΡΠΈΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ; Π΅ΡΠ»ΠΈ ΠΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½, ΠΠ°ΠΌ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Π²ΡΠ΅.
$zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default;
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π²Ρ
ΠΎΠ΄ΠΎΠ² Π² Π³ΡΡΠΏΠΏΠ°Ρ
Π²Π²ΠΎΠ΄Π°), ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ°Π»ΡΠ΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index
, ΡΠ°Π²Π½ΡΠ΅ 1
, 2
ΠΈ 3
Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ/ΡΠΎΠΊΡΡΠ΅/Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΌΡ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π½Π°Π΄ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
html — ΠΠΎΠΌΠ°Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°/Π²Π΅ΡΡΡΠΊΠ° Π½Π° Bootstrap
ΠΠΎΠΏΡΠΎΡ Π·Π°Π΄Π°Π½
ΠΠ·ΠΌΠ΅Π½ΡΠ½ 6 Π»Π΅Ρ 6 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ 342 ΡΠ°Π·Π°
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠΊΡΠ°Π½Π°
@screen-xs-max: 769px; @screen-sm-min: 770px; @screen-sm-max: 1440px; @screen-md-min: 1441px;
Π½Π° ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ΅ ΠΎΡ 980ΡΡ Π΄ΠΎ 1440ΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΡΡΡΠΊΠ°:
Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ°ΠΊ:
ΠΡΠΈ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΡΠΈΡΡ ΡΠΊΡΠ°Π½Π° Π²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΈ Π΄Π°ΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ row ΡΠ°Π±ΠΎΡΠ°Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ(Π²ΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΠΈ Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΏΠΎΡΠ΅ΠΌΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ°). ΠΠ΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π» Π½Π΅ ΡΠ°ΠΊ. ΠΠΎΡ ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΌΠ°ΠΊΠ΅Ρ, ΡΠ°ΠΌ Π΅ΡΡΡ less ΡΠ°ΠΉΠ». ΠΡΠ»ΠΈ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ! https://drive.google.com/open?id=0B6yBSacgA5HbeXdqSEhSQ0NObUE
- html
- css
- bootstrap
- Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ-Π²Π΅ΡΡΡΠΊΠ°
Π ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² Π°ΡΡ
ΠΈΠ²Π΅ ΠΏΠΎΠ΄ΡΠ΅ΠΏΠ»Π΅Π½Ρ ΡΡΠΈΠ»ΠΈ Π±ΡΡΡΡΡΠ°ΠΏΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ
ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ Π΄Π»Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ². Π Π½ΠΈΡ
col-md-3
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π΄Π»Ρ @media (min-width: 992px)
.
ΠΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠΎΠ±ΡΠ°ΡΡ Π±ΡΡΡΡΡΠ°ΠΏ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΠ΅ΡΠ΅ΡΠ±ΠΎΡΠΊΠΈ.
UPD. ΠΠ΅ΡΠ΅ΡΠΎΠ±ΡΠ°Π» Π±ΡΡΡΡΡΠ°ΠΏ, ΠΏΠΎΠ΄ΡΡΠ°Π²ΠΈΠ² 770px
, 1441px
ΠΈ 2000px
Π² @screen-sm
, @screen-md
ΠΈ @screen-lg
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. Π‘ Π½ΠΎΠ²ΡΠΌ bootstrap.css
ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π½ΡΠΆΠ½ΠΎ.
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² Π±ΡΡΡΡΡΠ°ΠΏΠ΅
Π Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΡΡΡΠΎΠΊΠ° ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π΅ ΠΎΡ -sm-
ΠΊ -md-
. ΠΡΠΎ ΡΡΡΠΎΠΊΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ col-md-3 col-sm-6 col-xs-12
.
Π Π±ΡΡΡΡΡΠ°ΠΏΠ΅ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΠ·ΠΊΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΡ
, ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅ΡΠ΅Π±ΡΡΡ Π½ΠΎΠ²ΡΠΌ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, col-sm-12
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Π½Π° Π²ΡΠ΅Ρ
ΡΠΊΡΠ°Π½Π°Ρ
ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΡ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (@media (min-width: 768px)
), Π° col-xs-12
— Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π° Π²ΡΠ΅Ρ
.
ΠΠΎΡΡΠΎΠΌΡ Π²Π°Ρ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠΎΡΡΠΈΡΡ:
- Π²ΠΌΠ΅ΡΡΠΎ
col-xs-12 col-sm-12 col-md-12
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎcol-xs-12
; - Π²ΠΌΠ΅ΡΡΠΎ
col-md-4 col-sm-4 col-xs-12
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎcol-xs-12 col-sm-4
; - Π²ΠΌΠ΅ΡΡΠΎ
col-md-8 col-sm-8 col-xs-12
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎcol-xs-12 col-sm-8
ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
3
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡΠ΅
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Google
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· Facebook
Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π±Π΅Π· ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ
ΠΠΎΡΡΠ°
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ
ΠΠ°ΠΆΠΈΠΌΠ°Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ ΠΎΡΠ²Π΅ΡΒ», Π²Ρ ΡΠΎΠ³Π»Π°ΡΠ°Π΅ΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠΎΠΉ ΠΎ ΠΊΡΠΊΠΈ
ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ Β· Bootstrap
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Bootstrap JavaScript, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ Π΄Π»Ρ Π»Π°ΠΉΡΠ±ΠΎΠΊΡΠΎΠ², ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Bootstrap, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ.
- ΠΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, CSS ΠΈ JavaScript. ΠΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΈ ΡΠ΄Π°Π»ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΈΠ·
- Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠΌΡ ΡΠΎΠ½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΊΡΠΎΠ΅Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ.
- Bootstrap ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ. ΠΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΈΡΠ°Π΅ΠΌ ΠΈΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
- ΠΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ
position: fixed
, ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠΌ Π΄Π»Ρ Π΅Π³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°. ΠΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ HTML Π½Π° Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΡΠΎΠ²Π½Π΅, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΠΏΠΎΠΌΠ΅Ρ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΏΡΠΈ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ.modal
Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. - ΠΡΠ΅ ΡΠ°Π·, ΠΈΠ·-Π·Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
: ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ
, Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠΎΠ½ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. Π½Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. - ΠΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ HTML5 ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΡ, HTML-Π°ΡΡΠΈΠ±ΡΡ
autofocus
Π½Π΅ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Π² ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠ½Π°Ρ Bootstrap. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ΄ JavaScript: .
$('#myModal').on('show.bs.modal', ΡΡΠ½ΠΊΡΠΈΡ () { $('#myInput').ΡΡΠΈΠ³Π³Π΅Ρ('ΡΠΎΠΊΡΡ') })
Π§ΠΈΡΠ°ΠΉΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° (ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π±ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ). ΠΠΊΠ»ΡΡΠ΅Π½Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎ (ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
) ΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ). ΠΡ ΠΏΡΠΎΡΠΈΠΌ Π²Π°Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Π·Π°ΠΊΡΡΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ²Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π·Π°ΠΊΡΡΡΠΈΡ.
ΠΠ΄Π΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ.
<Π΄Π΅Π»><Π΄Π΅Π»> <Π΄Π΅Π»><Π΄Π΅Π»>ΠΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π‘ΡΠ΄Π° ΠΈΠ΄Π΅Ρ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡ.