HTML, CSS, JS




Верстка страниц сайтов в Bootstrap блоками

Bootstrap logo

Основное преимущество от использование Bootstrap – сокращение времени на верстку и разработку. Фреймворк Bootstrap основан на использовании блочной верстки для создания адаптивных страниц – страниц, внешний вид которых подстраивается автоматически под разрешение устройства пользователя.

(далее...)

Оформление таблиц в фреймворке Bootstrap

Рис.2. Таблица в стиле Bootstrap по умолчанию

В Bootstrap встроена возможность стильного оформления таблиц. К сожалению, таблицы по умолчанию выглядят не просто аскетично, а на них вообще неприятно смотреть – отсутствуют отступы в ячейках, рамки, если отображаются, то просто убогие. Потому веб-мастеру уже нужно помнить, что стили таблиц нужно переопределять. Bootstrap об этом тоже помнит и уже содержит заготовленный класс для таблиц.

(далее...)

Основы использования фреймворка Bootstrap

Bootstrap logo

В первое время после отказа от табличной верстки было немного непривычно переходить на блочную верстку. Тогда, да и сейчас, мне казалось, что она многое усложнила. И так оно было до появления фреймворков, которые очень сильно упростили верстку. Речь идет о фреймворках для так называемой адаптивной верстки. Наиболее популярные среди их это Foundation и Bootstrap. В отличие от Foundation 5, с новой версией у меня отношения не сложились, потому решил освоить Bootstrap. И не прогадал.

(далее...)

Растянуть на полный экран фоновое изображение с помощью CSS

Рис.1. Фото для фонового изображения

При создании сайтов хочется даже фоном подчеркнуть тематическую направленность сайта, вставив в фон красивое изображение. При использовании фото в качестве фона, заставить изображение растягиваться без искажений довольно непросто, особенно если вы все еще заботитесь о пользователях немного устаревших браузеров.

(далее...)

Зафиксировать HTML элемент на экране с помощью CSS

На длинных HTML страницах бывает удобно, чтобы HTML элемент, например, кнопка, ведущая на верх страницы, или меню, были расположена в определенной части экрана. Именно экрана, а не страницы. Ну и кнопка должны быть выше остальных элементов.

(далее...)

Strip – стильная Lightbox галерея с неполным закрытием страницы

Скрипты Lightbox позволяют смотреть большие изображения на текущей странице. Они  давно стали неотъемлемой частью любого сайта. Очень хорошо они подходят для создания фотогалерей, но вот для просмотра изображений в статьях – как правило, не очень, т.к. они закрывают текст, заставляя отвлечься от содержимого статьи. (далее...)

Редирект на другую страницу

Редирект, или перенаправление, полезная вещь, когда после какой-то промежуточной обработки данных, например, проверки пароля при авторизации, нужно отправить пользователя на нужную страницу. Есть несколько способов сделать редирект, расскажу о 3 наиболее часто используемых. (далее...)

Как поменять столбцы местами в статичной html-таблице с помощью jQuery

Рисунок 1. Таблица, в которой надо поменять столбцы местами

Есть html-таблица, которую вернул нам сторонний веб-сервис. Или утилита. Поменять код не можем, а хотим, чтобы столбцы были в том порядке, который нужен. А еще лучше иметь возможность ими управлять. Сейчас расскажу о том, как на решение подобной задачи потратить не более получаса (5 минут оптимально). (далее...)


MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика