Π Π°Π·Π½ΠΎΠ΅

Html Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ: Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ΅?

21.04.2021

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

ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π’Ρ‹ здСсь: Главная β€” JavaScript β€” JavaScript Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ β€” ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ

ОписаниС: ΠžΡ‡Π΅Π½ΡŒ простой ΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ скрипт. ΠžΡ‡Π΅Π½ΡŒ простой скрипт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ способСн Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой, ΠΊΡ‚ΠΎ занимаСтся созданиСм сайтов Π½Π° JavaScript. Но Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° это врСмя, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹:

НавСдитС ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ.

Код javascript (Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> ΠΈ </head>):

<script language="javascript">
var default_color;
function mouseIn() {
  default_color = document.changecolorbutton.but.style.background;
  document.changecolorbutton.but.style.background = "red";
}
function mouseOut() {
  document.changecolorbutton.but.style.background = default_color;
}
</script>

Код HTML (Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <body> ΠΈ </body>):

<form name = "changecolorbutton">
  <input type="button" name="but" value="Click me!!!">
</form>

C ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠœΠΈΡ…Π°ΠΈΠ» Русаков ΠΈ сайт http://myrusakov.ru.

  • Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 20.04.2010 19:10:41
  • ΠœΠΈΡ…Π°ΠΈΠ» Русаков
ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ

ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²Ρ‚ΠΎΡ€Π° (ΠœΠΈΡ…Π°ΠΈΠ» Русаков) ΠΈ индСксируСмой прямой ссылкой Π½Π° сайт (http://myrusakov.ru)!

Π”ΠΎΠ±Π°Π²Π»ΡΠΉΡ‚Π΅ΡΡŒ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄Ρ€ΡƒΠ·ΡŒΡ Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅: http://vk.com/myrusakov.
Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π°Ρ‚ΡŒ ΠΎΡ†Π΅Π½ΠΊΡƒ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅, Ρ‚ΠΎ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π΅Ρ‘ Π² ΠΌΠΎΠ΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΠ΅: http://vk.com/rusakovmy.

Если Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° сайтС,
Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния: ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния

Если Ρƒ Вас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Ρ‹ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π½ΠΈΠ·Ρƒ страницы.

ΠŸΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠΉΡ‚Π΅ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ Π΄Ρ€ΡƒΠ·ΡŒΡΠΌ:

Если Π’Π°ΠΌ понравился сайт, Ρ‚ΠΎ размСститС ссылку Π½Π° Π½Π΅Π³ΠΎ (Ρƒ сСбя Π½Π° сайтС, Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ΅, Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅):

  1. Кнопка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru/images/button.gifΒ» alt=»Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт» /></a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

  2. ВСкстовая ссылка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт</a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт

  3. BB-ΠΊΠΎΠ΄ ссылки для Ρ„ΠΎΡ€ΡƒΠΌΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‘ Π² подписи):
    [URL=Β»https://myrusakov.ruΒ»]Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт[/URL]

Кнопка, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰Π°Ρ свой Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора

72

202

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Π°ΡŽΡ‰ΠΈΡ…ΡΡ ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΡ… свой Ρ†Π²Π΅Ρ‚ тСкстов ΠΌΡ‹ ΡƒΠΆΠ΅ рассматривали Ρ€Π°Π½Π΅Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π° ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ стоят ΠΊΠ½ΠΎΠΏΠΊΠΈ (input type=Β»buttonΒ»). Рассмотрим JavaScript ΠΊΠΎΠ΄, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора ΠΌΡ‹ΡˆΠΊΠΈ.

БобствСнно Π²ΠΎΡ‚ Ρ‚Π°ΠΊ выглядит ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ рассматриваСмого скрипта:


Для получСния Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΡ… свой Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΊΠΈ, помСститС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ скрипт Π² Π½Π°Ρ‡Π°Π»ΠΎ Π’Π°ΡˆΠ΅ΠΉ странички:

JavaScript ΠΊΠΎΠ΄:

<script type="text/javascript">
function color_button(x) {
    if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>

Π”Π°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ†Π²Π΅Ρ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… планируСтся ΠΌΠ΅Π½ΡΡ‚ΡŒ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

HTML ΠΊΠΎΠ΄:

<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
    ΠΠ°Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊΡƒΡ€ΡΠΎΡ€ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ!<br>
    <input type="button" value="Кнопка β„– 1">
    <input type="button" value="Кнопка β„– 2">
    <input type="button" value="Кнопка β„– 3">
</form>

Π•Ρ‰Π΅ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ странички (ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> ΠΈ </head>) ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΊ нашим ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΊΠΈ:

HTML ΠΊΠΎΠ΄:

<style type="text/css">
    .start { color: yellow; background: green; }
</style>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρƒ Вас всС ΠΊΠ½ΠΎΠΏΠΊΠΈ, описанныС, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π’Ρ‹ΡˆΠ΅, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ свой Ρ†Π²Π΅Ρ‚, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΊΠΈ.

Π”Π°Ρ‚Π° создания: 14:10:21 03.07.2011 Π³.

Π”Π°Ρ‚Π° обновлСния: 22:36:47 08.03.2012 Π³.

ΠŸΠΎΡΠ΅Ρ‰Π΅Π½ΠΈΠΉ: 19943 Ρ€Π°Π·(Π°).


ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ всС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ проходят ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΌΠΎΠ΄Π΅Ρ€Π°Ρ†ΠΈΡŽ!

Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ вопрос, Ρ‚ΠΎ сдСлайтС это Π½Π° нашСм Ρ„ΠΎΡ€ΡƒΠΌΠ΅.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π’Ρ‹ смоТСтС быстрСС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠΉ Вас вопрос.

Π—Π°ΠΌΠ΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ submit Π² Ρ„ΠΎΡ€ΠΌΠ΅ html

ЦСль:
БСгодня наша Π·Π°Π΄Π°Ρ‡Π° Π·Π°ΠΌΠ΅Π½Π° стандартной ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ» Π½Π° ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ. Кнопка выполняСт ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΈΠΏ Β«submitΒ». МоТно ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ с Β«submitΒ» Π½Π° Β«imageΒ» ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Β«srcΒ», Π½ΠΎ наша Π·Π°Π΄Π°Ρ‡Π° Π½Π° сСгодня это ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ Β«submitΒ» Π½Π° мСстС ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.
 
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅:
Для Ρ‡Π΅Π³ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ? Всё просто, для придания эстСтичного Π²ΠΈΠ΄Π° Ρ‚ΠΎΠΉ самой ΠΊΠ½ΠΎΠΏΠΊΠ΅.
Π’ΠΎΡ‚ для сравнСния.  Наглядно Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ вторая ΠΊΠ½ΠΎΠΏΠΊΠ° смотрится Π»ΡƒΡ‡ΡˆΠ΅.
 
РСшСниС:
Для выполнСния Π΄Π°Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΊΠ°ΠΊ ΠΈ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Β«inputΒ» с Ρ‚ΠΈΠΏΠΎΠΌ Β«submitΒ». Π•Ρ‰Ρ‘ Π½Π°ΠΌ понадобится ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ класс Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Β«*.cssΒ»
Π’ΠΎΡ‚ ΠΊΠΎΠ΄ для html-Ρ„Π°ΠΉΠ»Π°:

<input type=Β»submitΒ» name=Β»submitΒ» value=Β»ΠžΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒΒ» />

А Π²ΠΎΡ‚ ΠΈ css:

.superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

 
 
Π£ΠΊΡ€Π°ΡˆΠ°Π΅ΠΌ:
Для ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π΅ ΠΊΠ°Ρ€Π΄ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ, Π° всСго лишь Π½Π° Ρ‚ΠΎΠ½ свСтлСС ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΠ½Π΅Π΅. Π― ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅Π» Π·Π°Ρ‚Π΅ΠΌΠ½ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Для этого Π² css добавляСм:

.superbutton:hover{
background:#358DE5;
}

 Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΠΆΠΈΠ»Π°. На статичной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Ρ€Π°Π·Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π½Π΅ Ρ‚Π°ΠΊ Π·Π°ΠΌΠ΅Ρ‚Π½Π° ΠΊΠΎΠ³Π΄Π° Ρ‚Ρ‹ наводишь ΠΌΡ‹ΡˆΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Π² Ρ‚ΡƒΠΆΠ΅ сСкунду мСняСтся накладывая Π±ΠΎΠ»Π΅Π΅ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ.
 
ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
И всё Π²Ρ€ΠΎΠ΄Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΈ выглядит Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ‚Π΅ΠΌΠ½Π΅Π΅Ρ‚, Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΡƒΠΆΠ°ΡΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. Π•Ρ‰Ρ‘ эту Ρ€Π°ΠΌΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Ссли наша ΠΊΠ½ΠΎΠΏΠΊΠ° находится Π² фокусС, Π² Ρ‚ΠΎΠΌ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Tab ΠΏΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты Π½Π° страницС.
Для этого ΠΌΡ‹ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Π² css Π΅Ρ‰Ρ‘ 2 псСвдо класса, ΠΊΠ°ΠΊ ΠΈ Β«hoverΒ». Π­Ρ‚ΠΎ классы Β«activeΒ» ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π²ΠΈΠ΄ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ класс Β«focusΒ» ΠΏΡ€ΠΈ фокусС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. Но Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ нас input ΠΈ присвоСнный Π΅ΠΌΡƒ класс, Ρ‚ΠΎ active ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.
Π’ΠΎΡ‚ ΠΊΠΎΠ΄:

. superbutton:focus{
outline:none;
}

Please enable JavaScript to view the comments powered by Disqus.

Html КАК Π˜Π—ΠœΠ•ΠΠ˜Π’Π¬ Π¦Π’Π•Π’ КНОПКИ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½

Π’ΠΈΠ΄Π΅ΠΎ:

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ Π΄Ρ€ΡƒΠ·ΡŒΡ! Π’ этом Π²ΠΈΠ΄Π΅ΠΎ я Π²Π°ΠΌ расскаТу, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста Π² HTML, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ вс

Π’ ΡƒΡ€ΠΎΠΊΠ΅ задСйствуСм #псСвдоэлСмСнты #before ΠΈ #after, для #Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ появлСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ #transition, Π° ΠΏΡ€ΠΈ β€¦

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ Π΄Ρ€ΡƒΠ·ΡŒΡ! ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… hover эффСктов CSS ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ссылку ΠΈΠ»ΠΈ Ρ‚Π΅ΠΊ

ΠŸΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ: WMR: R288272666982 WMZ: Z293550531456 ЯндСкс.Π”Π΅Π½ΡŒΠ³ΠΈ: 410011531129223 Π‘Π»ΠΎΠ³: β€¦

β€’ Π‘ΠΊΠΈΠ΄ΠΊΠ° 10% Π½Π° ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ Ρ‚Π°Ρ€ΠΈΡ„Ρ‹ ΠΏΠΎ ΠΏΡ€ΠΎΠΌΠΎΠΊΠΎΠ΄Ρƒ: SKIDKA10 β€’ 7 Π΄Π½Π΅ΠΉ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ доступа ΠΏΠΎ ΠΏΡ€ΠΎΠΌΠΎΠΊΠΎΠ΄Ρƒ: SUPER7 Π”ΠΎΠ±Π°Π²Π»ΡΠΉΡ‚Π΅ΡΡŒ

In this video you’ll going to learn how to create different kind of buttons in Android Studio. My Courses: β€¦

ΠŸΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ: WMR: R288272666982 WMZ: Z293550531456 ЯндСкс.Π”Π΅Π½ΡŒΠ³ΠΈ: 410011531129223 Π‘Π»ΠΎΠ³: β€¦

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π² HTML (Ρ‚Π΅Π³ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ² Ρ„ΠΎΠ½Π° HTML). Π‘Ρ‚Π°Ρ‚ΡŒΡŽ см. здСсь: β€¦

Π’ Π΄Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π² HTML ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ CSS с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΊΡ€ΡƒΠ³Π»

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ. БСгодня ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ дСлаСтся стилизация Checkbox ΠΈ стилизация radio css. это Ρ‚Π°ΠΊΠΈΠ΅ β€¦

Π—Π°ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΊΠΎΠ½Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΡŽ ΠΏΠΎ Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Ρƒ: Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Ρ„ΠΎΡ€ΠΌΡ‹ подписки Mailchimp Π½Π° β€¦

Π₯ΠΎΡ‡Π΅ΡˆΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π½Π° CSS HTML? Π― расскаТу ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ! Π’ Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π»Π΅ я β€¦

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ напишСм ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, научимся Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с свойствами Ρ„ΠΎΡ€ΠΌΡ‹ измСняя Π΅

Enroll My Course : Next Level CSS Animation and Hover Effects β€¦

ΠŸΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ: WMR: R288272666982 WMZ: Z293550531456 ЯндСкс.Π”Π΅Π½ΡŒΠ³ΠΈ: 410011531129223 Π‘Π»ΠΎΠ³: β€¦

ΠœΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒ CSS-Ρ„ΠΈΡ‡ΠΈ! БСгодня ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свою radio ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ чСкбокс (checkbox input

Π‘Ρ‚Π°Ρ‚ΡŒΠΈ Π‘Π°Ρ€Ρ‹ Π‘ΡƒΠ°ΠΉΠ΄Π°Π½ β€” β€” ΠšΡƒΡ€Ρ Β«ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ SVG-Ρ„ΠΈΠ³ΡƒΡ€Β» β€¦

Вильда. ΠšΡ€ΡƒΡ‚Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π² Ρ‚ΠΈΠ»ΡŒΠ΄Π΅. Tilda publishing, zero block. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π²Π°ΡˆΠ΅ΠΌΡƒ вниманию Ρ‚Ρ€ΠΈ классных

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°

Π§Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β»?

Он Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ экран ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ. Π­Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ° являСтся Π·Π°Ρ‰ΠΈΡ‚ΠΎΠΉ ΠΎΡ‚ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² систСмС. Но ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ дСйствия, эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π·Π°Ρ‰ΠΈΡ‚Ρ‹ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Ρ‚ΡŒ.

Кнопка Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊ бСзопасному ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ, Π° Π½Π΅ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ваша ΠΊΠ½ΠΎΠΏΠΊΠ° β€œΠžΡ‚ΠΌΠ΅Π½Π°β€ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ.

ΠΠ΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ для Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π¦Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Кнопка Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π½Π΅ являСтся ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ послС наТатия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² систСмС Π½Π΅ происходит. Π’Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Ρ‚ΡŒ это Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΠΈΠ»ΠΈ Π²Ρ‹ создадитС Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. ВмСсто этого Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π½ΠΎΡΠΈΡ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ являСтся ΠΎΡ‚ΠΊΠ°Π·ΠΎΠΌ ΠΎΡ‚ дСйствия.

Кнопка Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ, Π½Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°ΡŽΡ‰ΡƒΡŽ дСйствий ΠΊΠ½ΠΎΠΏΠΊΡƒ. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ видят, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ†Π²Π΅Ρ‚Π°, ΠΎΠ½ΠΈ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°ΡŽΡ‚ Π΅Π΅ ΠΊΠ°ΠΊ запасной, бСзопасный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· экрана подтвСрТдСния.

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

Π£ Β«ΠžΡ‚ΠΌΠ΅Π½Ρ‹Β» ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½

НС всС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ надпись Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β», Π½ΠΎ всС ΠΎΠ½ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. НапримСр, ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ надпись «НС сСйчас», «НСт, спасибо», Β«ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅Β» ΠΈΠ»ΠΈ Β«ΠŸΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒΒ», Π² зависимости ΠΎΡ‚ контСкста. Если ΠΊΠ½ΠΎΠΏΠΊΠ° отмСняСт ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС, рассматривайтС Π΅Π΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β», ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° выполняСт Ρ‚Ρƒ ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ.

Π§Π΅ΠΌ большС ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° экранС, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° ΠΎΡ‚ΠΌΠ΅Π½Π°. Когда всС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ†Π²Π΅Ρ‚, Π²Ρ‹Ρ…ΠΎΠ΄ ΠΈΠ· ситуации нСпонятСн. Но ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° β€œΠžΡ‚ΠΌΠ΅Π½Π°β€ ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π²Ρ‹Π±ΠΎΡ€ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ.

Достаточно сСрый

ΠŸΡ€ΠΈ использовании сСрого Ρ†Π²Π΅Ρ‚Π° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ достаточно Ρ‚Π΅ΠΌΠ½Ρ‹ΠΌ. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Π°Ρ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваша ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ читаСтся, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ контраст с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Color Review. Π­Ρ‚Π° ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π° сообщит Π²Π°ΠΌ, соотвСтствуСт Π»ΠΈ ваш сСрый стандартам доступности для Ρ†Π²Π΅Ρ‚Π° тСкста.

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ

Когда Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ экран подтвСрТдСния, ΠΎΠ½ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. Но для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ ΠΏΠΎ ошибкС ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ΡƒΠΌΠ°Π΅Ρ‚ Π² процСссС, ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» β€” это Π·Π°Π»ΠΎΠ³ бСзопасности.

ЦвСтная ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» посылаСт ΠΈΠΌ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ сигналы. Она заставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ сСбя ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, Π° Π½Π΅ ΠΊΠ°ΠΊ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊ бСзопасности. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΡ‚ΠΌΠ΅Π½Π°Β» Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±Ρ‹Π»ΠΎ Π»Π΅Π³Ρ‡Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ· экранов подтвСрТдСния.

17 Π»Π΅ΠΊΡ†ΠΈΠΉ ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ интСрфСйсов Π¨ΠΊΠΎΠ»Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйсов ЯндСкса

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Если Π²Ρ‹ нашли ΠΎΠΏΠ΅Ρ‡Π°Ρ‚ΠΊΡƒ β€” Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl + Enter! Для связи с Π½Π°ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ info@apptractor.ru.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ тСкста ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… классов Π² Bootstrap 3

Главная / Как устроСны сайты / Π‘Π°ΠΉΡ‚Ρ‹ Π½Π° Bootstrap

20 января 2021

  1. Π‘Ρ‚ΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ тСкста
  2. ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ классы Π² Бутстрап 3 (hidden ΠΈ visible)
  3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ
  4. Как ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Ρ„Π°ΠΉΠ»Π΅ собствСнных стилСй
  5. ДобавляСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили Bootstrap

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru. Π­Ρ‚ΠΎ ΡƒΠΆΠ΅ чСтвСртая ΡΡ‚Π°Ρ‚ΡŒΡ Π² Π΄Π°Π½Π½ΠΎΠΉ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ΅:

  1. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΌΡ‹ познакомились с основами ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π² подробностях ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ вопрос ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Бутстрам ΠΊ Html страничкам (Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ).
  2. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π² подробностях ΠΈ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… рассмотрСли устройство ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ сСточной систСмы Π² Bootstrap 3 (ΠΎΠ½Π° сущСствСнно отличаСтся ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… вСрсий этого Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°).
  3. Ну, Π° Π² Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΏΡ€ΠΎ ряд ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² вСрстки сайта Π½Π° Бутстрап, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π°ΠΌ Π² дальнСйшСм.

БСгодня ΠΆΠ΅ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ возмоТности стилСвого оформлСния тСкста срСдствами Бутстрапа ΠΈ ΠΏΡ€ΠΎ использованиС ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… классов, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты Π²Π΅Π±-страницы ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана. Π’Π°ΠΊΠΆΠ΅ ΠΌΡ‹ посмотрим, ΠΊΠ°ΠΊ срСдствами этого Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ. Ну ΠΈ Π² самом ΠΊΠΎΠ½Ρ†Π΅ ΠΌΡ‹ посмотрим, ΠΊΠ°ΠΊ Π² Bootstrap 3 ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ (ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана) ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ классы ΠΊ Π½ΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стилизации.

Π‘Ρ‚ΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ тСкста ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ классы Π² Bootstrap

Π‘ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ Бутстрап 3 Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅ ΠΈΠ΄Π΅Ρ‚ мноТСство встроСнных стилСй, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ навСрняка сочтСтС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ. ВсС ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ встроСнных стилСй Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΠΎΠ·Ρ€Π΅Ρ‚ΡŒ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ CSS. На ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΉΡΡ страницС Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ мноТСство Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ позволят ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° стили, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ тСкста, ΠΊΠΎΠ΄Π°, создания Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠ½ΠΎΠΏΠΎΠΊ, форматирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ встраивании Π³Π»ΠΈΡ„-ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ±ΠΎ всСм этом ΠΏΠΎ порядку.

НачнСм с Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами β€” оформлСния тСкста. Из ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ страницС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… Π²Ρ‹ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Ρ‹ Ρ‚Π΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡ‚ h2 Π΄ΠΎ H6, Π΅Ρ‰Π΅ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π° сайтС Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π΅Π½ 14 пиксСлям, Π° высота строк Π±ΡƒΠ΄Π΅Ρ‚ Π±Ρ€Π°Ρ‚ΡŒΡΡ Ρ€Π°Π²Π½ΠΎΠΉ 20 пиксСлям. Ну, Π° ΠΏΡ€ΠΈ использовании Ρ‚Π΅Π³Π° Π°Π±Π·Π°Ρ†Π° Β«PΒ» Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π²Π½ΠΈΠ·Ρƒ отступ высотой Π² полстроки.

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ классы. НапримСр, довольно часто ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† Π² тСкстС ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π°Π±ΠΈΡ€Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ прочтСния Π΅Π³ΠΎ посСтитСлями ΠΈ вовлСчСния ΠΈΡ… Π² дальнСйшСС знакомство с ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌΠΈ. Π’ БутстрапС для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ этого Π±ΡƒΠ΄Π΅Ρ‚ достаточно Π² Ρ‚Π΅Π³ Β«PΒ» Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ LEAD β€” class="lead".

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я просто Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π² Ρ‚Π΅Π³ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° Π΄Π°Π½Π½Ρ‹ΠΉ класс:

<p>

Π­Ρ‚ΠΎΡ‚ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΈ всС ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ я Π±ΡƒΠ΄Ρƒ ΡΠ½ΠΈΠΌΠ°Ρ‚ΡŒ с ΡƒΠΆΠ΅ созданного Π½Π°ΠΌΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π΅ΠΊΠΎΠΉ вСбстраницы. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ лишь ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»ΠΈΠΊ sait-4.html (для этого ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ· контСкстного мСню ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкС как…»). Если этот Ρ„Π°ΠΉΠ»ΠΈΠΊ Π²Ρ‹ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ (ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ссылкС Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ), Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ получится, ΠΈΠ±ΠΎ Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡΡ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Бутстрап.

Π’ ΠΏΠ»Π°Π½Π΅ форматирования тСкста Бутстрап ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° классичСский язык Html, ΠΎΠ½ позволяСт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ:

Код этого Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° Π² Html Ρ„Π°ΠΉΠ»ΠΈΠΊΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ ΠΊ Bootstrap 3 ΠΏΡ€ΠΈ этом выглядит Ρ‚Π°ΠΊ:

<ol>
	<li><code>Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² тСкстС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² <code>&lt;code&gt;</code></code></li>

	<li><mark>ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ окруТСния Π΅Π³ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³Π°ΠΌΠΈ <code>&lt;mark&gt;</code></mark></li>
<li>	<s>ΠŸΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ тСкст с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ окруТСния Π΅Π³ΠΎ Ρ‚Π΅Π³Π°ΠΌΠΈ <code>&lt;del&gt;</code> Π»ΠΈΠ±ΠΎ <code>&lt;s&gt;</code> </s></li>
<li>	<u>ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ тСкст с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ окруТСния Π΅Π³ΠΎ Ρ‚Π΅Π³Π°ΠΌΠΈ <code>&lt;ins&gt;</code> Π»ΠΈΠ±ΠΎ <code>&lt;u&gt;</code> </u></li>
<li><small>УмСньшСниС ΡˆΡ€ΠΈΡ„Ρ‚Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΅Π³ΠΎ окруТСния Ρ‚Π΅Π³Π°ΠΌΠΈ <code>&lt;small&gt;</code></small>	</li>
<li>Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ <strong>ΠΆΠΈΡ€Π½Ρ‹ΠΌ</strong> ΠΈ <em>курсивом</em> с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <code>&lt;strong&gt;</code> ΠΈ <code>&lt;em&gt;</code></li>
<li>Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ - с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния класса <code>text-right</code></li>
<li>Или ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ - с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния класса <code>text-center</code></li>
<li><blockquote>ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ†ΠΈΡ‚Π°Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² <code>&lt;blockquote&gt;</code></blockquote></li>
<li><blockquote>РСвСрсированиС выравнивания тСкста Π² Ρ†ΠΈΡ‚Π°Ρ‚Π°Ρ… - с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³ <code>&lt;blockquote&gt;</code> класса <code><code>blockquote-reverse</code></code></blockquote></li>
	</ol>

ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«TypographyΒ»

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ классы Π² Бутстрап 3 (hidden ΠΈ visible) β€” для Ρ‡Π΅Π³ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ Ρ„Π°ΠΉΠ»Π΅ sait-4.html ΡƒΠΆΠ΅ настроСны сСточныС систСмы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π½ΡƒΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Однако, ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ситуация, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈ просмотрС страницы Π½Π° ΠΌΠ°Π»Ρ‹Ρ… экранах Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° окаТутся лишними (совсСм Π½Π΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° смартфонС). Π§Ρ‚ΠΎ я имСю Π² Π²ΠΈΠ΄Ρƒ?

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ sait-4.html Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ строкС (напомню, Ρ‡Ρ‚ΠΎ строки Π² Bootstrap ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² с прописанных Π² Π½ΠΈΡ… классами class="row") Ρƒ нас отобраТаСтся Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ описаниС сайта, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ. Π’Π°ΠΊ Π²ΠΎΡ‚, ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана ΠΌΡ‹ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ² ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° этот самый Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ размСщаСтся ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π° ΡƒΠΆΠ΅ ΠΏΠΎΡ‚ΠΎΠΌ слСдуСт ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ страницы.

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, Π±Ρ‹Π»ΠΎ Π±Ρ‹ умСстным Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π½Π° ΠΌΠ°Π»Ρ‹Ρ… устройствах ΡƒΠ±Ρ€Π°Ρ‚ΡŒ (особСнно, Ссли Π±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» Π΅Ρ‰Π΅ большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°), ΠΈΠ±ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ смысловой Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΠ½ Π½Π΅ нСсСт ΠΈ нСсколько Π΄Π΅Π·ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ посСтитСля сайта, зашСдшСго Π½Π° Π½Π΅Π³ΠΎ с Π³Π°Π΄ΠΆΠ΅Ρ‚Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ мСньшС 768 пиксСлСй ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ классы hidden ΠΈ visible.

Однако, сразу ΠΎΠ³ΠΎΠ²ΠΎΡ€ΡŽΡΡŒ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ скроСм Π΄Π°Π½Π½Ρ‹ΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΠ½ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ (просто Π±ΡƒΠ΄Π΅Ρ‚ скрыт), ΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡˆΠ΅. Для Ρ€Π°Π΄ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π”ΠΆΠ°Π²Π°-скрипта, Π½ΠΎ ΠΌΡ‹ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ возмоТности Бутстрапа, поэтому ΠΈΡ… ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ.

Π˜Ρ‚Π°ΠΊ, для наглядности ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΡ‹Ρ… дСйствий ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС Bootstrap Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«Responsive utilitiesΒ» ΠΈΠ· Π»Π΅Π²ΠΎΠ³ΠΎ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ появляСтся ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΏΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«CSSΒ» ΠΈΠ· мСню Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ. Π’Π°ΠΌ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ срабатывания ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… классов ΠΏΡ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экранов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒΡΡ страница сайта:

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Π°Ρ сСрия классов ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов Π²Π΅Π±-страницы ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экрана. Π’ Π½ΠΈΡ… Ρ‚Π°ΠΊΠΆΠ΅ указываСтся Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΈΡ€Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ сСтки, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ (напомню, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² всСго Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ β€” ΠΎΡ‡Π΅Π½ΡŒ малСнькая xs, малая sm, срСдняя md ΠΈ большая lg).

Класс hidden ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π°ΠΌ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΡˆΡƒ Π·Π°Π΄Π°Ρ‡Ρƒ β€” ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ элСмСнт (Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ) ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана (ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°) Π½ΠΈΠΆΠ΅ 768 пиксСлСй ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. Π’.Π΅. Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ класс hidden-xs исходя ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Как это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ просто. Найти Π² ΠΊΠΎΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° sait-4.html строку, Π³Π΄Π΅ задаСтся ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, ΠΈ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚Π΅Π³ IMG класс class="hidden-xs":

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π½Π° Π½ΠΈΠ·ΠΊΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π±ΡƒΠ΄Π΅Ρ‚ просто ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Ρ‚ΡŒ, Π° Π½Π΅ ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ сайта.

Π§Ρ‚ΠΎ ΠΈ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠŸΡ€ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ возмоТности использования ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… классов я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π²Π°ΠΌ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ самим.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов btn Π² Бутстрап 3

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ популярный элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ практичСски Π½Π° всСх сайтах, это, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ. Bootstrap позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° практичСски ΠΈΠ· любой ссылки, ΠΈΠΌΠ΅ΡŽΡ‰Π΅ΠΉΡΡ Ρƒ вас Π½Π° Π²Π΅Π±-страницС. Для этого достаточно Π±ΡƒΠ΄Π΅Ρ‚ лишь Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подходящиС классы. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Π΄Π°Π²Π½Ρ‹ΠΌ-Π΄Π°Π²Π½ΠΎ я описывал созданиС ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ для этого Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°. Π—Π΄Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π° ΠΆΠ΅ самая Π»ΠΎΠ³ΠΈΠΊΠ°.

На ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° всС возмоТности ΠΏΠΎ созданию ΠΊΠ½ΠΎΠΏΠΎΠΊ описаны Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«ButtonsΒ». ВозмоТностСй этих довольно ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ ΠΎΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ· Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ создания ΠΈ оформлСния ΠΊΠ½ΠΎΠΏΠΎΠΊ.

Π’ нашСм ΠΌΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€Π°Π΄Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ (Ρ„Π°ΠΉΠ»ΠΈΠΊ sait-4.html, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅) Π΅ΡΡ‚ΡŒ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊ ΠΈ Π½Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Π― Π³ΠΎΠ²ΠΎΡ€ΡŽ ΠΏΡ€ΠΎ ссылки Β«Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅Β», располоТСнныС Π²Π½ΠΈΠ·Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ анонса.

Π’ΠΎΠΎΠ±Ρ‰Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° основС Π΄Π²ΡƒΡ… элСмСнтов Html ΠΊΠΎΠ΄Π°: button ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ гипСрссылки с Ρ‚Π΅Π³ΠΎΠΌ A. ΠœΡ‹ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΠΌ лишь Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚Π΅Π³ A ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ класс. Π‘Π½Π°Ρ‡Π°Π»Π° Π² этом классС прописываСтся класс btn (Ρ‡Ρ‚ΠΎ само ΠΏΠΎ сСбС Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойств Π½Π΅ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ ссылкС), Π° ΡƒΠΆΠ΅ ΠΏΠΎΡ‚ΠΎΠΌ дописываСтся ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько классов, Π·Π°Π΄Π°ΡŽΡ‰ΠΈΡ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΠΈΠ»ΠΈ ΠΈΡ… Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ). Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π”ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ссылкС Β«Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅Β» класс Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΡƒΠΌΠΎΠ»Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ β€” class="btn btn-default"):

<a target="_blank" href="Π£Ρ€Π»">Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅</a>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ наша ссылка с успСхом прСвратится Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ благодаря встроСнным Π² Бутстрап стилям:

ΠšΠ»Π°ΡΡΡ‹ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Bootstrap Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π·ΡΡ‚ΡŒ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²:

Π‘ΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊ Π½ΠΈΠΌ курсора ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ своСго Ρ‚ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с сайтом Π±ΠΎΠ»Π΅Π΅ понятной для посСтитСля (статичныС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π°Π΄Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ). Кнопка с Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π½Π΅ слишком бросаСтся Π² Π³Π»Π°Π·Π°, поэтому Ссли трСбуСтся Π°ΠΊΡ†Π΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ внимания, Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ стили (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, danger ΠΈΠ»ΠΈ warning). Ну ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ это Π΄Π΅Π»ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ простым Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ класса btn-lg:

<a target="_blank" href="Π£Ρ€Π»">Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅</a>

ВсС ΠΎΡ‡Π΅Π½ΡŒ просто ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятно. По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с сСточной систСмой, Π² Bootstrap имССтся Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ основных Ρ€Π°Π·ΠΌΠ΅Ρ€Π° для ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π‘Π΅Π· прописывания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… классов Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ срСдний Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ, Π° ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ btn-lg, btn-sm ΠΈ btn-xs ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, ΠΌΠ°Π»ΡƒΡŽ ΠΈ ΡΠ²Π΅Ρ€Ρ…ΠΌΠ°Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ, соотвСтствСнно. БобствСнно, всС довольно понятно ΠΈΠ· Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°:

ΠšΡ€ΠΎΠΌΠ΅ этого, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π² БутстрапС ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€Π°Π²Π½Ρ‹ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Π°. Данная опция ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ довольно ΡƒΠ΄ΠΎΠ±Π½Π° ΠΏΡ€ΠΈ создании ΠΊΠ½ΠΎΠΏΠΎΡ‡Π΅ΠΊ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ всСй ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Для этого достаточно Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ вмСсто класса Ρ€Π°Π·ΠΌΠ΅Ρ€Π° класс btn-block:

<a target="_blank" href="Π£Ρ€Π»">Π§ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅</a>

Как ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„Π°ΠΉΠ»Π° с собствСнными стилями?

Π”Ρ€ΡƒΠ³ΠΎΠΉ вопрос β€” Π° Ρ‡Ρ‚ΠΎ, Ссли ΠΈΠ· прСдставлСнных Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ΄ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ΅ Π²Π°ΠΌΠΈ стилСвоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайта? Π’Ρ‹Ρ…ΠΎΠ΄ Π΅ΡΡ‚ΡŒ, ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ½ Π² ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰ΠΈΡ… Π²Π°ΠΌ CSS ΠΏΡ€Π°Π²ΠΈΠ», Π½ΠΎ Π½Π΅ Π² Ρ„Π°ΠΉΠ» стилСй Bootstrap 3 (Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ внСсСнныС измСнСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°), Π° Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданный ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΊ вСбстраницС Ρ„Π°ΠΉΠ»ΠΈΠΊ manual.css с нашими собствСнными стилями (Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΎΠ± этом Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅, ссылку Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π² самом Π²Π΅Ρ€Ρ…Ρƒ этой ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ).

Π”ΠΎ сих ΠΏΠΎΡ€ Ρ„Π°ΠΉΠ» manual.css оставался Ρƒ нас пустым, Π²ΠΎΡ‚ ΠΈ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Π΅Π³ΠΎ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π±Π»Π°Π³ΠΎ сайтостроСния. Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS сСлСкторы ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅? А ΠΏΡ€ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ CSS свойства Ρ‡ΠΈΡ‚Π°Π»ΠΈ? Как ΠΈ Ρ‡Ρ‚ΠΎ задаСтся, Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ расставляСт ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹? Если Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ дСсяток ΠΌΠΎΠΈΡ… ΡƒΡ€ΠΎΠΊΠΎΠ² (надСюсь максимально ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Ρ… ΠΈ доступных) ΠΏΠΎ Π½Π΅Π»Π΅Π³ΠΊΠΎΠΌΡƒ Π΄Π΅Π»Ρƒ погруТСния Π² ΠΏΡƒΡ‡ΠΈΠ½Ρ‹ стилСвой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π²Π΅Π±-страниц β€” Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ ΠΏΠΎ использованию CSS. ΠœΡ‹ ΠΆΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ, Π½Π΅ сильно ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡŒ Π½Π° подробностях использования стилСй.

Π˜Ρ‚Π°ΠΊ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов Бутстрапа, Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ, Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΈ Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°Π΅Ρ‚ ΠΏΡ€ΠΈ ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅ΠΉ курсора, Π½ΠΎ это ΡƒΠΆΠ΅ вторая Π·Π°Π΄Π°Ρ‡Π°. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΏΠΎΠ³Π»ΡƒΠΌΠΈΡ‚ΡŒΡΡ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅. Π’ΠΏΠΎΠ»Π½Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΈΡ… всС Π² Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмС, созвучной сайту (Π½Π΅ Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ).

Как сСйчас Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Ρ†Π²Π΅Ρ‚? Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прописанных Π² Ρ‚Π΅Π³Π°Ρ… ссылок A классов Bootstrap 3. НапримСр, Π² записи Β«btn btn-primary btn-blockΒ» Π·Π° Ρ†Π²Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ btn-primary. Как ΠΌΡ‹ ΡƒΠΆΠ΅ ΠΎΠ±Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Ρ€Π°Π½Π΅Π΅, Π² основном Ρ„Π°ΠΉΠ»Π΅ стилСй ΠΌΡ‹ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ, поэтому Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² наш Ρ„Π°ΠΉΠ»ΠΈΠΊ manual.css. Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этой ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‚ΠΎ CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

.btn-primary {
background-color: #cdae51;
border-color: #3F2B22;
color: #000000;
}

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ (background-color), Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π΅ (border-color) ΠΈ Ρ†Π²Π΅Ρ‚ тСкста (color). Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ ΠΎΠ½Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ помСняСт свой Π²ΠΈΠ΄:

Если Ρƒ вас ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Ρ‚ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ manual.css Π² вашСм Ρ„Π°ΠΉΠ»ΠΈΠΊΠ΅ sait-4.html β€” ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒΡΡ послС ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ основного Ρ„Π°ΠΉΠ»Π° Бутстрапа. Π’.Π΅. ΡΡ‚ΠΎΡΡ‚ΡŒ Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠ΄Π΅:

ΠŸΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΏΠΎΡ‡Π΅ΠΌΡƒ? Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ прописали сСйчас CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² основном Ρ„Π°ΠΉΠ»Π΅ стилСй. Как ΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Π°? ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΎΠΌ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠ². Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΎΠ± этом Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«ΠŸΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ Css свойств (с important ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ)Β». Ну Π²ΠΎΡ‚, Π° ΠΏΡ€ΠΈ равСнствС ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, стоящСС Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠ΄Π΅ (Ρ‚ΠΎ бишь Π² Ρ‚ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ послСдним). Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ свойств Π² Ρ„Π°ΠΉΠ»Π΅ manual.css с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния ΠΊ Π½ΠΈΠΌ !important:

.btn-primary {
 background-color: #cdae51 !important;
 border-color: #3F2B22 !important;
 color: #000000 !important;
}

Но это Ρ‚Π°ΠΊ, Π½Π° всякий случай я рассказал β€” Π²Π΄Ρ€ΡƒΠ³ пригодится. Π‘ΡƒΠ΄Π΅ΠΌ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ вас Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π”Π°, кстати, Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ нюанс. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ всС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайтС ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ (маловСроятно, Π½ΠΎ всС ΠΆΠ΅), Ρ‚ΠΎ для этого просто Π·Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ CSS ΠΏΡ€Π°Π²ΠΈΠ»Π΅ сСлСктор .btn-primary Π½Π° просто .btn. Π’Ρ‹ ΡƒΠΆΠ΅ Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π²Π΅Π·Π΄Π΅ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ добавляСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс btn, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ°ΠΊ Π±Ρ‹ сам ΠΏΠΎ сСбС Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ мСняСт. Π’ΠΎΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ для примСнСния ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ стилСвых свойств для всСх ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° сайтС этот самый класс ΠΈ Π½ΡƒΠΆΠ΅Π½. Π’ΠΎ ΠΆΠ΅ самоС Π±ΡƒΠ΄Π΅Ρ‚ ΠΈ ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ряда Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π²Π΅Π±-страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Бутстрапа. ВсС ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½ΠΎ.

Π›Π°Π΄Π½ΠΎ, Π½Π°ΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΊΡƒ ΠΏΠΎΡ€Π΅ΡˆΠ°Ρ‚ΡŒ Π½Π°Π΄ΠΎ. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½Π° ΠΎΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅ΠΉ курсора ΠΌΡ‹ΡˆΠΈ? ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСлСкторы псСвдоклассов ΠΈΠ»ΠΈ псСвдоэлСмСнтов. Однако, ΠΏΡ€ΠΎΡ‰Π΅ всСго ΠΎΠ± этом Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΈΠ±ΠΎ ΠΎΠ½ Ρ‚ΠΎ ΡƒΠΆ Π»ΡƒΡ‡ΡˆΠ΅ всСх Π·Π½Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊΠΈΠ΅ CSS свойства ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ.

ΠŸΡ€Π°Π²Π΄Π°, Π²ΠΎΡ‚ Ρ‚Π°ΠΊ Π·Π° Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ ТивСшь Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Π°ΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ скаТСт, Π½ΠΎ Ссли Π΅Π³ΠΎ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π€Π°ΠΉΠ΅Ρ€Π±Π°Π³Π° (ΠΈΠ»ΠΈ встроСнных Π² любой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ инструмСнтов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈΠ· мСню ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π° Β«ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° элСмСнта» ΠΈΠ»ΠΈ Π΅ΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ), Ρ‚ΠΎ ΠΎΠ½ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ всС ΠΊΠ°ΠΊ милСнький. ΠžΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΏΡ‹Ρ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π° ΠΌΡ‹ констатируСм, Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ задаСтся Π² основном Ρ„Π°ΠΉΠ»Π΅ Bootstrap с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π²ΠΎΡ‚ сборного сСлСктора:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary

БобствСнно, ΠΌΡ‹ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ Π±ΡƒΠ΄ΡŒ Π΄ΡƒΡ€Π°ΠΊΠ°ΠΌΠΈ Π΅Π³ΠΎ ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ сСбС Π² Ρ„Π°ΠΉΠ»ΠΈΠΊ manual.css, Π° ΠΊ Π½Π΅ΠΌΡƒ ΠΈ Π½ΡƒΠΆΠ½Ρ‹Π΅ CSS свойства Π΄ΠΎΠ±Π°Π²ΠΈΠΌ, Π·Π°Π΄Π°ΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ тСкста, Ρ„ΠΎΠ½Π° ΠΈ Ρ€Π°ΠΌΠΊΠΈ:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
 color: #ffffff;
 background-color: #3F2B22;
 border-color: #333;
}

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Π΄ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ помСняСт свой Π²ΠΈΠ΄:

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΠ· мСня, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Π½ΠΈΠΊΡƒΠ΄Ρ‹ΡˆΠ½Ρ‹ΠΉ, Π½ΠΎ Π²Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму смоТСтС ΠΊΡƒΠ΄Π° Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния CSS ΠΏΡ€Π°Π²ΠΈΠ» Π² manual.css, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΠΎ ΠΈ отступы ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΈ Ρ†Π²Π΅Ρ‚Π° Π³Π»ΠΈΡ„-ΠΈΠΊΠΎΠ½ΠΎΠΊ (ΠΎ Π½ΠΈΡ… Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ), Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅. НуТно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡ΡƒΡ‚ΠΊΠ° ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. Как говорится, Ρ„Π»Π°Π³ Π²Π°ΠΌ Π² Ρ€ΡƒΠΊΠΈ, Π° Π±Π°Ρ€Π°Π±Π°Π½ Π½Π° шСю.

ДобавляСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили Bootstrap

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ сам Бутстрап являСтся ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ (Π² смыслС, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ просматриваСтся Π²Π΅Π±-страница), ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ мСсто Π±Ρ‹Ρ‚ΡŒ Π½Π° страницС, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ. Π’.Π΅. ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ измСнСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана. БобствСнно, это Π΄Π΅Π»ΠΎ ΠΏΠΎΠΏΡ€Π°Π²ΠΈΠΌΠΎΠ΅.

НапримСр, Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π½Π°ΡˆΠΈΡ… Ρ€Π°Π½Π΅Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² (Ρ„Π°ΠΉΠ» sait5.html β€” ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ· контСкстного мСню ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкС как…», послС Ρ‡Π΅Π³ΠΎ помСститС Π΅Π³ΠΎ Π² Π²Π°ΡˆΡƒ ΠΏΠ°ΠΏΠΊΡƒ с Бутстрапом) ΠΊΠ°ΠΊ Ρ€Π°Π· наблюдался Π½Π°Π΅Π·Π΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈΠ· сосСдних ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ Ρ‡Π°ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ±Ρ€Π΅Π·Π°Π»Π°ΡΡŒ:

Π’ Bootstrap 3, для придания отзывчивости ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ Π½Π° страницС, Π½ΡƒΠΆΠ½ΠΎ это Π΄Π΅Π»ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ, прописывая Π² Ρ‚Π΅Π³ΠΈ IMG ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ класс β€” img-responsive. Π’ нашСм случаС Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

