Овај чланак ће покрити следеће перспективе за демонстрирање употребе Боотстрап беџева:
- Како користити Боотстрап значку за додатне информације?
- Како користити Боотстрап значку за контекстуалне информације?
- Како додати прилагођене стилове у Боотстрап значку?
- Како додати иконе на Боотстрап значку?
- Како повезати Боотстрап значку са другим извором?
- Како направити значке заокружене?
- Како користити Боотстрап значку као бројач?
Шта су Боотстрап значке?
Значке су основне компоненте које се користе за приказивање индикатора. На пример, могу се користити као нумерички бројач за приказ броја обавештења или порука:
Такође се могу користити за приказ додатних информација, као што је приказано на датој слици:
Како користити Боотстрап значку за додатне информације?
Боотстрап значке се могу додати у ХТМЛ елементе да би се користиле као додатне информације. Погледајте пример који је доле наведен за демонстрацију.
Пример
Да бисте користили Боотстрап значку за додатне информације, прво:
- Додати ' <х5> ' и ' <х6> ” елементи.
- Поставите ' <спан> ” елемент са „ значка ' и ' значка-* ” класе. Класа „значка-*“ се односи на значку са наведеном бојом:
< х6 > стипендије < спан класа = 'значка значка-средња' > Нова < / спан >< / х6 >
Може се приметити да су две значке додате релевантним насловима:
Како користити Боотстрап значку за контекстуалне информације?
Боотстрап значке се такође могу користити за пружање контекстуалних информација попут „ значка-опасност ” приказује значку црвеном бојом и може се користити за приказивање неких неуспешних порука као што су отказивање, неважеће или више. „ значка-успех ” се користи тамо где желимо да прикажемо неку поруку о успеху.
Пример
Погледајте дати код да бисте разумели разматрани сценарио:
< спан класа = 'значка значка-опасност' >Налог није верификован< / спан >< спан класа = 'беџ значка-инфо' >ово је значка< / спан >
< спан класа = 'значка значка-упозорење' >Налог на чекању за одобрење< / спан >
< спан класа = 'значка значка-успех' >Налог је верификован< / спан >
Излаз
Како додати прилагођене стилове у Боотстрап значку?
Такође можете да користите ЦСС да додате неки јединствени стил Боотстрап значкама. За боље разумевање, класа са именом „ обичај ” се додаје у оквиру „ <спан> ” елемент. Затим се примењују следеће особине:
< спан класа = 'значка значка - обичај опасности' >Налог није верификован < / спан >< спан класа = 'беџ значка-информације прилагођено' >Ово је значка< / спан >
< спан класа = „обичајни знак упозорења за значку“ >Налог на чекању за одобрење< / спан >
< спан класа = 'прилагођена значка успеха' >Налог је верификован< / спан >
Стилска класа „прилагођена“.
.обичај {фонт-сизе : 18пк ;
фонт-веигхт : 100 ;
словни размак : 1пк ;
паддинг : 8пк 15пк ;
}
„ .обичај ” се користи за приступ „ обичај ' класа. На њега се примењују следећа својства:
- “ фонт-сизе ” прилагођава величину фонта.
- “ фонт-веигхт ” наводи дебљину фонта.
- “ словни размак ” додаје размак између слова.
- “ паддинг ” пружа простор око садржаја елемента.
Излаз
Како додати иконе на Боотстрап значку?
Беџевима можемо додати и различите иконе. Да бисте то учинили, постоји неколико класа које се могу користити за овај узрок. За више информација посетите Фонт Авесоме веб сајт.
Пример
У ХТМЛ, додајте „ <спан> ” елемент. Унутар овог елемента поставите инлине елемент „<и>” или „<спан>” да бисте уметнули класу икона:
< спан класа = 'прилагођена значка-опасност' > Налог није верификован< и класа = 'далеко фа-пута-круг' >< / и >
< / спан >
< спан класа = 'прилагођена значка успеха' > Налог је верификован
< и класа = 'фас фа-усер-цхецк' >< / и >
< / спан >
Излаз
Како повезати Боотстрап значку са другим извором?
Да бисте омогућили кликање на Боотстрап значке, поставите „ значка ” класе у ХТМЛ-у “ <а> ” означите и наведите референцу повезане странице у „ хреф ” атрибут:
< а хреф = '#' класа = 'значка значка - обичај опасности' >Откажи< / а >< а хреф = '#' класа = 'беџ значка-информације прилагођено' >Пошаљи< / а >
Излаз
Како направити значке заобљеним?
Да би ивице значке биле заобљеније, додајте класу „ значка-пилула ”. Ова класа подржава већи „ граница-радијус “ и хоризонтално “ паддинг ” својства:
< спан класа = 'значка значка-пилула значка-опасност обичај' >Налог није верификован < / спан >< спан класа = 'значка значка-пилула значка-упозорење обичај' >Налог на чекању за одобрење< / спан >
< спан класа = 'значка значка-пилула значка-успех обичај' >Налог је верификован < / спан >
Излаз
Како користити Боотстрап значку као бројач?
Да бисте креирали дугме са бројачем, додајте ХТМЛ “ <дугме> ” ознака са типом “ дугме ” и доделите му класе дугмади „ бтн ' и ' бтн-суццесс ”. Затим укључите „ <спан> ” елемент за постављање бројача:
< дугме тип = 'дугме' класа = 'бтн бтн-успех' >Обавештења < спан класа = 'светло за значку' > 4 < / спан >
< / дугме >
Излаз
То је било све о Боотстрап значкама и њиховим релевантним ознакама у Боотстрапу.
Закључак
Боотстрап” значка ” класа се користи за додавање беџева на веб локацију. На пример, класе попут „ значка-опасност ”, “ значка-инфо “, и више се може користити за додавање контекстуалних информација значкама као њихове ознаке. Неке класе се примењују за додавање икона значкама, као што је „ далеко фа-времена-круг ” да бисте поставили икону укрштеног круга. Овај пост је пружио свеобухватан водич о Боотстрап значкама и ознакама.