Можно подписаться на событие скролла самого блока, с помощью scrollTop, clientHeight и прочего отследить момент, когда мы в начале или конце блока, а потом прописать e.preventDefault, и в таком случае отключим дальнейший скролл.
Вообще на js проще) Но вот на CSS.
input:checked + label img.ifChecked - берем инпут отмеченый, через плюс дотягиваемся до лейбла и ищем в нем картику с классом, задаем ей дисплей блок, аналогичным селектором дотягиваемся до первой картинки и ей даем дисплей нон.
input + label img.ifChecked - все тоже самое, но наоборот, инпут не отмеченный, то одну картинку меняем дисплей с нон на блок, а у второй блок на нан. Если вместо дисплей нон и так далее задать какие-то другие свойства, типа опасити и позишена, то вообще с анимацией можно сделать, добавив транзишен.
Если надо делать на бутстрапе, то наверное придется самому считать ширину, задавать маржины, короче строить свою сетку, я так вижу выход. Как вариант - найти дизайнера и... поговорить.
1. Используйте Vue.js, React, Angular, на JS(jQ) Вы просто замучаетесь все это делать.
2. В отношении Vue, чтобы на одной странице все было, но был эфект перехода по url используйте vue-router.
3. На чистом JS их множество, воды мало, камни сплошные, скорее подкаменная вода)
Внизу все хорошо объяснили, лично я столкнулся с этим, когда использовал цикл for... of, который в отличии от других подобных циклов позволяет обойти весь массив и в локальной переменной будет лежать значение элемента массива, а не ключ или иттератор. Если такой цикл преобразовать в старый стандарт, то как раз и появляется этот самый Symbol, кстати, для IEшки как всегда нужен полифил, даже после babela он не дружит с Symbol.
Да, ещё для решения такой задачи можно использовать иконочный шрифт, например поищите fontawesome. Там еще проще, подключили css к проекту, нашли в документации нужную иконку, и там же написан класс, который в html надо будет добавить, пишете в разметке < i class="fa fa-vk"> < /i>, класс fa обязательно, а fa-vk это иконка соц сети вконтакте, в css управление такое:
.fa-vk{
color: blue;
font-size: 30px;
...
}
.fa-vk{
color: #45ccf2; // придумал только что с головы, не знаю, что за цвет
}
svg это обычный xml, открываете в тестовом редакторе и просто читаете все что внутри, как обычный html, например можно найти строчку , вот видно класс, берете и свой класс сюда пишете, без графического редактора. Я привел пример про редактор, так как в нём видно какой элемент и какой у него класс или id, тогда как в текстовом редакторе увидите просто какие-то path, g, poligon и так далее. В конце концов можно просто открыть svg с помощью inkspace и посмотреть, что к чему, подписать по своему.
larka_skaz, тут как угодно, с помощью fill можно задать цвет, например #line{fill:#788;}
а на ховер так же другой цвет задать. Вы можете любой цвет задать в любой момент времени, если не прописать, то будет тот, что по умолчанию.
Dima Polos, вариант выше такой страшный, и все таки с картинкой из фотошопа, вырезанной, но собрать его таким образом: поделить экран на три столбца, слева и справа задать фон блокам, а посредине блок разделить на еще два, сверху - картинка, снизу - простой блок с фоном. Возникает проблема с контентом, НО! у нас на макете всегда есть паддинг у блоков, чтоб контент одного блока не мешал второму, и вот родителю для этих пазлов задать высоту жестко, на величину паддинга, а уже под родителем - контейнер просто с белым фоном для контента.
