-
Как работает border-radius в CSS: скругляем углы правильно
Категория: Разработка сайта
Скруглённые углы придают дизайну мягкость и современность.С помощью свойства border-radius можно скруглить один угол, пару углов или все сразу — причём задать как равномерные, так и асимметричные значения. В этой статье разберём, как работает border-radius и какие бывают варианты его использования. Скругление всех углов одинаково Самый простой вариант: cssКопироватьРедактировать.box { border-radius: 10px; } Это значит,…
-
Как задать скругление углов только с одной стороны в CSS
Категория: Разработка сайта
Скруглённые углы делают интерфейс визуально приятнее.Но что, если нужно скруглить только один угол — например, верхний левый? Или только одну сторону — левую или правую целиком? CSS предоставляет для этого гибкие свойства border-radius. Разберёмся, как ими управлять. Скругление конкретного угла Чтобы скруглить один конкретный угол, используй такие свойства: Пример: cssКопироватьРедактировать.box { border-top-left-radius: 10px; } Можно…
-
Как выровнять элементы по вертикали в Bootstrap: все способы
Категория: Разработка сайта
Вертикальное выравнивание — одна из самых частых задач при вёрстке интерфейсов.Bootstrap предлагает удобные классы, основанные на flexbox, которые позволяют легко выровнять текст, изображения, блоки и кнопки по вертикали. Ниже — лучшие способы с примерами. Способ 1. Flex и align-items-center htmlКопироватьРедактировать<div class=»d-flex align-items-center» style=»height: 200px; background: #eee;»> <div class=»mx-auto»>Центр по вертикали</div> </div> Важно: у контейнера должна…
-
Как разместить элементы в одну строку в Bootstrap: все способы
Категория: Разработка сайта
Расположить элементы в одну строку — частая задача при создании меню, форм, карточек или кнопок.Bootstrap предлагает несколько способов выстроить блоки или элементы в ряд — от классических d-inline-block до мощного flex-контейнера. Ниже — самые удобные варианты. Способ 1. d-inline-block — классика строчных блоков htmlКопироватьРедактировать<div class=»d-inline-block bg-light p-2″>Блок 1</div> <div class=»d-inline-block bg-light p-2″>Блок 2</div> Класс d-inline-block…
-
Как выровнять блок по центру в Bootstrap: все способы с примерами
Категория: Разработка сайта
Центрирование — одна из самых частых задач в вёрстке.Будь то кнопка, карточка, форма или текст — разместить элемент по центру по горизонтали или вертикали в Bootstrap очень просто. Ниже — самые удобные и современные способы. Горизонтальное центрирование блока Способ 1. mx-auto — отступы по краям автоматически htmlКопироватьРедактировать<div class=»container»> <div class=»mx-auto» style=»width: 200px; background: #eee;»>Центр</div> </div>…
-
Как оставить только цифры в строке с помощью JavaScript
Категория: Разработка сайта
Иногда из строки нужно вытащить только числа — без пробелов, букв и символов.Такое бывает при обработке номеров телефонов, ID, цен и других данных. В JavaScript сделать это можно с помощью регулярных выражений. Покажу, как это работает. Способ 1. Удаление всего, кроме цифр (регулярное выражение) javascriptКопироватьРедактироватьlet input = «Тел: +7 (999) 123-45-67»; let numbers = input.replace(/\D/g,…
-
Как округлить число до двух знаков после запятой в JavaScript
Категория: Разработка сайта
Округление чисел — частая задача при работе с деньгами, процентами и вычислениями.JavaScript предлагает несколько способов округлить число до нужного количества знаков после запятой. В этой статье покажу, как это сделать правильно, с учётом нюансов типа данных. Способ 1. Метод toFixed() Самый простой способ округлить число и получить строку с двумя знаками: javascriptКопироватьРедактироватьlet num = 5.6789;…
-
Как получить значение поля input в JavaScript: быстрые примеры
Категория: Разработка сайта
Получение значения из поля ввода — основа любой формы.Будь то имя пользователя, номер телефона или комментарий — JavaScript позволяет легко «вытянуть» нужную информацию из поля. Разберём, как это сделать с помощью стандартных методов. Способ 1. Получение значения через value htmlКопироватьРедактировать<input type=»text» id=»username» placeholder=»Введите имя»> <button onclick=»showValue()»>Показать значение</button> <script> function showValue() { const input = document.getElementById(«username»);…
-
Как поменять изображение при нажатии на кнопку в JavaScript
Категория: Разработка сайта
Смена изображения по клику — простой и эффектный способ оживить сайт.Такой приём используют в галереях, при выборе товара, в слайдерах или играх. JavaScript позволяет легко изменить картинку, просто заменив значение атрибута src. Разберём всё по шагам. HTML-разметка с изображением и кнопкой htmlКопироватьРедактировать<img id=»photo» src=»image1.jpg» alt=»Картинка» width=»300″> <button onclick=»changeImage()»>Сменить картинку</button> Картинка имеет id=»photo», а кнопка вызывает…
-
Как изменить стиль элемента в JavaScript: способы и примеры
Категория: Разработка сайта
Иногда нужно изменить внешний вид элемента прямо из скрипта.Это может быть кнопка, которая меняет цвет при клике, или блок, который исчезает при наведении. JavaScript позволяет управлять стилями любого HTML-элемента — быстро и гибко. Ниже — самые полезные приёмы. Способ 1. Изменение встроенного стиля через style Самый прямой способ — доступ к свойствам через element.style. javascriptКопироватьРедактироватьconst…