<img src="img/virtuemart-2-300x180.jpg" alt="">

Ну ΠΈ наш ΠΌΠ°ΠΊΠ΅Ρ‚ страницы Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя ΡƒΠΆΠ΅ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎ, ΠΈΠ±ΠΎ ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ для соотвСтствия ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ располоТСны (Π½Π΅ наСзТая Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°):

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, довольно странно, Ρ‡Ρ‚ΠΎ эта Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π΅ встроСна ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π° для Π΅Π΅ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π΄ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ класс. Но Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π²ΠΈΠ΄Π½Π΅Π΅. Для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS Π·Π°ΠΊΡ€ΠΎΠΌΠ°Ρ… Бутстрапа имССтся Π΅Ρ‰Π΅ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΈΡ… оформлСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… классов:

  1. МоТно ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΌΠΈ. НС ΡΠΊΡ€ΡƒΠ³Π»ΡΡ‚ΡŒ ΡƒΠ³Π»Ρ‹ (ΠΎΠ± этом Ρ‡ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅), Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠΊΡ€ΡƒΠ³Π»ΡΡ‚ΡŒ (ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° получится Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΡ€ΡƒΠ³, Π° ΠΈΠ· ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° β€” ΠΎΠ²Π°Π»). НапримСр, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±Ρ‹Π»ΠΎ Π±Ρ‹ довольно эффСктно ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚ Π°Π²Ρ‚ΠΎΡ€Π° ΡΡ‚Π°Ρ‚ΡŒΠΈ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ класс img-circle. МоТно этот класс Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ прямо Π² ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ с img-responsive (Ссли ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π΄Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния). Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π±Π΅Π·ΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:
    <img src="img/google-analytics-300x180.jpg" alt="">
  2. ΠžΠΏΠΈΡΠ°Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ класс ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅. Π—Π°Ρ‚ΠΎ Π²ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ скруглСниС ΡƒΠ³Π»ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΈΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ для ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ДСлаСтся это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния класса ΠΈΠ· арсСнала Bootstrap 3 ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ img-rounded. Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ получаСтся Π½Π΅ сильно-Ρ‚Π°ΠΊΠΈ ΠΈ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ, Π½ΠΎ Ρ€Π°Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π³Π»Π°Π·:
  3. Ну ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π½Π° страницС, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ умСстным Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ. ОсобСнно эффСктно это Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° изобраТСниях, Ρ„ΠΎΠ½ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… совпадаСт с Ρ„ΠΎΠ½ΠΎΠΌ страницы. Для этой Ρ†Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ класс img-thumbnail.
    <img src="img/virtuemart-2-300x180.jpg" alt="">

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ послСдниС Ρ‚Ρ€ΠΈ класса Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π²Π°ΠΌ самим, Π° Π²ΠΎΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ добавлСния img-responsive) я Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π² ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ порядкС, Ссли Ρƒ вас Π½Π΅Ρ‚ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ вСских ΠΏΡ€ΠΈΡ‡ΠΈΠ½ этого Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ.

