Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° бутстрап: БистСма сСток. Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Β· Bootstrap. ВСрсия v4.0.0

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠžΠ±Π·ΠΎΡ€. Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Β· 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%
1140px
.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, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, прСдоставляя Ρ‚Ρ€Π΅Ρ‚ΡŒΡŽ ось для упорядочивания содСрТимого.

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΡˆΠΊΠ°Π»Ρƒ z-индСкса ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² Bootstrap, которая Π±Ρ‹Π»Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π° для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ раздСлСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

Π­Ρ‚ΠΈ Π±ΠΎΠ»Π΅Π΅ высокиС значСния Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ числа, достаточно большого ΠΈ достаточно ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ². Нам Π½ΡƒΠΆΠ΅Π½ стандартный Π½Π°Π±ΠΎΡ€ этих элСмСнтов для Π½Π°ΡˆΠΈΡ… ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² — Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ списки, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° — Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹Ρ‚ΡŒ достаточно ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ. НСт ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 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').Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€('фокус')
}) 

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ дСмонстрационныС вСрсии ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ использованию.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ статичСского Ρ€Π΅ΠΆΠΈΠΌΠ° (это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ позиция ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹). Π’ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, модальноС Ρ‚Π΅Π»ΠΎ (трСбуСтся для заполнСния ) ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» (Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ). ΠœΡ‹ просим вас Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ с дСйствиями закрытия, ΠΊΠΎΠ³Π΄Π° это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ явноС дСйствиС закрытия.

Π—Π΄Π΅ΡΡŒ находится ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ основной тСкст.

 
<Π΄Π΅Π»> <Π΄Π΅Π»>
МодальноС названиС
<Π΄Π΅Π»>

Бюда ΠΈΠ΄Π΅Ρ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ основной тСкст.

<Π΄Π΅Π»>

Живая дСмонстрация

Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΡƒΡŽ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΠΈΠΆΠ΅. Он Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ· ΠΈ ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы.

Π£ΡƒΡ…Ρƒ, Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ этот тСкст Π² модальном Ρ€Π΅ΠΆΠΈΠΌΠ΅!

 
<Π΄Π΅Π»> . ..
<Π΄Π΅Π»>

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ содСрТимого

Когда ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° становятся слишком Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌΠΈ для области просмотра ΠΈΠ»ΠΈ устройства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ нСзависимо ΠΎΡ‚ самой страницы. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΄Π΅ΠΌΠΎ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρƒ.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

ЭнСйская lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

 

        
      
    
  
 

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .modal-dialog-centered ΠΊ .modal-dialog для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования модального ΠΎΠΊΠ½Π°.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, Π²Π΅ΡΡ‚ΠΈΠ±ΡŽΠ»ΡŒ ΠΈ эрос.

 

        
      
    
  
 

Подсказки ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π² ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости. Когда ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹, Π»ΡŽΠ±Ρ‹Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ автоматичСски Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ.

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π² модальном ΠΎΠΊΠ½Π΅

Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.


Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π² модальном ΠΎΠΊΠ½Π΅

Π­Ρ‚Π° ссылка ΠΈ Ρ‚Π° ссылка ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

 <Π΄Π΅Π»>
   
Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π² модальном ΠΎΠΊΠ½Π΅

Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.< /p> <час>

Подсказки в модальном окнС

Π­Ρ‚Π° ссылка ΠΈ эта ссылка ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

ИспользованиС сСтки

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сСтку Bootstrap Π²Π½ΡƒΡ‚Ρ€ΠΈ модального ΠΎΠΊΠ½Π°, Π²Π»ΠΎΠΆΠΈΠ² .container-fluid Π² .modal-body . Π—Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ классы систСмы сСтки, ΠΊΠ°ΠΊ ΠΈ Π²Π΅Π·Π΄Π΅.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

.col-md- 6 .ΠΌΠ»-Π°Π²Ρ‚ΠΎ

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 1: .col-sm-9

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2: .col-8 .col-sm-6

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2: .col-4 .col-sm-6

 <Π΄Π΅Π»>
  <Π΄Π΅Π»>
    <Π΄Π΅Π»>
      
.col-md-4
.col-md-4 .ml-auto
<Π΄Π΅Π»>
.col-md-3 .ml-auto
.col-md-2 .ml-auto
<Π΄Π΅Π»>
.col-md-6 .ml-auto
<Π΄Π΅Π»> <Π΄Π΅Π»> Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 1: .col-sm-9 <Π΄Π΅Π»> <Π΄Π΅Π»> Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2: .col-8 .col-sm-6 <Π΄Π΅Π»> Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2: .col-4 .col-sm-6

