Acest articol vă va instrui:
- Cum să faci butoane în Bootstrap?
- Cum se creează butoane de contur în Bootstrap?
- Cum se ajustează dimensiunile butoanelor Bootstrap?
- Cum să faci un buton la nivel de bloc în Bootstrap?
- Cum se creează butoane de stare active în Bootstrap?
- Cum se creează butoane de stare dezactivate în Bootstrap?
Cum să faci butoane în Bootstrap?
The Bootstrap” btn ” este folosită pentru a crea butoane. Pentru a adăuga butoane stilizate, puteți folosi butonul „ btn ” cu clasa de culoare, cum ar fi “ btn-succes ” pentru a crea un buton verde.
În HTML, „
Pentru un concept clar, consultați exemplul de mai jos.
Exemplu
În fișierul HTML, urmați pașii pentru a crea butoane folosind diferite etichete:
- Adăuga '
' și ' ” elemente și atribuiți-le „ btn ' și ' btn-primar ' clase. - Apoi, adăugați un „ „etichetă cu tipul „ buton ”. Atribuiți-i „ btn ' și ' btn-succes ” pentru a aranja primii doi nasturi ca albastru, iar al treilea ca verde:
< A clasă = „btn btn-primar” href = '#' > Deschis < / A >
< intrare tip = 'buton' clasă = 'btn btn-succes' valoare = 'Căutare' >
Ieșire
Cum se creează butoane de contur în Bootstrap?
Pentru a adăuga contururi de buton, bootstrap „ btn-outline-* ” se folosește clasa. În sintaxa sa,“ * ” aici reprezintă culoarea conturului. De exemplu, ' btn-contur-pericol ” plasează conturul roșu, ” btn-contur-primar ” stabilește conturul albastru și nu numai.
Analizați codul de mai jos:
< buton tip = 'buton' clasă = „btn btn-outline-primary” >Următorul< / buton >< buton tip = 'buton' clasă = „btn btn-outline-danger” >Anulează< / buton >
< buton tip = 'buton' clasă = „btn btn-outline-succes” >Succes< / buton >
Se poate observa că „ Următorul butonul ” are un contur albastru, butonul “ Anulare butonul ” cu contur roșu și butonul ” Succes Butonul ” a fost modelat cu un contur verde:
Cum se ajustează dimensiunile butoanelor Bootstrap?
Unele clase Bootstrap sunt aplicate pentru a ajusta dimensiunile butoanelor, cum ar fi:
- „ btn-lg ” se aplică pentru a crea un buton mare. Această clasă poate crește dimensiunea fontului și umplutura.
- „ btn-md ” creează un buton de mărime medie.
- „ btn-sm ” creează un mic buton.
Exemplu
Acum, vom crea trei butoane cu dimensiuni diferite și nume care se explică de la sine:
< buton tip = 'buton' clasă = „btn btn-secundar btn-lg” >Mare< / buton >< buton tip = 'buton' clasă = „btn btn-warning btn-md” >mediu< / buton >
< buton tip = 'buton' clasă = „btn btn-danger btn-sm” >Mic< / buton >
Ieșire
Cum să faci un buton la nivel de bloc în Bootstrap?
Butoanele la nivel de bloc sunt cele care dețin dimensiunea pe lățime completă. Pentru a crea butoanele la nivel de bloc, „ btn-bloc ” clasa este utilizată după cum urmează
< buton tip = 'buton' clasă = „btn btn-warning btn-block” > butonul < / buton >< buton tip = 'buton' clasă = „btn btn-secundar btn-bloc” >butonul< / buton >
Ieșire
Cum se creează butoane de stare active în Bootstrap?
Butoanele de stare activă se referă la butoanele care sunt active în prezent. Aceste butoane sunt puțin mai întunecate decât în mod normal. Pentru a crea astfel de butoane, bootstrap „ activ ” se folosește clasa.
Exemplu
Codul de mai jos creează două butoane. Prima este în stare normală, în timp ce cealaltă este aplicată cu „ activ ” clasa:
< buton tip = 'buton' clasă = 'btn btn-succes' >Succes< / buton >< buton tip = 'buton' clasă = „btn btn-success activ” >Succes< / buton >
Ieșire
Cum se creează butoane de stare dezactivate în Bootstrap?
Butoanele de stare dezactivate se referă la butoanele care nu se pot face clic și nu pot fi utilizate. În Bootstrap, „ dezactivat ” este utilizată pentru a crea un buton de stare dezactivat. „ dezactivat ” atributul poate fi folosit și în acest scop.
Exemplu
Consultați exemplul oferit mai jos:
- Primul buton nu este într-o stare dezactivată.
- Al doilea folosește „ dezactivat ” pentru a crea un buton de stare dezactivat.
- Al treilea folosește „ dezactivat ” atribut:
< buton tip = 'buton' clasă = „btn btn-success dezactivat” >Succes< / buton >
< buton tip = 'buton' clasă = 'btn btn-succes' disabled>Succes< / buton >
Ieșire
Am acoperit diferite aspecte legate de butoanele Bootstrap și stilul lor în CSS.
Concluzie
„ btn ” este utilizată pentru a crea butoane Bootstrap cu un design simplu. Pentru a crea butoane colorate și conturate, „ btn-* ' și ' btn-outline-* clasele sunt utilizate în cazul în care „ * ” simbolizează orice clasă de culoare. De exemplu, ' btn-avertisment „creează un buton galben, „ btn-outline-warning ” creează un buton galben conturat și multe altele. Pentru a activa sau dezactiva butoanele, se aplică clasele „activ” și respectiv „dezactivat”. Această postare a oferit un ghid cuprinzător despre butoanele Bootstrap.