Šis straipsnis jums pasakys:
- Kaip sukurti mygtukus „Bootstrap“?
- Kaip sukurti kontūro mygtukus „Bootstrap“?
- Kaip sureguliuoti įkrovos mygtukų dydžius?
- Kaip sukurti bloko lygio mygtuką „Bootstrap“?
- Kaip sukurti aktyvios būsenos mygtukus „Bootstrap“?
- Kaip sukurti išjungtus būsenos mygtukus „Bootstrap“?
Kaip sukurti mygtukus „Bootstrap“?
„Bootstrap“ btn “ klasė naudojama mygtukams kurti. Norėdami pridėti stiliaus mygtukus, galite naudoti btn “ klasė su spalvų klase, pvz. btn-sėkmė “, kad sukurtumėte žalią mygtuką.
HTML, „
Norėdami gauti aiškią koncepciją, peržiūrėkite toliau pateiktą pavyzdį.
Pavyzdys
HTML faile atlikite veiksmus, kad sukurtumėte mygtukus naudodami skirtingas žymas:
- Papildyti '
“ ir „ elementų ir priskirkite juos btn “ ir „ btn-pirminė “ klases. - Tada pridėkite „ <įvestis> 'žyma su tipu ' mygtuką “. Priskirkite jam „ btn “ ir „ btn-sėkmė “, kad pirmieji du mygtukai būtų mėlyni, o trečiasis – žalias:
< a klasė = „btn btn-primary“ href = '#' > Atviras < / a >
< įvestis tipo = 'mygtukas' klasė = 'btn btn-sėkmė' vertė = 'Paieška' >
Išvestis
Kaip sukurti kontūro mygtukus „Bootstrap“?
Norėdami pridėti mygtukų kontūrus, „Bootstrap“ btn-outline-* “ naudojama klasė. Savo sintaksėje ' * “ čia reiškia kontūro spalvą. Pavyzdžiui, ' btn-outline-pavojus “ nubrėžia raudoną kontūrą, “ btn-outline-primary “ nustato mėlyną kontūrą ir kt.
Išanalizuokite toliau pateiktą kodą:
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-outline-primary' >Kitas< / mygtuką >< mygtuką tipo = 'mygtukas' klasė = 'btn btn-outline-danger' >Atšaukti< / mygtuką >
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-outline-success' >Sėkmės< / mygtuką >
Galima pastebėti, kad „ Kitas mygtukas turi mėlyną kontūrą, Atšaukti “ mygtuką su raudonu kontūru ir „ Sėkmė “ mygtukas buvo su žaliu kontūru:
Kaip sureguliuoti įkrovos mygtukų dydžius?
Kai kurios „Bootstrap“ klasės taikomos mygtukų dydžiams reguliuoti, pavyzdžiui:
- “ btn-lg “ klasė taikoma dideliam mygtukui sukurti. Ši klasė gali padidinti šrifto dydį ir užpildymą.
- “ btn-md “ sukuria vidutinio dydžio mygtuką.
- “ btn-sm “ sukuria mažą mygtuką.
Pavyzdys
Dabar sukursime tris skirtingų dydžių ir savaime suprantamų pavadinimų mygtukus:
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-secondary btn-lg' >Didelis< / mygtuką >< mygtuką tipo = 'mygtukas' klasė = 'btn btn-warning btn-md' >vidutinis< / mygtuką >
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-danger btn-sm' >Mažas< / mygtuką >
Išvestis
Kaip sukurti bloko lygio mygtuką „Bootstrap“?
Bloko lygio mygtukai yra tie, kurie palaiko viso pločio dydį. Norėdami sukurti bloko lygio mygtukus, „ btn blokas “ klasė naudojama taip
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-warning btn-block' > mygtukas< / mygtuką >< mygtuką tipo = 'mygtukas' klasė = „btn btn-antrinis btn-blokas“ >mygtukas< / mygtuką >
Išvestis
Kaip sukurti aktyvios būsenos mygtukus „Bootstrap“?
Aktyvios būsenos mygtukai nurodo mygtukus, kurie šiuo metu yra aktyvūs. Šie mygtukai yra šiek tiek tamsesni nei įprasti. Norėdami sukurti tokius mygtukus, „Bootstrap“ aktyvus “ klasė yra naudojama.
Pavyzdys
Žemiau pateiktas kodas sukuria du mygtukus. Pirmasis yra normalios būsenos, o kitas taikomas su ' aktyvus ' klasė:
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-sėkmė' >Sėkmės< / mygtuką >< mygtuką tipo = 'mygtukas' klasė = „btn btn-success active“ >Sėkmės< / mygtuką >
Išvestis
Kaip sukurti išjungtus būsenos mygtukus „Bootstrap“?
Išjungtos būsenos mygtukai reiškia mygtukus, kurių negalima spustelėti ir kurių negalima naudoti. „Bootstrap“ neįgalus “ klasė naudojama norint sukurti išjungtos būsenos mygtuką. „ neįgalus “ atributas taip pat gali būti naudojamas šiam tikslui.
Pavyzdys
Peržiūrėkite toliau pateiktą pavyzdį:
- Pirmasis mygtukas nėra išjungtas.
- Antrasis naudoja ' neįgalus “ klasėje, kad sukurtumėte išjungtos būsenos mygtuką.
- Trečiasis naudoja „ neįgalus “ atributas:
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-success išjungtas' >Sėkmės< / mygtuką >
< mygtuką tipo = 'mygtukas' klasė = 'btn btn-sėkmė' išjungta>Sėkmė< / mygtuką >
Išvestis
Apžvelgėme įvairius aspektus, susijusius su „Bootstrap“ mygtukais ir jų stiliumi CSS.
Išvada
„ btn “ klasė naudojama paprasto dizaino Bootstrap mygtukams sukurti. Norėdami sukurti spalvotus ir kontūro mygtukus, „ btn-* “ ir „ btn-outline-* “ klasės naudojamos ten, kur “ * “ simbolizuoja bet kurią spalvų klasę. Pavyzdžiui, ' btn įspėjimas “ sukuria geltoną mygtuką “ btn-outline-warning “ sukuria geltonos spalvos mygtuką ir daug daugiau. Kad mygtukai būtų aktyvūs arba išjungti, atitinkamai taikomos „aktyvios“ ir „išjungtos“ klasės. Šiame įraše buvo pateiktas išsamus „Bootstrap“ mygtukų vadovas.