Π Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ΅ модальноС содСрТаниС

Π£ вас Π΅ΡΡ‚ΡŒ ΠΊΡƒΡ‡Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ модальноС ΠΎΠΊΠ½ΠΎ с Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ содСрТимым? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ event. relatedTarget ΠΈ HTML data-* (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Π΅Ρ€Π΅Π· jQuery), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ содСрТимоС модального ΠΎΠΊΠ½Π° Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, какая ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π°.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° Тивая дСмонстрация, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ HTML ΠΈ JavaScript. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ событиям для получСния ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ relatedTarget .

ΠŸΠΎΠ»ΡƒΡ‡Π°Ρ‚Π΅Π»ΡŒ:

Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅:

 



          <Π΄Π΅Π»>
            
            <тСкстовоС ΠΏΠΎΠ»Π΅>
          
        
      
      <Π΄Π΅Π»>
        
        
      
    
  
 
 $('#exampleModal'). on('show.bs.modal', функция (событиС) {
  var button = $(event.relatedTarget) // Кнопка, Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π²ΡˆΠ°Ρ модальноС ΠΎΠΊΠ½ΠΎ
  var Receiver = button.data('whatever') // Π˜Π·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² data-*
  // ΠŸΡ€ΠΈ нСобходимости здСсь ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ AJAX-запрос (Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π²Ρ‹Π·ΠΎΠ²Π΅).
  // ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ содСрТимоС модального ΠΎΠΊΠ½Π°. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ jQuery, Π½ΠΎ вмСсто этого Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ привязки Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹.
  пСрСмСнная модальная = $(это)
  modal.find('.modal-title').text('НовоС сообщСниС для ' + получатСля)
  modal.find('.modal-body input').val(ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚Π΅Π»ΡŒ)
}) 

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ

Для ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ, Π° Π½Π΅ ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‚ ΠΏΡ€ΠΈ просмотрС, ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ класс .fade ΠΈΠ· Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ модального ΠΎΠΊΠ½Π°.

  

ДинамичСскиС высоты

Если высота модального ΠΎΠΊΠ½Π° измСняСтся, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ $('#myModal'). modal('handleUpdate') , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ модального ΠΎΠΊΠ½Π° Π² случаС появлСния полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ role="dialog" ΠΈ aria-labelledby="..." , ΡΡΡ‹Π»Π°ΡΡΡŒ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ модального ΠΎΠΊΠ½Π°, ΠΊ .modal ΠΈ role="document" ΠΊ .modal- сам Π΄ΠΈΠ°Π»ΠΎΠ³ . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π°Ρ‚ΡŒ описаниС вашСго модального Π΄ΠΈΠ°Π»ΠΎΠ³Π° с aria-describedby Π½Π° .modal .

ВстраиваниС Π²ΠΈΠ΄Π΅ΠΎ с YouTube

Для встраивания Π²ΠΈΠ΄Π΅ΠΎ YouTube Π² ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° трСбуСтся Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ JavaScript, Π½Π΅ входящий Π² Bootstrap, для автоматичСской остановки воспроизвСдСния ΠΈ Ρ‚. Π΄. Π‘ΠΌ. этот ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ пост ΠΎ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ стСка для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°

ΠΈΠΌΠ΅ΡŽΡ‚ Π΄Π²Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, доступных Ρ‡Π΅Ρ€Π΅Π· классы ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² .modal-dialog . Π­Ρ‚ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… останова, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡƒΠ·ΠΊΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра.

 


  




  
 

ИспользованиС

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ваш скрытый ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎ запросу, Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Он Ρ‚Π°ΠΊΠΆΠ΅ добавляСт .modal-open ΠΊ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ .modal-backdrop , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ‰Π΅Π»Ρ‡ΠΊΠ° для закрытия ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π²Π½Π΅ модального ΠΎΠΊΠ½Π°.

Π§Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…

ΠΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ Π±Π΅Π· написания JavaScript. УстановитС data-toggle="modal" Π½Π° элСмСнт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΡƒ, вмСстС с data-target="#foo" ΠΈΠ»ΠΈ href="#foo" , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ модальноС ΠΎΠΊΠ½ΠΎ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ.

  

Π§Π΅Ρ€Π΅Π· JavaScript

Π’Ρ‹Π·Π²Π°Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ myModal с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠΉ строки JavaScript:

 $('#myModal').modal(options) 

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя ΠΎΠΏΡ†ΠΈΠΈ ΠΊ data- , ΠΊΠ°ΠΊ ΠΈ data-backdrop="" .

Имя Π’ΠΈΠΏ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ОписаниС
Ρ„ΠΎΠ½ логичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ строка 'static' ΠΏΡ€Π°Π²Π΄Π° Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ элСмСнт модального Ρ„ΠΎΠ½Π°. Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ static для Ρ„ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.
ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° логичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²Π΄Π° Π—Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши Π²Ρ‹Ρ…ΠΎΠ΄Π°
фокус логичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²Π΄Π° ΠŸΡ€ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ фокусируСтся Π½Π° модальном ΠΎΠΊΠ½Π΅.
ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ логичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²Π΄Π° ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

АсинхронныС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

ВсС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ API ΡΠ²Π»ΡΡŽΡ‚ΡΡ асинхронными ΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ . Они Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ начинаСтся, Π½ΠΎ Π΄ΠΎ Π΅Π³ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹Π·ΠΎΠ² ΠΌΠ΅Ρ‚ΠΎΠ΄Π° для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ .

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния см. Π² нашСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ JavaScript.

.modal(Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹)

АктивируСт ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΊΠ°ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ. ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° .

 $('#myModal').modal({
  ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π°: лоТь
}) 
.modal('ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ модальноС ΠΎΠΊΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ»ΠΈ скрыто (Ρ‚. Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС visible.bs.modal ΠΈΠ»ΠΈ hidden.bs.modal ).

 $('#myModal').modal('ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ') 
.modal('show')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ модальноС ΠΎΠΊΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ (Ρ‚. Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС , ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅.bs.modal ).

 $('#myModal').modal('ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ') 
. modal('ΡΠΊΡ€Ρ‹Ρ‚ΡŒ')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ скрываСт модальноС ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ модальноС ΠΎΠΊΠ½ΠΎ Π±Ρ‹Π»ΠΎ фактичСски скрыто (Ρ‚. Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС hidden.bs.modal ).

 $('#myModal').modal('ΡΠΊΡ€Ρ‹Ρ‚ΡŒ') 
.modal('handleUpdate')

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ модального ΠΎΠΊΠ½Π°, Ссли высота модального ΠΎΠΊΠ½Π° измСняСтся, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² случаС появлСния полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ).

 $('#myModal').modal('handleUpdate') 
.modal('dispose')

Π£Π½ΠΈΡ‡Ρ‚ΠΎΠΆΠ°Π΅Ρ‚ модальноС ΠΎΠΊΠ½ΠΎ элСмСнта.

Бобытия

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ класс Bootstrap прСдоставляСт нСсколько событий для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ функциям. ВсС ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ события Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π² самом модальном ΠΎΠΊΠ½Π΅ (Ρ‚.Π΅. Π²

).

Π’ΠΈΠΏ события ОписаниС
ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ. bs.modal Π­Ρ‚ΠΎ событиС запускаСтся Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° show вызываСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ экзСмпляра. Если это Π²Ρ‹Π·Π²Π°Π½ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, элСмСнт, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π±Ρ‹Π» сдСлан Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, доступСн ΠΊΠ°ΠΊ свойство relatedTarget события.
ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ.bs.modal Π­Ρ‚ΠΎ событиС запускаСтся, ΠΊΠΎΠ³Π΄Π° модальноС ΠΎΠΊΠ½ΠΎ становится Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS). Если это Π²Ρ‹Π·Π²Π°Π½ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, элСмСнт, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π±Ρ‹Π» сдСлан Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, доступСн ΠΊΠ°ΠΊ свойство relatedTarget события.
ΡˆΠΊΡƒΡ€Π°.bs.modal: Π­Ρ‚ΠΎ событиС запускаСтся сразу послС Π²Ρ‹Π·ΠΎΠ²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π° экзСмпляра hide .
скрытый.bs.modal Π­Ρ‚ΠΎ событиС запускаСтся, ΠΊΠΎΠ³Π΄Π° модальноС ΠΎΠΊΠ½ΠΎ большС Π½Π΅ скрыто ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS).
 $('#myModal').on('hidden.bs.modal', функция (e) {
  // сдСлай Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ. ..
}) 

