В этой статье будет описано, как стилизовать модальное окно Bootstrap.
Как стилизовать модальное окно Bootstrap?
Чтобы узнать, как стилизовать модальное окно Bootstrap, выполните следующие действия.
Шаг 1: Создайте HTML-файл
Сначала создайте модальное окно, следуя приведенным ниже инструкциям:
- Создать ' <дел> ”контейнер и присвоить ему класс ” основной модальный контейнер ».
- Затем добавьте кнопку, которая вызовет модальное окно. Назначьте ему « бтн », « btn-основной ', и ' шоу-модал ” классы. Установите атрибуты данных “ переключение данных ' со значением ' модальный ” и “ цель данных ” с “ #мойМодал ' ценить. Этот идентификатор указывает на идентификатор модального окна.
- Далее создайте модальное окно. Для этого добавьте « <дел> ” и присвойте ему “ модальный ' и ' тускнеть ” и установить идентификатор.
- Добавить ' <дел> ” для диалогового окна модального окна и назначьте ему “ модальный диалог ' сорт.
- Затем укажите содержимое модального окна в «» и назначьте ему класс « модальное содержание ».
- Сделайте кнопку закрытия с классом « закрывать ». “ отклонить данные ” используется для закрытия модального окна.
- Затем укажите модальное тело с классами « модальное тело ' и ' ряд ». Внутри него возьмите столбец из 6 сеток для изображения и 6 для контента.
- Изображение встраивается с помощью « <изображение> ' ярлык.
- Затем внутри « <дел> » элемент с « содержание », добавьте заголовок, подзаголовок и описание.
- После этого поместите кнопку с Bootstrap « бтн », « бтн-опасность ', и ' р-2 классы:
< див сорт '=' 'основной модальный контейнер' >
< кнопка сорт '=' 'btn btn-основной шоу-модальный' переключение данных '=' 'модальный' данные- цель '=' '#мойМодал' > модальный вид < / кнопка >
< див сорт '=' 'модальное затухание' идентификатор '=' 'мой модал' >
< див сорт '=' 'модальный диалог' >
< див сорт '=' 'модальное содержание' >
< кнопка сорт '=' 'закрывать' отклонить данные '=' 'модальный' >
< охватывать > × < / охватывать >< / кнопка >
< див сорт '=' 'строка модального тела' >
< див сорт '=' 'col-sm-6 модальное изображение' >< изображение источник '=' '/img/одежда.jpg' >< / див >
< див сорт '=' 'содержимое col-sm-6' >
< h3 сорт '=' 'заголовок' > Специальное предложение < / h3 >
< охватывать сорт '=' 'подзаголовок' > Скидка 20% на вынос и доставку < / охватывать >
< п сорт '=' 'описание' > Рубашки лучшего качества. Каждый размер доступен. Легко моется. < / п >
< кнопка сорт '=' 'бтн бтн-опасность п-2' > ПОСМОТРЕТЬ БОЛЬШЕ < / кнопка >
< / див >
< / див >
< / див >
< / див >
< / див >
< / див >Шаг 2: Стиль класса «основной-модальный-контейнер»
Весь контейнер стилизован с помощью CSS семейство шрифтов ' свойство:
.main-modal-контейнер {
семейство шрифтов : «Поппинс» , без засечек ;
}Шаг 3: Стиль класса «show-modal»
“ шоу-модал ” объявлен со следующими свойствами:
.main-modal-контейнер .show-modal {
цвет : #ффф ;
фоновый цвет : #3a97c9 ;
преобразование текста : капитализировать ;
набивка : 10 пикселей 15 пикселей ;
допуск : 80 пикселей авто 0 ;
отображать : блокировать ;
}Здесь:
- “ цвет ” задает цвет шрифта.
- “ фоновый цвет » устанавливает цвет фона элемента.
- “ преобразование текста ” делает текст заглавным.
- “ набивка » регулирует пространство вокруг содержимого элемента.
- “ допуск ” создает пространство вокруг элемента.
- “ отображать ' со значением ' блокировать » устанавливает ширину элемента на 100%.
Шаг 4: Стиль класса «modal-dialog» на Fade
.modal .тускнеть .modal-диалог {
трансформировать : шкала ( 0 ) ;
переход : все 450 мс кубический Безье ( .47 , 1,64 , .41 , .8 ) ;
}Когда модальное окно исчезает, следующие свойства CSS применяются к « модальный диалог ' сорт:
- “ трансформировать ” недвижимость с “ шкала() ” увеличивает или уменьшает размер элемента по вертикали или горизонтали.
- “ переход » постепенно перемещает элемент. “ кубический Безье () ” применяет кубическую кривую Безье. Он определяется четырьмя точками.
Шаг 5: Стиль «модальный диалог» класса на шоу
.modal .показывать .modal-диалог {
трансформировать : шкала ( 1 ) ;
}CSS « трансформировать ” свойство со значением “ масштаб(1) ” увеличивает размер диалогового окна.
Шаг 6: Стиль класса «modal-content»
.main-modal-контейнер .modal-диалог .modal-контент {
радиус границы : 30 пикселей ;
граница : никто ;
переполнение : скрытый ;
}“ модальное содержание ” украшен следующими свойствами:
- “ радиус границы » скругляет края элемента.
- “ граница ' со значением ' никто ” скрывает границу.
- “ переполнение ” управляет потоком контента.
Шаг 7: Стиль «закрыть» класс
.main-modal-контейнер .modal-диалог .modal-контент .закрывать {
цвет : №747474 ;
фоновый цвет : RGBA ( 255 , 255 , 255 , 0,5 ) ;
высота : 27 пикселей ;
ширина : 27 пикселей ;
набивка : 0 ;
непрозрачность : 1 ;
переполнение : скрытый ;
позиция : абсолютный ;
верно : 15 пикселей ;
вершина : 15 пикселей ;
z-индекс : 2 ;
}Здесь:
- “ непрозрачность ” определяет уровень прозрачности элемента.
- “ позиция ' со значением ' абсолютный » устанавливает позицию элемента относительно его родительской позиции.
- “ верно ' и ' вершина ” установите пробел справа и сверху от кнопки закрытия.
- “ z-индекс ” указывает порядок элементов в стеке. Более высокий порядок стека выводит элемент на передний план.
Шаг 8: Стиль класса «modal-body»
.main-modal-контейнер .modal-диалог .modal-контент .modal-тело {
набивка : 0 !важный ;
}Пространство вокруг всего модального тела регулируется с помощью CSS». набивка ' свойство. Более того, « !важный Ключевое слово используется для установки важности элемента.
Шаг 9: Стиль элемента «img»
.main-modal-контейнер .modal-диалог .modal-контент .modal-тело .modal-изображение изображение {
высота : 100% ;
ширина : 100% ;
}Шаг 10: Стиль класса «контент»
.main-modal-контейнер .modal-диалог .modal-контент .modal-тело .содержание {
набивка : 35 пикселей 30 пикселей ;
}С помощью « набивка ', пространство добавляется вокруг ' содержание » содержание класса.
Шаг 11: Стиль класса «title»
.main-modal-контейнер .modal-диалог .modal-контент .modal-тело .заголовок {
цвет : #fb3640 ;
семейство шрифтов : «Сакраменто» , скоропись ;
размер шрифта : 35 пикселей ;
}Здесь:
- “ семейство шрифтов ” определяет стиль шрифта.
- “ размер шрифта » устанавливает размер шрифта.
Шаг 12: Стиль класса «подзаголовок»
.main-modal-контейнер .modal-диалог .modal-контент .modal-тело .подзаголовок {
вес шрифта : 600 ;
преобразование текста : верхний регистр ;
допуск : 0 0 20 пикселей ;
отображать : блокировать ;
}Согласно данному фрагменту кода:
- “ вес шрифта » устанавливает толщину шрифта.
- “ преобразование текста » устанавливает регистр шрифта.
Выход
Вот как вы можете стилизовать модальное окно Bootstrap.
Заключение
Чтобы стилизовать модальное окно Bootstrap, сначала добавьте кнопку, которая активирует модальное окно. Затем создайте модальное окно, используя элементы HTML. После этого добавьте несколько свойств CSS, в том числе « набивка », « допуск », « цвет », « переход ”, и многое другое для стилизации модального окна. Более конкретно, « кубический Безье ” используется для применения эффекта перехода в виде четырехточечной кривой в модальном окне. В этом посте объясняется процедура стилизации модального окна Bootstrap.