Рубрика «Верстка»

В данной рубрике публикуется информация непосредственно о верстке web-страниц и вообще о разработке пользовательской части сайта, используя: HTML, CSS, клиентский JavaScript и его библиотеку jQuery, обзоры различных инструментов, фреймворков и библиотек с примерами их использования для облегчения и ускорения процесса верстки и front-end разработки сайтов.

Bootstrap аккордеон с использованием компонентов panel и collapse

Bootstrap аккордеон: panel и collapse

Продолжаем разбирать компоненты фреймворка Bootstrap. В этой статье рассмотрим так называемый аккордеон. Аккордеон на сайте зачастую используют для создания многоуровневого меню с несколькими уровнями вложенности, для этого идеально подходит решение jQuery, а аккордеон от Bootstrap имеет немного другую функциональность. С его помощью можно создавать сворачиваемые панели, содержащие контент различной величины, но при этом все будет выглядеть компактно, как на примере. .panel-title > a{color: inherit !important;} .panel-title > ...
 11.04.2017
 Евгений
 нет

Bootstrap Less: работа с препроцессором

Здравствуйте! Данный пост является продолжением статьи «Кастомизация Bootstrap», в которой разбиралось два варианта переопределения дефолтных стилей фреймворка. Сегодня рассмотрим третий вариант кастомизации. Это изменение исходников Bootstrap, также их еще называют препроцессорами. Я решил выделить этот способ в отдельную статью, так как считаю его приоритетным и наиболее удобным для изменения стилей этого замечательного фреймворка. На сайте бутстрапа в разделе «Customize» можно изменить стили и переопределить переменные как нам нужно, ...
 23.01.2017
 Евгений
 2
Слайдер Bootstrap: как поменять вид анимации карусели

Меняем эффект анимации карусели Bootstrap

Доброго времени суток. В прошлой статье мы познакомились с каруселью Bootstrap и разобрали основные моменты. В этом посте рассмотрим как изменить эффект анимации при смене слайдов карусели. Почему-то в официальной документации Bootstrap нет никакой информации по этому поводу, хотя изменение вида анимации реализуется, в принципе, не сложно. Изменять будем стандартное перелистывание слайдов на эффект растворения (fade), для этого напишем дополнительные стили CSS, а в HTML-код практически никаких правок вносить не будем. Вот пример ...
 10.12.2016
 Евгений
 2
Слайдер Bootstrap: примеры использования и стилизация карусели

Карусель Bootstrap: разбор и стилизация

Здравствуйте. Продолжаем разбирать фреймворк Bootstrap. Об установке и основах использования фреймворка я писал в посте «Как работать с Bootstrap». В этой статье рассмотрим слайдер, в бутстрапе он называется Carousel (Карусель). У карусели Bootstrap есть существенные плюсы по сравнению с другими: адаптивность под мобильные устройства, по умолчанию, если навести курсор мыши на карусель, то смена слайдов останавливается, пока пользователь не уберет с нее курсор мыши, в слайды можно помещать любой HTML-код. Слайдер, предоставленный фреймворком, ...
 10.12.2016
 Евгений
 нет
Основы языка JavaScript

Основы языка JavaScript

Здравствуйте, дорогие читатели блога. В данной статье рассмотрим основы JavaScript для начинающих front-end разработчиков, разберем варианты внедрения сценариев языка в web-страницу, познакомимся с его синтаксисом. Несколько лет назад при разработке пользовательской части сайта (front-end) было достаточно знания HTML & CSS, но время не стоит на месте и в данных реалиях верстальщик обязательно должен владеть языком JavaScript. JavaScript – язык программирования, который чаще всего используется при разработке скриптов и небольших ...
 7.09.2016
 Евгений
 нет
Кастомизация Bootstrap и скачивание отдельных компонентов фреймворка

Кастомизация Bootstrap

Здравствуйте, друзья! Продолжаем разбирать фреймворк Bootstrap. В предыдущих статьях мы поговорили о том, «Что такое Bootstrap» и рассмотрели «Как работать с Bootstrap». Сегодня разберем кастомизацию фреймворка, рассмотрим несколько вариантов изменения Bootstrap под себя и скачивание отдельных элементов фреймворка. Для чего нужна кастомизация Bootstrap? Дело в том, что если всегда пользоваться готовыми решениями, которые предлагает фреймворк, то все создаваемые сайты будут похожи друг на друга, как братья близнецы, поэтому в подавляющем ...
 19.07.2016
 Евгений
 нет