НСобработанная HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для Twitter Bootstrap Β· GitHub

НСобработанная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρ„ΠΎΡ€ΠΌΡ‹ Twitter Bootstrap

Π­Ρ‚ΠΎ нСобработанная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° всСх элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹, извлСчСнная ΠΈΠ· страницы Ρ„ΠΎΡ€ΠΌΡ‹ Twitter Bootstrap

<Π΄Π΅Π»>

Ну

<Ρ„ΠΎΡ€ΠΌΠ°>
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ тСкста справки Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ° здСсь.
<ΠΌΠ΅Ρ‚ΠΊΠ°>
ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ мСня

Поиск

<Ρ„ΠΎΡ€ΠΌΠ°>
<Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π° = "тСкст">

ВстроСнный поиск

<Ρ„ΠΎΡ€ΠΌΠ°>
<Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π° = "ΠΏΠ°Ρ€ΠΎΠ»ΡŒ" Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ = "ΠΏΠ°Ρ€ΠΎΠ»ΡŒ">
<ΠΌΠ΅Ρ‚ΠΊΠ°>
Π—Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ мСня

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹

<Ρ„ΠΎΡ€ΠΌΠ°>
<Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»Π΅ΠΉ>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
Π—Π΄Π΅ΡΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<ΠΌΠ΅Ρ‚ΠΊΠ°>
<Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π° = "Ρ„Π»Π°ΠΆΠΎΠΊ" Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = "опция 1" ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½>
Π­Ρ‚ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ„Π»Π°ΠΆΠΎΠΊ
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π° = "тСкст">
Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ пошло Π½Π΅ Ρ‚Π°ΠΊ
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π° = "тСкст">
Π˜ΡΠΏΡ€Π°Π²ΡŒΡ‚Π΅ ΠΎΡˆΠΈΠ±ΠΊΡƒ
<Π΄Π΅Π»>
<Π΄Π΅Π»>
Π£Ρ€Π°!
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ>
<опция>1
<опция>2
<опция>3
<опция>4
<опция>5
Π£Ρ€Π°!
<Π΄Π΅Π»>
<Ρ„ΠΎΡ€ΠΌΠ°>
<Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»Π΅ΠΉ>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
span1″>
<Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ>
<опция>1
<опция>2
<опция>3
<опция>4
<опция>5
<Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ>
<опция>1
<опция>2
<опция>3
<опция>4
<опция>5
<Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ>
<опция>1
<опция>2
<опция>3
<опция>4
<опция>5

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅ ΠΆΠ΅ классы . span* ΠΈΠ· систСмы сСтки для Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

<Π΄Π΅Π»>
<Π΄Π΅Π»>

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ статичСскиС классы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΠΎΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ с сСткой, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ стилям CSS ΠΈΠ»ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ элСмСнтов управлСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, input ΠΈΠ»ΠΈ select). ).

<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
@

Π’ΠΎΡ‚ тСкст справки

<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
. 00
Π•Ρ‰Π΅ тСкст справки
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
$.00
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<ΠΌΠ΅Ρ‚ΠΊΠ°>
1
<ΠΌΠ΅Ρ‚ΠΊΠ°>
2
<ΠΌΠ΅Ρ‚ΠΊΠ°>
3
<Π΄Π΅Π»>
<Π΄Π΅Π»>
<ΠΌΠ΅Ρ‚ΠΊΠ°>
ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚: это ΠΈ Ρ‚ΠΎ— ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ Ρ…ΠΎΡ€ΠΎΡˆ
<ΠΌΠ΅Ρ‚ΠΊΠ°>
Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹
<ΠΌΠ΅Ρ‚ΠΊΠ°>
Π’Ρ€Π΅Ρ‚ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” Π΄Π°, ΠΊΠ°ΠΊ Π²Ρ‹ ΡƒΠΆΠ΅ догадались β€” Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

© 2019 Π¨Ρ‚ΠΈΡ€Π»ΠΈΡ† Π‘Π΅Ρ‚ΡŒ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Ρ… салонов Π² ΠŸΠ΅Ρ€ΠΌΠΈ

Цифровая ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ, Ρ†Π²Π΅Ρ‚Π½ΠΎΠ΅ ΠΈ Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠ΅ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², сканированиС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², ризография Π² ΠŸΠ΅Ρ€ΠΌΠΈ.