Това описание ще опише как да стилизирате модала Bootstrap.
Как да стилизирате модала Bootstrap?
За да научите как да стилизирате модала Bootstrap, следвайте стъпките по-долу.
Стъпка 1: Създайте HTML файл
Първо създайте модал, като следвате инструкциите, дадени по-долу:
- Създавам ' 'контейнер и му присвоете клас' основен-модален-контейнер ”.
- След това добавете бутон, който ще задейства модалния прозорец. Задайте му „ btn ”, “ btn-първичен ', и ' шоу-модал ” класове. Задайте атрибутите на данните „ превключване на данни ' със стойността ' модален “ и „ data-target ” с „ #myModal ” стойност. Този идентификатор сочи към идентификатора на модалния прозорец.
- След това създайте модалния прозорец. За да направите това, добавете „
' елемент и го присвоете ' модален ' и ' избледняват ” класове и задайте id.- Добави '
” за диалоговия прозорец на модала и му присвоете „ модално-диалог ” клас.- След това посочете съдържанието на модала в „
“ и му присвоете класа „ модално съдържание ”.- Направете бутон за затваряне с класа „ близо ”. „ отхвърляне на данни ” атрибутът се използва за затваряне на модалния прозорец.
- След това посочете модалното тяло с класовете „ модално тяло ' и ' ред ”. Вътре в него вземете колона от 6 решетки за изображението и 6 за съдържанието.
- Изображението е вградено с помощта на „
” таг.
- След това вътре в „
' елемент с ' съдържание ” добавете заглавие, подзаглавие и описание.- След това поставете бутон с Bootstrap “ btn ”, “ btn-опасност ', и ' p-2 ” класове:
< див клас = 'основен-модален-контейнер' >
< бутон клас = 'btn btn-основен шоу-модал' превключване на данни = 'модален' данни- мишена = '#myModal' > изглед модален < / бутон >
< див клас = 'модално избледняване' документ за самоличност = 'myModal' >
< див клас = 'модален диалог' >
< див клас = 'модално съдържание' >
< бутон клас = 'близо' отхвърляне на данни = 'модален' >
< педя > × < / педя >< / бутон >
< див клас = 'модален ред на тялото' >
< див клас = 'col-sm-6 модално изображение' >< img src = '/img/clothes.jpg' >< / див >
< див клас = 'съдържание col-sm-6' >
< h3 клас = 'заглавие' > Специална оферта < / h3 >
< педя клас = 'подзаглавие' > 20% отстъпка за вкъщи и доставка < / педя >
< стр клас = 'описание' > Най-качествени ризи. Всеки размер е наличен. Лесно се пере. < / стр >
< бутон клас = 'btn btn-danger p-2' > ВИЖ ПОВЕЧЕ < / бутон >
< / див >
< / див >
< / див >
< / див >
< / див >
< / див >Стъпка 2: Стилизирайте класа „main-modal-container“.
Целият контейнер е стилизиран с CSS ' шрифтово семейство ' Имот:
.основен-модален-контейнер {
шрифтово семейство : 'Попинз' , без сериф ;
}Стъпка 3: Стил 'показен модален' клас
„ шоу-модал ” класът е деклариран със следните свойства:
.основен-модален-контейнер .покажи-модален {
цвят : #Ф ф ф ;
Цвят на фона : #3a97c9 ;
преобразуване на текст : капитализирам ;
подплата : 10px 15px ;
марж : 80 пиксела Автоматичен 0 ;
дисплей : блок ;
}Тук:
- “ цвят ” задава цвета на шрифта.
- “ Цвят на фона ” задава цвета на фона на елемента.
- “ преобразуване на текст ” изписва текста с главни букви.
- “ подплата ” регулира пространството около съдържанието на елемента.
- “ марж ” създава пространство около елемента.
- “ дисплей ' със стойността ' блок ” задава ширината на елемента на 100%.
Стъпка 4: Стилизирайте клас „modal-dialog“ на Fade
.модален .избледнявам .modal-dialog {
трансформирам : мащаб ( 0 ) ;
преход : всичко 450 ms кубичен безие ( .47 , 1.64 , .41 , .8 ) ;
}Когато модалът изчезне, следните свойства на CSS се прилагат към „ модално-диалог ” клас:
- “ трансформирам ” собственост с „ мащаб() ” увеличава или намалява размера на елемента вертикално или хоризонтално.
- “ преход ” постепенно премества елемента. „ cubic-bezier() ” прилага кубичната крива на Безие. Определя се от четири точки.
Стъпка 5: Стил „модален диалог“ Клас на показване
.модален .покажи .modal-dialog {
трансформирам : мащаб ( 1 ) ;
}CSS “ трансформирам ' свойство със стойност ' мащаб (1) ” увеличава размера на диалоговия прозорец.
Стъпка 6: Стилизирайте клас „модално съдържание“.
.основен-модален-контейнер .modal-dialog .modal-content {
граница-радиус : 30px ;
граница : нито един ;
препълване : скрит ;
}„ модално съдържание ” е украсен със следните свойства:
- “ граница-радиус ” заобля краищата на елемента.
- “ граница ' със стойността ' нито един ” скрива границата.
- “ препълване ” контролира потока на съдържанието.
Стъпка 7: Оформете „близък“ клас
.основен-модален-контейнер .modal-dialog .modal-content .близо {
цвят : #747474 ;
Цвят на фона : rgba ( 255 , 255 , 255 , 0,5 ) ;
височина : 27px ;
ширина : 27px ;
подплата : 0 ;
непрозрачност : 1 ;
препълване : скрит ;
позиция : абсолютен ;
точно : 15px ;
Горна част : 15px ;
z-индекс : 2 ;
}Тук:
- “ непрозрачност ” определя нивото на прозрачност на елемента.
- “ позиция ' със стойността ' абсолютен ” задава позицията на елемента спрямо неговата родителска позиция.
- “ точно ' и ' Горна част ” задайте място отдясно и отгоре на бутона за затваряне.
- “ z-индекс ” определя реда на стека на елемента. По-големият ред на стека извежда елемента отпред.
Стъпка 8: Стилизирайте клас „модално тяло“.
.основен-модален-контейнер .modal-dialog .modal-content .modal-body {
подплата : 0 !важно ;
}Пространството около цялото модално тяло се коригира от CSS “ подплата ' Имот. Освен това „ !важно ” се използва ключова дума за задаване на важността на елемента.
Стъпка 9: Стил на елемента „img“.
.основен-модален-контейнер .modal-dialog .modal-content .modal-body .modal-образ img {
височина : 100% ;
ширина : 100% ;
}Стъпка 10: Стилизирайте класа „съдържание“.
.основен-модален-контейнер .modal-dialog .modal-content .modal-body .съдържание {
подплата : 35 пиксела 30px ;
}С помощта на „ подплата ”, интервалът се добавя около „ съдържание ” съдържанието на класа.
Стъпка 11: Стилизирайте клас „title“.
.основен-модален-контейнер .modal-dialog .modal-content .modal-body .заглавие {
цвят : #fb3640 ;
шрифтово семейство : 'Сакраменто' , курсив ;
размер на шрифта : 35 пиксела ;
}Тук:
- “ шрифтово семейство ” определя стила на шрифта.
- “ размер на шрифта ” задава размера на шрифта.
Стъпка 12: Оформете клас „подзаглавие“.
.основен-модален-контейнер .modal-dialog .modal-content .modal-body .подзаглавие {
тегло на шрифта : 600 ;
преобразуване на текст : Главна буква ;
марж : 0 0 20px ;
дисплей : блок ;
}Според дадения кодов фрагмент:
- “ тегло на шрифта ” задава дебелината на шрифта.
- “ преобразуване на текст ” задава големината на шрифта.
Изход
Ето как можете да стилизирате модала Bootstrap.
Заключение
За да оформите модалния прозорец на Bootstrap, първо добавете бутона, който ще задейства модала. След това направете модалния прозорец с помощта на HTML елементи. След това добавете няколко CSS свойства, включително „ подплата ”, “ марж ”, “ цвят ”, “ преход “, и много други за стилизиране на модалния прозорец. По-конкретно, „ кубичен безие ” се използва за прилагане на ефекта на преход в крива с четири точки върху модалния прозорец. Тази публикация обяснява процедурата за стилизиране на модала Bootstrap.