На сСгодня всС. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π·Π° Π³Π»ΠΈΡ„-ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈΠ»ΠΈ тСкстовых Π±Π»ΠΎΠΊΠΎΠ² Π² Π²ΠΈΠ΄Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΉ (ΠΏΡ€Π΅Π²ΡŒΡŽΡˆΠ΅ΠΊ), ΠΏΡ€ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ, ΠΏΡ€ΠΎ созданиС ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, Π½Ρƒ ΠΈ Π΅Ρ‰Π΅ ΠΏΡ€ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, насколько Ρ…Π²Π°Ρ‚ΠΈΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ сил.

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ слСдуСт >>> (Π’ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΡƒΡŽ рассылку с анонсами Π½ΠΎΠ²Ρ‹Ρ… статСй)

Π£Π΄Π°Ρ‡ΠΈ Π²Π°ΠΌ! Π”ΠΎ скорых встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ для Π·Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π² css


Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈ тСкстовый Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ мСню

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ МСню с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. На ΠΌΡ‹ΡˆΠΈ, нависшиС Π½Π°Π΄ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ), я Ρ…ΠΎΡ‡Ρƒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста ΠΈ Π·Π½Π°Ρ‡ΠΊΠ°, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого.

Но я ΠΌΠΎΠ³Ρƒ Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ, Π½ΠΎ Π½Π΅ смог ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкстовый Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ.

Π― попытался Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚:! Important; Ρ‚Π°ΠΊΠΆΠ΅, ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

Π’ΠΎΡ‚ ссылка stackblitz.

Π·Π°Π΄Π°Π½ Prashanth GH 17 сСнт. ’18 Π² 12:57

источник ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ WYSIWYG Web Builder Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ нСсколькими способами ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρƒ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ курсора ΠΌΡ‹ΡˆΠΈ. НиТС Π±ΡƒΠ΄Π΅Ρ‚ прСдставлСно нСсколько Ρ‚Π°ΠΊΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² с использованиСм псСвдокласса hover.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ тСкста, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰Π΅Π³ΠΎ свой Ρ†Π²Π΅Ρ‚:

Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° этот тСкст

Π’ HTML исходникС тСкста Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€” ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅Π³ΠΎΠΌ β€” ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ:

#wb_uid2:hover {color:#FF0000;}

ОписаниС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

#wb_uid12 β€” это id тСкста (Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² исходном ΠΊΠΎΠ΄Π΅ страницы).

#FF0000 β€” это Ρ†Π²Π΅Ρ‚ тСкста, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ измСнится ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ WYSIWYG Web Builder 11 / 12 вСрсии.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ для измСнСния Ρ†Π²Π΅Ρ‚Π° тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ, ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для WYSIWYG Web Builder 10 / 11 / 12 вСрсии. Π—Π΄Π΅ΡΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ id тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сами ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ, Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ тСкста, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰Π΅Π³ΠΎ свой Ρ†Π²Π΅Ρ‚:

Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° этот тСкст

Π’ HTML исходникС тСкста Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€” ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅Π³ΠΎΠΌ β€” ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ:

#wb_DemoPrimer2 > span:hover {color:#3A88AF !important;}

ОписаниС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

DemoPrimer2 β€” это id тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅.

#3A88AF β€” это Ρ†Π²Π΅Ρ‚ тСкста, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ измСнится ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ WYSIWYG Web Builder 10 / 11 / 12 вСрсии.

Π’ Π΄Π°Π½Π½ΠΎΠΌ способС Ρ†Π²Π΅Ρ‚ тСкста Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Ρ‘Π½ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° слой с тСкстом. Π—Π΄Π΅ΡΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ id слоя, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ смоТСтС ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ, Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π² контСкстном мСню β€” Π‘ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ID.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ тСкста, ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰Π΅Π³ΠΎ свой Ρ†Π²Π΅Ρ‚ Π² слоС:

Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° этот слой с тСкстом

Π’ HTML исходникС тСкста Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€” ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅Π³ΠΎΠΌ β€” ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ:

#DemoPrimer3:hover span{color:#2BAECA !important;}

ОписаниС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

DemoPrimer3 β€” это id слоя, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅.

#2BAECA β€” это Ρ†Π²Π΅Ρ‚ тСкста, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ измСнится ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π”Π°Π½Π½Ρ‹ΠΉ способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ WYSIWYG Web Builder 11 / 12 вСрсии.

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚! БСгодня поступила Π·Π°Π΄Π°Ρ‡Π° Π·Π°Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора ΠΌΡ‹ΡˆΠΈ срСдствами CSS. Π’ΠΈΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€ΠΈ этом Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡ‚Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ изящным ΠΈ друТСствСнным ΠΊ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ сайта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π° с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΉ: ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ, проходят ΠΌΡ‹ΡˆΡŒΡŽ ΠΏΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π΅, ΠΌΠΎΠ³ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ строкС ΠΎΠ½ фокусируСт свой взгляд

РСшСниС

Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ курсора ΠΌΡ‹ΡˆΠΈ опрСдСляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдокласса :hover, ΠΎΠ½ добавляСтся ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ сСлСктору.

Для измСнСния стиля строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, :hover слСдуСт Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ сСлСктору tr, Π·Π°Π΄Π°Π² ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Ρ‡Π΅Ρ€Π΅Π· свойство background.

НапримСр:

tbody tr:hover { background-color: whitesmoke; }
background-color: whitesmoke;

Если Π²Ρ‹ нашли ΠΎΡˆΠΈΠ±ΠΊΡƒ, поТалуйста, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ тСкста ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Enter.

ПониманиС Ρ‚Π΅Π³Π° HTML 4.0

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅

Для Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ HTML 4.0, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ новая ΠΊΠ½ΠΎΠΏΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ ΡƒΡ€ΠΎΠ΄Π»ΠΈΠ²ΠΎΠ³ΠΎ сСрого Ρ„ΠΎΠ½Π°. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с нСбольшим прикосновСниСм ΠΊ CSS (каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй), Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°:

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Π»Π°Π΄Π½ΠΎ?

БпаситС Π½Π°ΡˆΡƒ ΠΏΠ»Π°Π½Π΅Ρ‚Ρƒ!

  

Под водой

  

Π€ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ, ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° Π² объявлСнии стиля Π½Π° Β«ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉΒ»:

ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½!

  
Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ / высотой ΠΊΠ½ΠΎΠΏΠΊΠΈ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ автоматичСски ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ€Π°Π²Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для размСщСния содСрТимого Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния.Часто Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ этим Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΡˆΠ΅ΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ объявлСниС CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ / высоту ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ объявлСниС стиля:

Π”Π°Π²Π°ΠΉΡ‚Π΅ создадим ΡΠ΅Ρ€ΠΈΡŽ идСально ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ знания:

H я !

 

 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ β€” имитация ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° с использованиСм Ρ‚Π΅Π³Π°
  
  
  
  

Bulma: БСсплатная соврСмСнная CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ Π½Π° основС Flexbox

.

Кнопка β€” Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΡ‹ΠΉ элСмСнт любого Π΄ΠΈΠ·Π°ΠΉΠ½Π°.Он Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ вСсти сСбя ΠΊΠ°ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт вашСй страницы.

HTML

    

Кнопка Класс ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π°:

HTML

   привязка 


  

Π¦Π²Π΅Ρ‚Π° #

Кнопка доступна Π²ΠΎ всСх Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚Π°Ρ… , ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π² ΠΊΠ°Ρ€Ρ‚Π΅ Sass $ colors .

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

Π±Π΅Π»Ρ‹ΠΉ Π‘Π²Π΅Ρ‚ Вьма Π§Π΅Ρ€Π½ΠΈΡ‚ΡŒ ВСкст ΠŸΡ€ΠΈΠ·Ρ€Π°ΠΊ

HTML

  




  

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

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Бвязь

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ УспСх ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ

HTML

  

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ прСдставлСн Π² своСй свСтлой вСрсии .ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ is-light ΠΊ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

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

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Бвязь

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ УспСх ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ

HTML

  

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ #

Кнопка доступна Π² 4 Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…:

  • малСнький
  • Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ
  • срСдний
  • большой

Π₯отя Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ β€” , Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ, , ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ is-normal сущСствуСт Π½Π° Ρ‚ΠΎΡ‚ случай, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π΄ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

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

МалСнький Π”Π΅Ρ„ΠΎΠ»Ρ‚ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π‘Π΅Ρ€Π΅Π΄ΠΈΠ½Π° Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ

HTML

  



  

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ² ΠΈΡ… Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт buttons ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² ΠΎΠ΄ΠΈΠ½ ΠΈΠ· 3 ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ²:

  • ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ малСнькиС
  • ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ срСдниС
  • ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ большиС

HTML

  

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ подмноТСства ΠΊΠ½ΠΎΠΏΠΎΠΊ , просто ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² ΠΊ Π½ΠΈΠΌ класс-ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€.
НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Ρ‹Π»ΠΈ малСнькими , Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΎΠ΄Π½Π° ΠΈΠ· Π½ΠΈΡ… всС Π΅Ρ‰Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° , просто Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

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

МалСнький МалСнький МалСнький ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ МалСнький

HTML

  

ДисплСи #

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

МалСнький ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π‘Π΅Ρ€Π΅Π΄ΠΈΠ½Π° Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ

HTML

  


  

Π‘Ρ‚ΠΈΠ»ΠΈ #

ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π½Π½Ρ‹ΠΉ

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

ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… ΠžΠ±Ρ€ΠΈΡΠΎΠ²Π°Π» Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ…

HTML

  




  
Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (Ρ†Π²Π΅Ρ‚ тСкста становится Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚)

ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ

  



  
Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ (ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ становится Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹)

Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π˜Π½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€

  



  
ΠŸΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ краями

Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ

  




  

состояния #

Bulma стилизуСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ состояния своих ΠΊΠ½ΠΎΠΏΠΎΠΊ.КаТдоС состояниС доступно ΠΊΠ°ΠΊ псСвдокласс ΠΈ класс CSS:

  • : зависаСт ΠΈ зависаСт
  • : фокус ΠΈ сфокусирован
  • : Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ

Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ состояния, Π½Π΅ вызывая Π΅Π³ΠΎ.

ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ

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

ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ

HTML

  





  
Π₯ΠΎΠ²Π΅Ρ€

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

ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅ ΠŸΠ°Ρ€Π΅Π½ΠΈΠ΅

HTML

  





  
Ѐокус

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

Ѐокус Ѐокус Ѐокус Ѐокус Ѐокус Ѐокус Ѐокус

HTML

  





  
Активный

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

Активный Активный Активный Активный Активный Активный Активный

HTML

  





  
ΠŸΠΎΠ³Ρ€ΡƒΠ·ΠΊΠ°

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² Π΅Π΅ , Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‰ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ , Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ is-loading .Π’Π°ΠΌ Π΄Π°ΠΆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ тСкст, Ρ‡Ρ‚ΠΎ позволяСт ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ исходный Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠ΅ΠΆΠ΄Ρƒ состояниями ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ состояниями Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ счСтчик Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ с использованиСм псСвдоэлСмСнта :: after , ΠΎΠ½ Π½Π΅ поддСрТиваСтся элСмСнтом . ВмСсто этого рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования

БтатичСский

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π΅ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° is-static . Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для выравнивания тСкстовой ΠΌΠ΅Ρ‚ΠΊΠΈ с Π²Π²ΠΎΠ΄ΠΎΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ использовании надстроСк Ρ„ΠΎΡ€ΠΌ.

БтатичСский
   БтатичСский   
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ

Bulma ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ использованиС логичСского HTML-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° disabled , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ.

НСполноцСнный НСполноцСнный НСполноцСнный НСполноцСнный НСполноцСнный НСполноцСнный НСполноцСнный

Класс is-disabled CSS устарСл Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ HTML-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° disabled .Π£Π·Π½Π°Ρ‚ΡŒ большС

  





  
с иконками Font Awesome

Кнопки Bulma ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π·Π½Π°Ρ‡ΠΎΠΊ Font Awesome .Для достиТСния Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΡ… Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² ΠΎΠ±Π΅Ρ€Π½ΠΈΡ‚Π΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ тСкст Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт .

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

GitHub @jgthms Π‘ΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Π£Π΄Π°Π»ΠΈΡ‚ΡŒ

GitHub GitHub GitHub GitHub

HTML

  

<ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°>

<ΠΊΠ½ΠΎΠΏΠΊΠ°> GitHub <ΠΊΠ½ΠΎΠΏΠΊΠ°> @jgthms <ΠΊΠ½ΠΎΠΏΠΊΠ°> Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ <ΠΊΠ½ΠΎΠΏΠΊΠ°> Π£Π΄Π°Π»ΠΈΡ‚ΡŒ

<ΠΊΠ½ΠΎΠΏΠΊΠ°> GitHub <ΠΊΠ½ΠΎΠΏΠΊΠ°> GitHub <ΠΊΠ½ΠΎΠΏΠΊΠ°> GitHub <ΠΊΠ½ΠΎΠΏΠΊΠ°> GitHub

Если ΠΊΠ½ΠΎΠΏΠΊΠ° содСрТит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ, Bulma Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΉ , нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡ΠΊΠ°.

  

<ΠΊΠ½ΠΎΠΏΠΊΠ°>

<ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°>

<ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°>

<ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°> <ΠΊΠ½ΠΎΠΏΠΊΠ°>

Π“Ρ€ΡƒΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ #

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ вмСстС Π² ΠΎΠ΄Π½ΠΎΠΉ строкС , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ is-grouped Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ поля :

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

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния

ΠžΡ‚ΠΌΠ΅Π½Π°

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ сообщСниС

HTML

  

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния

<ΠΊΠ½ΠΎΠΏΠΊΠ°> ΠžΡ‚ΠΌΠ΅Π½Π°

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π£Π΄Π°Π»ΠΈΡ‚ΡŒ сообщСниС

ДополнСния ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ #

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² качСствС Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ has-addons Π² ΠΏΠΎΠ»Π΅ ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ :

HTML

  

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π’Π»Π΅Π²ΠΎ

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π¦Π΅Π½Ρ‚Ρ€

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π’ΠΏΡ€Π°Π²ΠΎ

Π“Ρ€ΡƒΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ с надстройками #

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ дополнСния:

HTML

  

<ΠΊΠ½ΠΎΠΏΠΊΠ°> ΠŸΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ

<ΠΊΠ½ΠΎΠΏΠΊΠ°> ΠšΡƒΡ€ΡΠΈΠ²

<ΠΊΠ½ΠΎΠΏΠΊΠ°> ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π’Π»Π΅Π²ΠΎ

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π¦Π΅Π½Ρ‚Ρ€

<ΠΊΠ½ΠΎΠΏΠΊΠ°> Π’ΠΏΡ€Π°Π²ΠΎ

Бписок кнопок #

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ .

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠžΡ‚ΠΌΠ΅Π½Π°

  

Если список ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ , ΠΎΠ½ автоматичСски пСрСносится Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… строк , сохраняя ΠΏΡ€ΠΈ этом всС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌ расстоянии .

Один Π”Π²Π° Π’Ρ€ΠΈ Π§Π΅Ρ‚Ρ‹Ρ€Π΅ ΠŸΡΡ‚ΡŒ Π¨Π΅ΡΡ‚ΡŒ БСмь 8 9 Π”Π΅ΡΡΡ‚ΡŒ 11 Π”Π²Π΅Π½Π°Π΄Ρ†Π°Ρ‚ΡŒ Π’Ρ€ΠΈΠ½Π°Π΄Ρ†Π°Ρ‚ΡŒ 14 ΠŸΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚ΡŒ Π¨Π΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚ΡŒ Π‘Π΅ΠΌΠ½Π°Π΄Ρ†Π°Ρ‚ΡŒ 18 19 20

  

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ вмСстС с ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ has-addons .

  

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ .

Π΄Π° ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ НСт

Π΄Π° ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ НСт

  

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой класс ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΠΈΡ….НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ is-selected , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ выбранная ΠΊΠ½ΠΎΠΏΠΊΠ° находится Π½Π° Π²Ρ‹ΡˆΠ΅ своих Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр.

Π΄Π° ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ НСт

Π΄Π° ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ НСт

Π΄Π° ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ НСт

  

Π₯отя этот список стиля ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнут Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ поля сгруппировано , Π»ΠΈΠ±ΠΎ с Π½ΠΎΠ²Ρ‹ΠΌ классом ΠΊΠ½ΠΎΠΏΠΎΠΊ , Π΅ΡΡ‚ΡŒ нСсколько ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΉ:

  • ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ
  • Кнопки ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ элСмСнтов
  • ПолС сгруппировано ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ любого Ρ‚ΠΈΠΏΠ° ΠΈΠ· управлСния Π²Ρ…ΠΎΠ΄ΠΎΠ²
  • ПолС сгруппировано ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ всС элСмСнты управлСния Π² ΠΎΠ΄Π½ΠΎΠΉ строкС
  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ поля сгруппировано , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· элСмСнтов управлСния

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ список ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ , рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ .Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ большС контроля Π½Π°Π΄ стилСм ΠΈ элСмСнтами, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΡƒ Ρ„ΠΎΡ€ΠΌ.

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ #

Имя

Π’ΠΈΠΏ

Π¦Π΅Π½ΠΈΡ‚ΡŒ

РасчСтноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

ВычисляСмый Ρ‚ΠΈΠΏ

