Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Секция выбора товара с модальным окном modal-sm подробнее


Секция выбора товара с модальным окном modal-sm подробнее

Начинаем верстку с задания каркаса в index.html пишем одной строкой секцию с классом types.

Внутри container с полосой row, заголовок будет section-header, сразу сделаем все по центру классом text-center.

Заголовок второго уровня типы компьютеров.

Прописали одной строкой в sublime text и нажали tab, с помощью emmet все распакуется.

Вторым действием зададим четыре колонки col-md-3 с картинкой и двумя кнопками подробнее и заказать.

Делаем вторую строку для этого.

верстка с emmet модальных окон bootstrap

Добавим одной кнопки у каждого блока название класса btn-more, а другим добавим класс btn-zakaz, чтобы добавить одновременно четыре класса зажимаем ctrl и ставим курсор, в то место где хотим внести изменения.

Добавим все заголовки третьего уровня h3.

Перед тем как добавим модальные окна к двум кнопкам зададим data-target уникальное название, например у кнопок подробнее будут по порядку с 10 #modal10, а у кнопки заказ с 20 #modal20.

Добавим два модального окна.

Первое окно будет большое modal-lg у кнопки подробнее, в нем расположим fotorama, для коллекции изображений и сбоку добавим продающий текст. Внизу кнопку сделаем с классом btn.

большое modal-lg у кнопки подробнее

Второе модальное окно будет маленьким modal-sm, в нем будет поля имя и телефон. Кнопка btn заказать расположим нижней части модального окна.

модальное окно будет маленьким modal-sm

Как подключить модальные окна bootstarp 3 можно прочитать тут и добавить код окна из статьи.

У модального окна подробнее добавим идентификатор id=modal10, такой как у кнопки.

У окна заказать добавим id=modal20.

Для всех остальных блоков с кнопками делаем по аналогии.

Получился код в index.html.

Стилизуем кнопки и модальные окна.

Изображение, которое получится в браузере после стилизации.

стилизация секции bootstrap с модальными окнами

У всей секции #types сделаем отступ сверху padding-top: 30px.

Между заголовком h2 и изображениями сделаем отступ margin-bottom: 30px.

Добавим у всей секции, чтобы заголовки были большими буквами text-transform: uppercase.

Заголовки под картинками h3 установим пониже margin-top: 20px и сделаем жирным шрифтом font-weight: bold.

Оформим кнопки подробнее и заказать.

  1. btn-more кнопка подробнее будет прозрачной background-color: transparent с текстом синего цвета. Отступы по краям от слова будут padding: 10px 8px. Добавим анимацию пол секунды transition: all .5s ease для изменения цвета при наведении мышкой. Зададим класс, когда наводим мышкой на кнопку &:hover и поменяем цвета, текст станет белым, а фон синим.
  2. btn-zakaz кнопка заказа все копируем от кнопки подробнее, меняем только цвета синий на белый. Так как слово заказ будет меньше, делаем отступ padding: 10px 18px от края.

Добавим фиолетовую рамку border: 3px solid #b641b0, когда наводим мышкой &:hover на блок с классом comp и цвет фона внутри сделаем светло-голубым background-color: #dcf4f5.

Чтобы рамка не прилипала зададим отступ пять пикселей padding: 5px.

Код main.sass.

Комментариев нет