Painikkeiden Tyylien ja Kokojen Mukauttaminen
Bootstrap tarjoaa useita erilaisia painiketyylejä ja -kokoja, joita voidaan käyttää erilaisiin suunnittelutarpeisiin ja tilanteisiin.
Yleiset painikeluokat
Peruspainike
btn-luokka toimii painikkeiden perustyyliluokkana. Se tarjoaa olennaiset painikkeen tyylit, kuten täytteen, reunuksen ja hover-efektit.
Painiketyylit
Bootstrap tarjoaa useita ennalta määriteltyjä painiketyylejä, joita voidaan käyttää tietyillä luokilla. Näihin tyyleihin kuuluvat:
btn-primary: Lisää painikkeeseen ensisijaisen värin, jota käytetään yleensä päätoiminnoissa;btn-secondary: Lisää painikkeeseen toissijaisen värin, jota käytetään usein toissijaisissa toiminnoissa;btn-success: Antaa painikkeelle onnistumista kuvaavan värin, jota käytetään positiivisissa toiminnoissa;btn-danger: Tarjoaa värin, joka viestii vaarasta tai kriittisistä toiminnoista;btn-warning: Lisää painikkeeseen varoitusta tai huolellisuutta kuvaavan värin;btn-info: Antaa painikkeelle informatiivisen viestin välittävän värin;btn-light: Lisää painikkeeseen vaalean värimaailman, joka sopii vaaleille taustoille;btn-dark: Lisää painikkeeseen tumman värimaailman, joka sopii tummille taustoille;btn-link: Näyttää painikkeen yksinkertaisena linkkinä ilman lisätyylejä, usein käytetty rivitoiminnoissa.
index.html
Painikkeen koot
Painikkeiden kokoa voidaan säätää erityisillä luokilla.
btn-lg: Tämä luokka suurentaa painiketta oletuskokoa suuremmaksi. Sitä käytetään yleensä ensisijaisissa tai korostetuissa painikkeissa, jotka vaativat enemmän huomiota;btn-sm: Tämä luokka pienentää painiketta oletuskokoa pienemmäksi. Sitä käytetään usein toissijaisissa tai apupainikkeissa, jotka eivät vaadi yhtä paljon huomiota.
index.html
Poistettu käytöstä -tila
disabled-attribuutin lisääminen mihin tahansa <button>-elementtiin tekee siitä passiivisen. Poistetut käytöstä olevat painikkeet käyttävät ominaisuutta pointer-events: none, mikä estää hover- ja aktiivisten tilojen aktivoitumisen.
index.html
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me examples of how to use these button classes in HTML?
What are some best practices for choosing button styles and sizes?
How do I customize Bootstrap buttons beyond the default classes?
Awesome!
Completion rate improved to 3.23Painikkeiden Tyylien ja Kokojen Mukauttaminen
Pyyhkäise näyttääksesi valikon
Bootstrap tarjoaa useita erilaisia painiketyylejä ja -kokoja, joita voidaan käyttää erilaisiin suunnittelutarpeisiin ja tilanteisiin.
Yleiset painikeluokat
Peruspainike
btn-luokka toimii painikkeiden perustyyliluokkana. Se tarjoaa olennaiset painikkeen tyylit, kuten täytteen, reunuksen ja hover-efektit.
Painiketyylit
Bootstrap tarjoaa useita ennalta määriteltyjä painiketyylejä, joita voidaan käyttää tietyillä luokilla. Näihin tyyleihin kuuluvat:
btn-primary: Lisää painikkeeseen ensisijaisen värin, jota käytetään yleensä päätoiminnoissa;btn-secondary: Lisää painikkeeseen toissijaisen värin, jota käytetään usein toissijaisissa toiminnoissa;btn-success: Antaa painikkeelle onnistumista kuvaavan värin, jota käytetään positiivisissa toiminnoissa;btn-danger: Tarjoaa värin, joka viestii vaarasta tai kriittisistä toiminnoista;btn-warning: Lisää painikkeeseen varoitusta tai huolellisuutta kuvaavan värin;btn-info: Antaa painikkeelle informatiivisen viestin välittävän värin;btn-light: Lisää painikkeeseen vaalean värimaailman, joka sopii vaaleille taustoille;btn-dark: Lisää painikkeeseen tumman värimaailman, joka sopii tummille taustoille;btn-link: Näyttää painikkeen yksinkertaisena linkkinä ilman lisätyylejä, usein käytetty rivitoiminnoissa.
index.html
Painikkeen koot
Painikkeiden kokoa voidaan säätää erityisillä luokilla.
btn-lg: Tämä luokka suurentaa painiketta oletuskokoa suuremmaksi. Sitä käytetään yleensä ensisijaisissa tai korostetuissa painikkeissa, jotka vaativat enemmän huomiota;btn-sm: Tämä luokka pienentää painiketta oletuskokoa pienemmäksi. Sitä käytetään usein toissijaisissa tai apupainikkeissa, jotka eivät vaadi yhtä paljon huomiota.
index.html
Poistettu käytöstä -tila
disabled-attribuutin lisääminen mihin tahansa <button>-elementtiin tekee siitä passiivisen. Poistetut käytöstä olevat painikkeet käyttävät ominaisuutta pointer-events: none, mikä estää hover- ja aktiivisten tilojen aktivoitumisen.
index.html
Kiitos palautteestasi!