Ρ€Π°Π·ΠΌΠ΅Ρ€

  расчСт (0.5em - # {$ button-border-width})  
  $ ΠΎΠ±ΠΈΠ²ΠΊΠ° ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ  

Ρ€Π°Π·ΠΌΠ΅Ρ€

  $ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ-навСдСния-Π³Ρ€Π°Π½ΠΈΡ†Ρ‹  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ ΠΊΠ½ΠΎΠΏΠΊΠ°-фокус-Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ ΠΊΠ½ΠΎΠΏΠΊΠ°-фокус-Ρ€Π°Π·ΠΌΠ΅Ρ€-Ρ‚Π΅Π½ΡŒ  

Ρ€Π°Π·ΠΌΠ΅Ρ€

  $ ΠΊΠ½ΠΎΠΏΠΊΠ°-фокус-ΠΏΠΎΠ»Π΅-Ρ‚Π΅Π½ΡŒ-Ρ†Π²Π΅Ρ‚  

соСдинСниС

  $ button-active-border-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ button-text-hover-background-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ ΠΊΠ½ΠΎΠΏΠΊΠ°-ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ-Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹  

строка

  $ ΠΊΠ½ΠΎΠΏΠΊΠ°-ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ-Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅-Ρ†Π²Π΅Ρ‚  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ-ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ  

строка

  $ button-disabled-background-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ button-disabled-border-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ button-static-background-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

  $ button-static-border-color  

пСрСмСнная

Ρ†Π²Π΅Ρ‚

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π² зависимости ΠΎΡ‚ использования программиста.Кнопка HTML отправляСт HTML-страницу.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ программистом. Кнопка HTML отправляСт HTML-страницу.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π² зависимости ΠΎΡ‚ использования программиста. Кнопка HTML отправляСт HTML-страницу.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ HTML ΠΊΠ½ΠΎΠΏΠΊΠ°. Π‘Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ создаСм HTML-страницу. Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ HTML с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π°, высота ΠΈ Ρ†Π²Π΅Ρ‚. Π­Ρ‚Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высоту ΠΈ Π΄Π°ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΠΎ ТСланию ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π’Π΅Π³

Π’Ρ‹Π²ΠΎΠ΄: Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π²ΠΎΠ΄ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ†Π²Π΅Ρ‚.

HTML-ΠΊΠ½ΠΎΠΏΠΊΠ°

ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Π° ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. На ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ дСйствия, ΠΊΠ°ΠΊ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ° Ρ„ΠΎΡ€ΠΌΡ‹, Π²Ρ‹Π·ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ JavaScript ΠΈ Ρ‚. Π΄.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ объяснили Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойства Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй. ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ красивый ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ большС руководств ΠΏΠΎ html .

БвязанныС руководства ΠΏΠΎ HTML:

HTML-ΠΌΠ°ΠΊΠ΅Ρ‚
ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-страницы ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ страниц Π² Π³Π°Π·Π΅Ρ‚Π΅.HTML столбцы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для прСдставлСния содСрТимого Π²Π΅Π±-страницы. Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹ HTML созданы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ† для оформлСния ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΈ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² HTML
Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π²Π΅Π±-страниц ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° body. bgcolor ΠΈ помСстив Π² Π½Π΅Π³ΠΎ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π½Π° HTML-страницС.

Каскадная Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй (CSS)
Каскадная Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй (CSS), извСстная ΠΊΠ°ΠΊ язык Ρ‚Π°Π±Π»ΠΈΡ† стилСй, опрСдСляСт прСдставлСниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, написанного Π½Π° языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.

ОбъявлСния

Богласно исслСдованиям, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ являСтся Π»ΡƒΡ‡ΡˆΠΈΠΌ?

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ согласится с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ»ΡŽΡ‡ΠΎΠΌ ΠΊ успСху являСтся конвСрсия: большС людСй, Π½Π°ΠΆΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ… Π½Π° ваши ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ» ΠΈΠ»ΠΈ Β«ΠšΡƒΠΏΠΈΡ‚ΡŒ сСйчас» , ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ большС ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ΄Π°ΠΆ. Но ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ, это ΠΎΡ‡Π΅Π½ΡŒ обсуТдаСмая Ρ‚Π΅ΠΌΠ°. ΠœΠΎΠ³ΡƒΡ‚ Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ коэффициСнт конвСрсии? Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим, Ρ‡Ρ‚ΠΎ, ΠΏΠΎ мнСнию исслСдоватСлСй, являСтся Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Π§Ρ‚ΠΎ говорят экспСрты ΠΏΠΎ конвСрсии?

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΠ²Ρ‹Ρ… совСтов ΠΏΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ конвСрсии, особСнно ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Ρ†Π²Π΅Ρ‚Π΅.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, всС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΡΡ€ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ обоснованиС, понятный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π»ΠΈΠ΄-ΠΌΠ°Π³Π½ΠΈΡ‚ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ конвСрсиям.

Но Ρ†Π²Π΅Ρ‚? Π­Ρ‚ΠΎ нСпростой вопрос.

Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΡŽΡ‰ΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ нашли «сСкрСт» эффСктивной ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ этих людСй, ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΡ… ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… Π»Π°Π³Π΅Ρ€Π΅ΠΉ:

  1. Π“Π΅Π½Π΅Ρ€Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€ коэффициСнта конвСрсии этого Ρ‚ΠΈΠΏΠ° Π±ΡƒΠ΄Π΅Ρ‚ строго ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ±Ρ‰ΠΈΡ… ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ. Однако ΠΎΠ½ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ³Π»ΡƒΠ±Π»ΡΡ‚ΡŒΡΡ Π² ΠΏΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡŽ своих ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ.
  2. Π“ΠΎΠ»ΡƒΠ±ΠΈΠ½Ρ‹Π΅ ΠΎΡ…ΠΎΡ‚Π½ΠΈΠΊΠΈ. Π­Ρ‚ΠΎΡ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ‚ΠΈΠΏ придСрТиваСтся ΠΎΡ‡Π΅Π½ΡŒ спСцифичСских стратСгий. Они скаТут Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ «сСкрСты», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π°Ρ‚ Π²Π°ΡˆΡƒ ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ. Они скаТут Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ β€” Π·Π°Π»ΠΎΠ³ вашСго успСха.
  3. БСсконСчныС тСстСры. Π’Ρ€Π΅Ρ‚ΠΈΠΉ Ρ‚ΠΈΠΏ Π½Π΅ придСрТиваСтся ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ стратСгии. Π­Ρ‚ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹ достаточно экспСримСнтировали, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стратСгии Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ для всСх. ВмСсто этого ΠΎΠ½ΠΈ скаТут Π²Π°ΠΌ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π°ΡƒΠ³Π°Π΄, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Когда Π²Ρ‹ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ с вопросом, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ лагСря Π±ΡƒΠ΄Π΅Ρ‚ свой отвСт…

  • Π“Π΅Π½Π΅Ρ€Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹ скаТут Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ истины ΠΎ Ρ†Π²Π΅Ρ‚Π΅.НСкоторыС Ρ†Π²Π΅Ρ‚Π° Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… отраслСй, Π° Π΅ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.
  • Π“ΠΎΠ»ΡƒΠ±ΠΈΠ½Ρ‹Π΅ ΠΎΡ…ΠΎΡ‚Π½ΠΈΠΊΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСобразуСтся Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ.
  • БСсконСчныС тСстСры скаТут, Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π½ΠΎ нСпостоянным ΠΈΠ»ΠΈ прСдсказуСмым ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Ясно, Ρ‡Ρ‚ΠΎ Π½Π΅ всС ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π°Π²Ρ‹.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ†Π²Π΅Ρ‚ Π½Π΅ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€ΠΎΠ»ΠΈ Π² конвСрсиях, ΠΊΠ°ΠΊ ΠΌΡ‹ Π΄ΡƒΠΌΠ°Π»ΠΈ. Или, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, здСсь происходит Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ½ΠΊΠΎΠ΅?

Π˜ΠΌΠ΅Π΅Ρ‚ Π»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ CTA?

ΠŸΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡ‡Π΅ΡΠΊΠΈ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… сомнСний Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ сильноС влияниС Π½Π° людСй.

НапримСр, Ρ†Π²Π΅Ρ‚ ΠΊΠΎΠΌΠ½Π°Ρ‚Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° вашС настроСниС. Π‘Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ красный Ρ†Π²Π΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ кровяноС Π΄Π°Π²Π»Π΅Π½ΠΈΠ΅, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ дыхания ΠΈ ΡƒΡ‡Π°Ρ‰Π°Π΅Ρ‚ сСрдцСбиСниС. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, синий ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΉ эффСкт: ΠΎΠ½ сниТаСт Π°Ρ€Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ Π΄Π°Π²Π»Π΅Π½ΠΈΠ΅, замСдляСт Π΄Ρ‹Ρ…Π°Π½ΠΈΠ΅ ΠΈ сниТаСт частоту сСрдСчных сокращСний.

Π’ ΠΎΠ΄Π½ΠΎΠΌ исслСдовании, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΡƒΡ‡Π΅Π½Ρ‹ΠΌΠΈ ΠΈΠ· УнивСрситСта Британской ΠšΠΎΠ»ΡƒΠΌΠ±ΠΈΠΈ, Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ синий Ρ†Π²Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ творчСскиС способности, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ красный ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ ΠΏΠ°ΠΌΡΡ‚ΡŒ ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ дСталям.

На основании этих Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² каТСтся, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«ΠΏΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡŽ Ρ†Π²Π΅Ρ‚Π°Β» для создания Π±ΠΎΠ»Π΅Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°.

И ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

На самом Π΄Π΅Π»Π΅, Π²Ρ‹, вСроятно, Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅ хотя Π±Ρ‹ ΠΎΠ΄Π½Ρƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ:

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Π°Ρ Π²Ρ‹ΡˆΠ΅ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΎΡ‚ The Logo Company пытаСтся ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ взаимосвязь ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ психологичСским влияниСм, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ†Π²Π΅Ρ‚ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ воспринимаСм Π±Ρ€Π΅Π½Π΄.

РСстораны, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ красный Ρ†Π²Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ чувство Π³ΠΎΠ»ΠΎΠ΄Π°.

Однако ΠΌΠ½ΠΎΠ³ΠΈΠ΅ психологичСскиС ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΎ влиянии Ρ†Π²Π΅Ρ‚Π° Π΄Π°ΡŽΡ‚ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹β€¦

НапримСр, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ красный Ρ†Π²Π΅Ρ‚ стимулируСт Π°ΠΏΠΏΠ΅Ρ‚ΠΈΡ‚? ЀактичСскиС исслСдования ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ красный Ρ†Π²Π΅Ρ‚ подавляСт Π°ΠΏΠΏΠ΅Ρ‚ΠΈΡ‚ Ρƒ людСй ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ ΠΏΠΎΠ΄Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π»ΠΎΠΌ, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ Π·Π½Π°ΠΊΠ° «стоп».Однако красный Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ стимулируСт ΠΊΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ€Ρ‹Π± нильской Ρ‚ΠΈΠ»Π°ΠΏΠΈΠΈ.

Π’ исслСдовании Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² олимпийским Π±ΠΎΡ€Ρ†Π°ΠΌ случайным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π΄Π°Π²Π°Π»ΠΈ синюю ΠΈΠ»ΠΈ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ. Π‘ΠΎΡ€Ρ†Ρ‹ Π² красной Ρ„ΠΎΡ€ΠΌΠ΅ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π²Π·ΠΎΡˆΠ»ΠΈ своих сопСрников Π² синСй Ρ„ΠΎΡ€ΠΌΠ΅, Ρ‡Ρ‚ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ красный Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вас Π±ΠΎΠ»Π΅Π΅ агрСссивным ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ конкурСнтоспособным.

Но Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ исслСдовании, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π² акадСмичСской срСдС, Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ красного Ρ†Π²Π΅Ρ‚Π° фактичСски сниТаСт ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ .

ВсС эти Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ красный Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вас Β«ΠΏΠΎΠ±Π΅Π΄ΠΈΡ‚Π΅Π»Π΅ΠΌΒ» ΠΈΠ»ΠΈ Β«ΠΏΡ€ΠΎΠΈΠ³Ρ€Π°Π²ΡˆΠΈΠΌΒ» (ΠΈΠ»ΠΈ Β«Π³ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΌΒ» ΠΈΠ»ΠΈ Β«Π½Π΅ Π³ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΌΒ»), Π² зависимости ΠΎΡ‚ контСкста (ΠΈ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π²Ρ‹ ΠΈΠ»ΠΈ Ρ€Ρ‹Π±Ρ‹).

Π­Ρ‚ΠΎΡ‚ контСкст становится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ слоТным, Ссли Π²Ρ‹ посмотритС Π½Π° ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Π½Ρ‹Π΅ значСния, связанныС с цвСтом…

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΈ Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚Π°.

Π’ Π·Π°ΠΏΠ°Π΄Π½ΠΎΠΉ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Π΅ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ символизируСт ΠΏΠΎΡ…ΠΎΡ€ΠΎΠ½Ρ‹, ΡΠΌΠ΅Ρ€Ρ‚ΡŒ ΠΈ Ρ‚Ρ€Π°ΡƒΡ€. Π‘Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ассоциируСтся с нСвСстами, свадьбами ΠΈ чистотой.

Но Π² ΠšΠΈΡ‚Π°Π΅ всС Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚: Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ β€” символ смСрти ΠΈ Ρ‚Ρ€Π°ΡƒΡ€Π°. Π§Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ для ΠΌΠ°Π»ΡŒΡ‡ΠΈΠΊΠΎΠ².

Π”Π°ΠΆΠ΅ Ссли Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π² ΡƒΡ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡΡ‚ΠΎΠ»ΡŒ ΠΆΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΠ», ΠΎΠ½ΠΎ станСт Π±ΠΎΠ»Π΅Π΅ слоТным…

Π’ исслСдовании Π”ΠΆΠΎ Π₯эллока Π±Ρ‹Π»ΠΎ установлСно, Ρ‡Ρ‚ΠΎ ΠΌΡƒΠΆΡ‡ΠΈΠ½Ρ‹ ΠΈ ΠΆΠ΅Π½Ρ‰ΠΈΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ всС это? Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ психологичСскоС воздСйствиС Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ людСй ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚ΡŒ большС Π²Π°ΡˆΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ?

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ контСкста

ВСорСтичСски ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β«ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉΒ» Ρ†Π²Π΅Ρ‚: Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Π½ΠΎ ΠΈ дСмографичСски соотвСтствуСт вашСй личности покупатСля ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ соотвСтствуСт Π²Π°ΡˆΠ΅ΠΌΡƒ Π±Ρ€Π΅Π½Π΄Ρƒ.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ способа это Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ.

Допустим, Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ с синСго Π½Π° красный ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ рост конвСрсий. ΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π»ΠΈ это, Ρ‡Ρ‚ΠΎ красный прСобразуСтся Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ синий?

НС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Π’ΠΈΠ΄ΠΈΡ‚Π΅ Π»ΠΈ, здСсь Π΄Π΅Π»ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ†Π²Π΅Ρ‚Π΅ самой ΠΊΠ½ΠΎΠΏΠΊΠΈ.

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ваш Π±Ρ€Π΅Π½Π΄ ΠΈ Π²Π°ΡˆΡƒ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ, Π½ΠΎ ΠΈ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ всС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚ прСобразуСтся Π»ΡƒΡ‡ΡˆΠ΅ всСго.

Π‘ΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Π’ Π»ΡƒΡ‡ΡˆΠ΅ΠΌ случаС Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ сначала ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ ваш ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»ΡŒ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Ρ†Π²Π΅Ρ‚, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Π΅Π³ΠΎ основС ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡŽ прСобразования Π½Π° основС Ρ†Π²Π΅Ρ‚Π°. Π‘Ρ‹Π»ΠΎ Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ, Ссли Π½Π΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ. Π’Ρ‹ Π±Ρ‹ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ мСньшС усилий ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹, Ссли Π±Ρ‹ просто ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ, ΠΏΠΎΠΊΠ° Π½Π΅ нашли ΠΎΠ΄ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСвосходит Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

Но это Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²Π°ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΉ способ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π½Π΅ бросая Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² стСну ΠΈ Π½Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Π΅Ρ‚.

Π§Ρ‚ΠΎ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ΠΎ Ρ†Π²Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ

Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π° своСм Π²Π΅Π±-сайтС, Π½Π΅ Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ β€” Π²Ρ‹ Π½Π΅ ΠΎΠ΄ΠΈΠ½ΠΎΠΊΠΈ. ΠœΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ дСсятилСтиями ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ Π²Π·Π»ΠΎΠΌΠ°Ρ‚ΡŒ Β«Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄Β».

Π˜Ρ‚Π°ΠΊ, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Π΅Π³ΠΎ ΠΌΡ‹ Π½Π΅ Π·Π½Π°Π΅ΠΌ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ сосрСдоточимся Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ знаСм…

Π’Π°Ρˆ CTA-Ρ†Π²Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡ‚Π°Ρ‚ΡŒ популярным

ΠœΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠ΅ΠΌΡƒ количСству конвСрсий.Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, любоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ вашСго ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ количСство конвСрсий.

Если, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ вашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ°Π»ΠΎ контрастируСт с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°, Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»ΠΎΡ…ΠΎΠΉ.

Но ΡƒΠ²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ контраст ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°, ΠΈ Π±ΡƒΠΌ! Π’Π°ΡˆΠΈ конвСрсии вырастут.

НС трСбуСтся ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ контСкста ΠΈΠ»ΠΈ психологичСских оснований.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ CTA с высокой ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ:


(Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно Dribble.Π”Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Π°ΠΊΡ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, β€” это общая цвСтовая схСма вашСй страницы. Если Π½Π° вашСй страницС Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚, ΠΈ этот Ρ†Π²Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для вашСго ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒΡΡ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ярким, снова Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ контрастный Ρ†Π²Π΅Ρ‚.

Π’ ΠΎΠ΄Π½ΠΎΠΌ тСстС HubSpot ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ красныС ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π·Π΅Π»Π΅Π½Ρ‹Π΅. Π’ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ красный Ρ†Π²Π΅Ρ‚ конвСртировался Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ Π±Ρ‹Π» Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π½Π° страницС. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, красный создаСт больший контраст:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ : Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π²Π°ΡˆΠ΅ΠΌΡƒ Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΌΡƒ Ρ†Π²Π΅Ρ‚Ρƒ Π½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΌ ΠΊΡ€ΡƒΠ³Π΅.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ высококонтрастный Ρ†Π²Π΅Ρ‚ β€” это Ρ‚Ρ€ΠΈΠ°Π΄Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ : Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ составляСт Ρ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π»ΠΈΠ½Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π° ΠΎΡ‚ вашСго Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ†Π²Π΅Ρ‚Π°.

Π’Π°ΡˆΠΈ Ρ†Π²Π΅Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅

Из исслСдований ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ люди ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ Ρ†Π²Π΅Ρ‚Π° Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько Ρ…ΠΎΡ€ΠΎΡˆΠΎ эти Ρ†Π²Π΅Ρ‚Π° Β«ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚Β» Π²Π°ΡˆΠ΅ΠΌΡƒ Π±Ρ€Π΅Π½Π΄Ρƒ.

НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π»ΠΈ ваш Π±Ρ€Π΅Π½Π΄ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ вашСго Π±Ρ€Π΅Π½Π΄Π° ΠΈΠ»ΠΈ Π½Π΅Ρ‚, ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π»ΠΈ ваши Ρ†Π²Π΅Ρ‚Π° воспринимаСмой ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ вашСго Π±Ρ€Π΅Π½Π΄Π° ΠΈΠ»ΠΈ Π²Ρ€Π΅Π΄ΠΈΡ‚ Π»ΠΈ это, Π½Π° самом Π΄Π΅Π»Π΅ влияСт Π½Π° Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎ ΠΏΠΎΠΊΡƒΠΏΠΊΠ΅.

НапримСр, допустим, ваш Π±Ρ€Π΅Π½Π΄ ТСсткий, суровый ΠΈ муТСствСнный… ΠΊΠ°ΠΊ Harley Davidson. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ссли Π±Ρ‹ ΠΎΠ½ΠΈ использовали Ρ€ΠΎΠ·ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ вмСсто большой ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π­Ρ‚ΠΎ Π½Π΅ совсСм сработаСт, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ρ‚Π°ΠΊΠΎΠ², Ρ‡Ρ‚ΠΎ это зависит ΠΎΡ‚ вашСй Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ. ?

Π’Π°ΡˆΠΈ Ρ†Π²Π΅Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π²Π΅Ρ‰ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Π·Π½Π°ΡŽΡ‚ ΠΎ Ρ†Π²Π΅Ρ‚Π°Ρ…, β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ наши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΡΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ с Π½ΠΈΠΌΠΈ.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ Ρ‚Π΅ исслСдования, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ Ρ€Π°Π½Π΅Π΅? Как красный Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½ΠΎΠ΅ влияниС Π² зависимости ΠΎΡ‚ контСкста? ЛогичСская ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ· этого контСкста создаСтся ассоциация .

НапримСр, синий β€” Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ†Π²Π΅Ρ‚ для гипСрссылок. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° людСй синий Ρ†Π²Π΅Ρ‚ ассоциируСтся с гипСрссылками. Они Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Ссли тСкст Π½Π° страницС синий, Π²Ρ‹, вСроятно, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΌΡƒ.

Π’ΠΎ ΠΆΠ΅ самоС ΠΈ с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ синий Ρ†Π²Π΅Ρ‚, Π½ΠΎ ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ любой Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠ΅, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ связан с дСйствиСм. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это Π² своих интСрСсах, постоянно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот Ρ†Π²Π΅Ρ‚ для всСх ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° вашСм сайтС.

НС Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ для элСмСнтов, Π½Π΅ связанных с дСйствиСм, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ.

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

OptinMonster постоянно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ для всСх своих основных ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.МСнСС Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ» Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅) ΠΈΠΌΠ΅ΡŽΡ‚ низкоконтрастный синий Ρ†Π²Π΅Ρ‚. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ясно, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ: Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ OptinMonster сСйчас».

Π‘ΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ создаСт Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π΅Π±-сайта, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ коэффициСнта конвСрсии.

Π˜Ρ‚ΠΎΠ³ ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ для убСТдСния Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ. Блишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΠ²Ρ‹Ρ… ΡΠ²ΠΈΠ΄Π΅Ρ‚Π΅Π»ΡŒΡΡ‚Π², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Π²Ρ‹Π²ΠΎΠ΄Ρƒ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π½Π°ΠΉΡ‚ΠΈ Β«ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉΒ» Ρ†Π²Π΅Ρ‚, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΡΡ‚ΡŒ вашСго ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот простой ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ практичСски Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ конвСрсии.

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ способ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ коэффициСнт конвСрсии, Π²Π°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅ практичСскоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ OptinMonster. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Π΄Π°Ρ‚ΡŒ Π² Ρ‚Π΅ΠΌΠ½ΠΎΡ‚Π΅, OptinMonster ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ конвСрсии с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ ΠΈ простого сплит-тСстирования A / B.НаТмитС здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ OptinMonster ΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ количСство конвСрсий Π½Π° вашСм сайтС.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π²Π°ΠΌ большС всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚? Π’Ρ‹ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° Π½Π° своСм сайтС? Π”Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ ΠΎΠ± этом Π² коммСнтариях!

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ ΠœΡΡ€ΠΈ ЀСрнандСс

ΠœΡΡ€ΠΈ ЀСрнандСс β€” ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠ³Π³Π΅Ρ€. Когда Π΅Π΅ Π½Π΅Ρ‚ Π·Π° столом, ΠœΡΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ исслСдуСт солнСчный Π‘Π°Π½-Π”ΠΈΠ΅Π³ΠΎ, ΡˆΡ‚Π°Ρ‚ ΠšΠ°Π»ΠΈΡ„ΠΎΡ€Π½ΠΈΡ, со своим Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠΌ, ΠΌΡƒΠΆΠ΅ΠΌ ΠΈ трСмя Π΄Π΅Ρ‚ΡŒΠΌΠΈ Π½Π° буксирС.

Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

ΠžΠ‘ΠΠžΠ’Π›Π•ΠΠ˜Π•: ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ видСокурс Form Designer для создания фантастичСских стилСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ!


Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΈ синий β€” самыС Ρ€Π°ΡΡΠ»Π°Π±Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°? Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ самыми популярными Π²Π΅Π±-сайтами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ ΠΏΡ€ΠΈ просмотрС этих Π²Π΅Π±-сайтов.Кнопки ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π² Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΠ°Ρ… Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ здСсь люди дСлятся своСй самой ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого руководства Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши посСтитСли чувствовали сСбя ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ своСй ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π»ΠΈ коэффициСнт конвСрсии.

1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ конструктора Ρ„ΠΎΡ€ΠΌ

2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β« CSS Β» ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ CSS ΠΈΠ»ΠΈ свои собствСнныС ΠΊΠΎΠ΄Ρ‹ CSS.

.ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ {

Ρ„ΠΎΠ½: # 0066A2;

Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;

Π±ΠΎΡ€Π΄ΡŽΡ€: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;

Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ: # 0066A2;

высота: 50 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;

ΡˆΡ€ΠΈΡ„Ρ‚: ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ, 15 пиксСлСй, Π±Π΅Π· засСчСк;

Ρ‚Π΅Π½ΡŒ тСкста: Π½Π΅Ρ‚;

}

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΌ

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π°Ρ информация ΠΎ ΠΊΠΎΠ΄Π΅ CSS для ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ

.form-submit-button β€” Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π² вашСй Ρ„ΠΎΡ€ΠΌΠ΅.

Ρ„ΠΎΠ½ β€” УстанавливаСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для тСкста.

Ρ†Π²Π΅Ρ‚ β€” ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ†Π²Π΅Ρ‚ вашСго тСкста.

border-style β€” УстанавливаСт ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ† ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

border-color β€” УстанавливаСт Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ† ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

высота β€” УстанавливаСт высоту вашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ указываСтся Π² пиксСлях.

ΡˆΠΈΡ€ΠΈΠ½Π° β€” УстанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ вашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ указываСтся Π² пиксСлях.

ΡˆΡ€ΠΈΡ„Ρ‚ β€” УстанавливаСт свойства ΡˆΡ€ΠΈΡ„Ρ‚Π°.

ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•. НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ с запятой (;) послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства.

Кнопка ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ CSS3 ΠΈ эффСкт навСдСния

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ дСйствия ΠΏΠΎ измСнСнию ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅. ЕдинствСнноС, Ρ‡Ρ‚ΠΎ мСняСтся, β€” это ΠΊΠΎΠ΄.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ CSS3 для ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ:

.form-submit-button {

background: # B9DFFF;

Ρ†Π²Π΅Ρ‚: #fff;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

Ρ‚Π΅Π½ΡŒ тСкста: Π½Π΅Ρ‚;

}

.ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° {

Ρ„ΠΎΠ½: # 016ABC;

Ρ†Π²Π΅Ρ‚: #fff;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px #eee;

border-radius: 20px;

box-shadow: 5px 5px 5px #eee;

Ρ‚Π΅Π½ΡŒ тСкста: Π½Π΅Ρ‚;

}

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит.

ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ указатСля ΠΌΡ‹ΡˆΠΈ:

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π°Ρ информация ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ΄Π΅ CSS3 для вашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ

.form-submit-button: hover β€” это класс, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ находится Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ. ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅, ΠΊΡ€ΠΎΠΌΠ΅ Ρ„ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ.

border-radius β€” закругляСт ΡƒΠ³ΠΎΠ» ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

box-shadow β€” УстанавливаСт Ρ‚Π΅Π½ΡŒ для ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

text-shadow (Π½Π΅ примСняСтся ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ) β€” УстанавливаСт Ρ‚Π΅Π½ΡŒ для тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ вашСй ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ.

Как Ρƒ вас Π΄Π΅Π»Π°? ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими мыслями ΠΈΠ»ΠΈ прСдлоТСниями Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² Π½ΠΈΠΆΠ΅.

Наша слуТба ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ круглосуточно ΠΈ Π±Π΅Π· Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Ρ…, Π° срСднСС врСмя ΠΎΡ‚Π²Π΅Ρ‚Π° составляСт ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΎ Π΄Π²ΡƒΡ… часов.

Bootstrap Buttons β€” ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ руководство

Buttons

АдаптивныС ΠΊΠ½ΠΎΠΏΠΊΠΈ, созданныС с использованиСм послСднСй вСрсии Bootstrap 5. Кнопки ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ стили (ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, информация, ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ) для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ: ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹Π΅, ΠΎΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅, ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅, фиксированныС, Ρ‚Π΅Π³ΠΈ ΠΈ Ρ‚. Π”.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ настраиваСмыС стили ΠΊΠ½ΠΎΠΏΠΎΠΊ MDB для дСйствий Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… ΠΈ Ρ‚. Π”. Π‘ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ нСсколько Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², состояний ΠΈ Ρ‚. Π΄.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ API , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ всС доступныС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Π°Ρ настройка

Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ


Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

Кнопка
 
          
          
ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ пСрСнос тСкста

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ пСрСносился, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ .text-nowrap ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅. Π’ Sass Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ $ btn-white-space: nowrap , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ пСрСнос тСкста для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.


Π¦Π²Π΅Ρ‚Π°

MDB Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ нСсколько ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… стилСй ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слуТит своСй сСмантичСской Ρ†Π΅Π»ΠΈ, с нСсколько статистов Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ для большСго контроля.

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π’Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ УспСх ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π‘Π²Π΅Ρ‚ Вьма Бвязь
 
          
          
          
          
          
          
          
          
          
          

ΠŸΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° смысла Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ тСхнологиям:
ИспользованиС Ρ†Π²Π΅Ρ‚Π° для добавлСния смысла Π΄Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ†ΠΈΡŽ, которая Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана.Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ информация, обозначСнная Ρ†Π²Π΅Ρ‚ Π»ΠΈΠ±ΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π΅Π½ ΠΈΠ· самого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ тСкста), Π»ΠΈΠ±ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ способами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ тСкст, скрытый с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ . Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ скрытый класс.


ΠšΠΎΠ½Ρ‚ΡƒΡ€

НуТна ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½ΠΎ Π½Π΅ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ приносят? Π—Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ классы-ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ с .btn-outline- * , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ всС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΈ Ρ†Π²Π΅Ρ‚Π° Π½Π° любой ΠΊΠ½ΠΎΠΏΠΊΠ΅.

Π’ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… структуры ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ data-mdb-ripple-color = "dark" , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ эффСкт . Π‘Π²Π΅Ρ‚Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ряби ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (примСняСтся автоматичСски ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅) ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ Π²ΠΈΠ΄Π½Ρ‹ Π² случаС ΠΊΠ½ΠΎΠΏΠΎΠΊ со свСтом ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎΠ± эффСктС ряби ΠΈ всСх доступных опциях, посмотритС Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ripple.

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π’Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ УспСх ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π‘Π²Π΅Ρ‚ Вьма
 
          
          
          
          
          
          
          
          
          

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стилях ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ свСтлый Ρ†Π²Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°, ΠΈ ΠΈΡ… слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ„ΠΎΠ½ для обСспСчСния достаточного контраста.


ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΎ

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ .btn-rounded class, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° Π·Π°ΠΊΡ€ΡƒΠ³Π»ΡΠ»Π°ΡΡŒ.

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π’Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ УспСх ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π‘Π²Π΅Ρ‚ Вьма
 
          
          
          
          
          
          
          
          
          

Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚ΡƒΡ€

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ .btn-outline- * ΠΈ .btn-Round вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ получился ΠΎΡ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π’Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ УспСх ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π‘Π²Π΅Ρ‚ Вьма
 
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            Π’Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            УспСх
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            Π‘Π²Π΅Ρ‚
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
            Вьма
          
          

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ .btn-Floating , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.

Для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π½ΡƒΡ‚Ρ€ΡŒ. ВСкст Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ сотни доступных Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² нашСм Π·Π½Π°Ρ‡ΠΊΠΈ docs.

 
          
          

К ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ всС Ρ‚Π΅ ΠΆΠ΅ классы ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ β€” Ρ†Π²Π΅Ρ‚Π°, Ρ€ΡΠ±ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΠ½Ρ‚ΡƒΡ€ ΠΈ Ρ‚. Π΄.

 
          
          ΠΊΠ½ΠΎΠΏΠΊΠ° <
            type = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
           
            data-mdb-ripple-color = "Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ"
          >
             
          
          
          
          

Кнопки фиксированныС

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ .fixed-action-btn класс для создания фиксированной ΠΊΠ½ΠΎΠΏΠΊΠΈ со списком доступных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅.

Π‘ΠΌ. Π–ΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ фиксированной ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ этой страницы.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Доступны ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ / ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ список. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ API , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС.

 
          
<Π° >
  • <Π° >
  • <Π° >
  • <Π° >
  • <Π° >

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти

ΠšΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΡ наши Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй.ОбъСдиняя наши Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ всС доступныС Π·Π½Π°Ρ‡ΠΊΠΈ Π² нашСм поиск ΠΈΠΊΠΎΠ½ΠΎΠΊ (ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Β«Π±Ρ€Π΅Π½Π΄Ρ‹Β» для Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π±Ρ€Π΅Π½Π΄ΠΎΠ²).

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π·Π½Π°Ρ‡ΠΎΠΊ Facebook Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ установитС Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΎΡ‚ Π΄ΠΎ # 3B5998 (Ρ†Π²Π΅Ρ‚ Π±Ρ€Π΅Π½Π΄Π° facebook).

 
             
          
ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹ ΠΌΠ°Ρ€ΠΎΠΊ

НСсколько самых популярных Π±Ρ€Π΅Π½Π΄ΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ.

 
            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               
            
ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΠ² .btn-Floating Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй.

 
            <Π°
             
             
              href = "#!"
              Ρ€ΠΎΠ»ΡŒ = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
              >   
            
ВСкст

Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅. НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ классы ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, .me-2 ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π½Π°Ρ‡ΠΊΠΎΠΌ ΠΈ тСкст.

Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€
 
               Twitter 
            
Волько Π·Π½Π°Ρ‡ΠΎΠΊ

Π£Π΄Π°Π»ΠΈΠ² классы ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠ² Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π½Π° Ρ†Π²Π΅Ρ‚ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ минималистичныС, ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

 
            
               

            
               

            
               

            
               
            
УвСдомлСния

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π·Π½Π°Ρ‡ΠΎΠΊ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ счСтчик.

8
 
                8  
            

Π’Π΅Π³ΠΈ

ΠšΠ»Π°ΡΡΡ‹ .btn ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для использования с


Π Π°Π·ΠΌΠ΅Ρ€Ρ‹

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ большСго ΠΈΠ»ΠΈ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°? Π‘ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ .btn-lg ΠΈΠ»ΠΈ .btn-sm для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Кнопка Кнопка Кнопка
 
          
          
          
          

АктивноС состояниС

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс .active , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° выглядСла Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ.

ΠŸΠ΅Ρ€Π²ΠΈΡ‡Π½Π°Ρ ссылка Бвязь
 
           ΠŸΠ΅Ρ€Π²ΠΈΡ‡Π½Π°Ρ ссылка 
           Бсылка 
          

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² логичСский Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ disabled ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнт , Π²Π΅Π΄ΡƒΡ‚ сСбя Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°Ρ‡Π΅:

ΠŸΠ΅Ρ€Π²ΠΈΡ‡Π½Π°Ρ ссылка Бвязь
 
          <Π°
            href = "#"
           
            tabindex = "- 1"
            Ρ€ΠΎΠ»ΡŒ = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
            aria-disabled = "ΠΏΡ€Π°Π²Π΄Π°"
            > ΠŸΠ΅Ρ€Π²ΠΈΡ‡Π½Π°Ρ ссылка 
          <Π°
            href = "#"
           
            tabindex = "- 1"
            Ρ€ΠΎΠ»ΡŒ = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
            aria-disabled = "ΠΏΡ€Π°Π²Π΄Π°"
            > Бсылка 
          

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Link:
МодСль .disabled класс ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ событий-ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΉ: Π½Π΅Ρ‚ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ссылки
s, Π½ΠΎ это свойство CSS Π΅Ρ‰Π΅ Π½Π΅ стандартизировано. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΄Π°ΠΆΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ события указатСля : Π½Π΅Ρ‚ , ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° навигация остаСтся Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΉ, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ зрячиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ смогут Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти ссылки. Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² бСзопасности, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ tabindex = "- 1" Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ для этих ссылок (Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π»ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ focus) ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ собствСнный JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.


Π‘Π»ΠΎΠΊ ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π³ΠΈΠ±ΠΊΠΈΠ΅ стопки ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹Ρ… Β«ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈΒ», ΠΊΠ°ΠΊ Π² Bootstrap 4, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сочСтания нашСго дисплСя ΠΈ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ Ρ€Π°Π·Ρ€Ρ‹Π²Π°. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ вмСсто классов, спСцифичных для ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΌΡ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ больший ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠΌ, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.

Кнопка Кнопка

 
          

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ создаСм Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, начиная с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ располоТСнных ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° md Ρ‚ΠΎΡ‡ΠΊΠ° останова, Π³Π΄Π΅ .d-md-block замСняСт .d-grid , Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ сводя Π½Π° Π½Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡ‚ΡŒ gap-2 . Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ.

Кнопка Кнопка

 
          

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов сСтки.НапримСр, для Β«ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Π»ΠΎΠΊΠ°Β» ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ .col-6 . ΠžΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ .mx-auto Ρ‚ΠΎΠΆΠ΅.

Кнопка Кнопка

 
          

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠΈ выравнивания ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ взяли наш ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ нСсколько ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ гибкости ΠΈ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ ΠΌΠ°Ρ€ΠΆΠΈ. Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ большС Π½Π΅ слоТСны.

Кнопка Кнопка

 
          

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ состояния

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ data-mdb-toggle = "button" , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС ΠΊΠ½ΠΎΠΏΠΊΠΈ.Если ΠΏΡ€ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс .active ΠΈ aria-press = "true" ΠΎΡ‚ Π΄ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° < type = "ΠΊΠ½ΠΎΠΏΠΊΠ°" data-mdb-toggle = "ΠΊΠ½ΠΎΠΏΠΊΠ°" autocomplete = "Π²Ρ‹ΠΊΠ»" ария-прСссованный = "ΠΏΡ€Π°Π²Π΄Π°" > Активная ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ° < type = "ΠΊΠ½ΠΎΠΏΠΊΠ°" ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ data-mdb-toggle = "ΠΊΠ½ΠΎΠΏΠΊΠ°" autocomplete = "Π²Ρ‹ΠΊΠ»" > ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ссылку Активная ссылка ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ссылки

 
           ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ссылку 
          <Π°
            href = "#"
           
            Ρ€ΠΎΠ»ΡŒ = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
            data-mdb-toggle = "ΠΊΠ½ΠΎΠΏΠΊΠ°"
            ария-прСссованный = "ΠΏΡ€Π°Π²Π΄Π°"
            > Активная ссылка ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ 
           ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ссылки 
          

ΠŸΡ€Π°Π²Π΄Π° ΠΎ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈ Ρ…ΡƒΠ΄ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚Π°Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ для вашСго Π²Π΅Π±-сайта

Компании Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ постоянно ΠΈΡ‰ΡƒΡ‚ Π»ΡƒΡ‡ΡˆΠΈΠ΅ способы ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Если Π²Ρ‹ Π²Π»Π°Π΄Π΅Π»Π΅Ρ† ΠΌΠ°Π»ΠΎΠ³ΠΎ бизнСса, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΈΡ‰Π΅Ρ‚Π΅ Π½ΠΎΠ²Ρ‹Π΅ способы ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Один ΠΈΠ· самых простых способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму. Π‘Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½ΠΎ мноТСство исслСдований, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π»ΡƒΡ‡ΡˆΠ΅ всСго подходят для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° Π²Π΅Π±-сайтах.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ 3 Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΠΊΠ»ΠΈΠΊΠΎΠ², Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Ρ‚Ρ€ΠΈ Ρ…ΡƒΠ΄ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΠΊΠ»ΠΈΠΊΠΎΠ².

3 Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚Π° для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ:

1.ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ. ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ выдСляСтся Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Π²Π΅Π±-страниц. Он ΠΏΡ€ΠΎΠ±ΡƒΠΆΠ΄Π°Π΅Ρ‚ ΡΡ‚Ρ€Π°ΡΡ‚ΡŒ, Π²ΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π±Π΅Π·ΠΎΡ‚Π»Π°Π³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ приняли срочныС ΠΌΠ΅Ρ€Ρ‹ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ вашСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π»ΠΈ Π΅Π³ΠΎ, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΊΠ½ΠΈΠ³Ρƒ ΠΈ Ρ‚. Π”.), Π’ΠΎΠ³Π΄Π° красный β€” ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚. Как Π½ΠΈ странно, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди Π·Π°ΡΠ²Π»ΡΡŽΡ‚, Ρ‡Ρ‚ΠΎ красный ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠ΄Π΅Ρ‚ Ρ€ΡƒΠΊΠ° ΠΎΠ± Ρ€ΡƒΠΊΡƒ со стопом, Π½ΠΎ исслСдования ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚ΠΎΠ² для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

2. Π—Π΅Π»Π΅Π½Ρ‹ΠΉ . Если ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈΠ»ΠΈ услуга, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΏΡ€ΠΎΠ΄Π°Π΅Ρ‚Π΅, связаны с ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΉ срСдой, психологиСй ΠΈ ΠΌΠΈΡ€ΠΎΠΌ, Ρ‚ΠΎΠ³Π΄Π° Π·Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ β€” ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ для вас.Π—Π΅Π»Π΅Π½Ρ‹ΠΉ успокаиваСт ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ со словом Β«ΠΈΠ΄Ρ‚ΠΈΒ», Ρ‡Ρ‚ΠΎ ΠΌΠΎΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ². Π’Π°ΡˆΠΈΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³Ρ‡Π΅ психологичСски Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π·Π΅Π»Π΅Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° Π½Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ†Π²Π΅Ρ‚ΠΎΠ².

3. ΠžΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ . АпСльсин Π²ΠΎΠ·Π±ΡƒΠΆΠ΄Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Ρ‚Π΅ΠΏΠ»Ρ‹ΠΉ. Π£ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° людСй это ассоциируСтся с Ρ‚Π΅ΠΏΠ»ΠΎΠΌ ΠΎΡ‚ солнца. Π­Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ»ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΏΠΎΠ±ΡƒΠΆΠ΄Π°Π΅Ρ‚ людСй Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. Когда ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽΡ‚ сСбя счастливыми, ΠΎΠ½ΠΈ с большСй Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ купят ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‚ΡΡ Ρƒ Π½ΠΈΡ… со ΡΡ‡Π°ΡΡ‚ΡŒΠ΅ΠΌ. НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ вСсь сайт Amazon ΠΎΠΊΡ€Π°ΡˆΠ΅Π½ Π² ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΈ ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚Π°.Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Π½ΠΈΡ…, ΠΈ ΠΎΠ½ΠΈ проводят ВОННУ тСстирования ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайтов, поэтому Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΡΡ‚Π² Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ для вашСго Π²Π΅Π±-сайта.

3 Ρ…ΡƒΠ΄ΡˆΠΈΡ… Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ:

1.

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

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