Тази статия ще ви инструктира:
- Как да направите бутони в Bootstrap?
- Как да създадете контурни бутони в Bootstrap?
- Как да настроите размерите на бутоните на Bootstrap?
- Как да направите бутон на ниво блок в Bootstrap?
- Как да създадете бутони за активно състояние в Bootstrap?
- Как да създадете бутони за състояние с увреждания в Bootstrap?
Как да направите бутони в Bootstrap?
The Bootstrap “ btn ” клас се използва за създаване на бутони. За да добавите стилизирани бутони, можете да използвате „ btn ” клас с цветовия клас, като например „ btn-успех ”, за да създадете зелен бутон.
В HTML „ <бутон> ”, “ ', и ' <вход> ” етикети с типа „ бутон ” се използват за създаване на бутони. „ btn ” има предварително дефиниран стил, който добавя основен стил към елементите на бутоните.
За ясна концепция вижте примера по-долу.
Пример
В HTML файла следвайте стъпките за създаване на бутони с помощта на различни тагове:
- Добавете „ <бутон> ' и ' ' елементи и им присвоете ' btn ' и ' btn-първичен ” класове.
- След това добавете „ <вход> ” таг с типа „ бутон ”. Задайте му „ btn ' и ' btn-успех ” за оформяне като първите два бутона като сини, а третият като зелен:
< а клас = 'btn btn-основен' href = '#' > Отворете < / а >
< вход Тип = 'бутон' клас = 'btn btn-успех' стойност = 'Търсене' >
Изход
Как да създадете контурни бутони в Bootstrap?
За да добавите очертания на бутони, Bootstrap “ btn-outline-* ” се използва клас. В неговия синтаксис, „ * ” тук представлява цвета на контура. Например, ' btn-очертание-опасност ” поставя червения контур, “ btn-очертание-първичен ” задава синия контур и др.
Анализирайте кода, даден по-долу:
< бутон Тип = 'бутон' клас = 'btn btn-outline-primary' >Напред< / бутон >< бутон Тип = 'бутон' клас = 'btn btn-outline-danger' >Отказ< / бутон >
< бутон Тип = 'бутон' клас = 'btn btn-outline-success' >Успех< / бутон >
Може да се забележи, че „ Следващия ' има син контур, бутонът ' Отказ “ с червен контур и „ Успех Бутонът е оформен със зелен контур:
Как да настроите размерите на бутоните на Bootstrap?
Някои класове на Bootstrap се прилагат за регулиране на размерите на бутоните, като например:
- “ btn-lg ” се прилага клас за създаване на голям бутон. Този клас може да увеличи размера на шрифта и подложката.
- “ btn-md ” създава бутон със среден размер.
- “ btn-sm ” създава малък бутон.
Пример
Сега ще създадем три бутона с различни размери и разбираеми имена:
< бутон Тип = 'бутон' клас = 'btn btn-вторичен btn-lg' >Голям< / бутон >< бутон Тип = 'бутон' клас = 'btn btn-предупреждение btn-md' >среден< / бутон >
< бутон Тип = 'бутон' клас = 'btn btn-опасност btn-sm' >Малък< / бутон >
Изход
Как да направите бутон на ниво блок в Bootstrap?
Бутоните на ниво блок са тези, които държат размера на пълната ширина. За да създадете бутоните на ниво блок, „ btn-блок ” се използва както следва
< бутон Тип = 'бутон' клас = 'btn btn-предупреждение btn-блок' > бутон< / бутон >< бутон Тип = 'бутон' клас = 'btn btn-вторичен btn-блок' >бутон< / бутон >
Изход
Как да създадете бутони за активно състояние в Bootstrap?
Бутоните за активно състояние се отнасят за бутоните, които са активни в момента. Тези бутони са малко по-тъмни от нормалното. За да създадете такива бутони, Bootstrap “ активен ” се използва клас.
Пример
Кодът по-долу създава два бутона. Първият е в нормално състояние, докато другият се прилага с „ активен ” клас:
< бутон Тип = 'бутон' клас = 'btn btn-успех' >Успех< / бутон >< бутон Тип = 'бутон' клас = 'btn btn-success активен' >Успех< / бутон >
Изход
Как да създадете бутони за състояние с увреждания в Bootstrap?
Деактивираните бутони за състояние се отнасят до бутоните, върху които не може да се кликне и не могат да се използват. В Bootstrap, „ хора с увреждания ” се използва за създаване на бутон за забранено състояние. „ хора с увреждания ” може да се използва и за тази цел.
Пример
Вижте примера по-долу:
- Първият бутон не е в забранено състояние.
- Вторият използва „ хора с увреждания ”, за да създадете бутон за забранено състояние.
- Третият използва „ хора с увреждания ' атрибут:
< бутон Тип = 'бутон' клас = 'btn btn-success деактивиран' >Успех< / бутон >
< бутон Тип = 'бутон' клас = 'btn btn-успех' деактивирано>Успех< / бутон >
Изход
Покрихме различни аспекти, свързани с бутоните Bootstrap и техния стил в CSS.
Заключение
„ btn ” се използва за създаване на бутони Bootstrap с прост дизайн. За да създадете цветни и очертани бутони, „ btn-* ' и ' btn-outline-* ” се използват класове, където „ * ” символизира всеки цветови клас. Например, ' btn-предупреждение ' създава жълт бутон, ' btn-outline-warning ” създава бутон с жълти контури и много други. За да направите бутоните активни или деактивирани, се прилагат съответно класовете „active“ и „disabled“. Тази публикация предоставя изчерпателно ръководство за бутоните на Bootstrap.