See artikkel juhendab teid:
- Kuidas Bootstrapis nuppe teha?
- Kuidas luua Bootstrapis kontuurinuppe?
- Kuidas reguleerida Bootstrapi nuppude suurust?
- Kuidas teha Bootstrapis plokitaseme nuppu?
- Kuidas luua Bootstrapis aktiivseid olekunuppe?
- Kuidas luua Bootstrapis keelatud oleku nuppe?
Kuidas Bootstrapis nuppe teha?
Bootstrap' btn ” klassi kasutatakse nuppude loomiseks. Stiiliga nuppude lisamiseks võite kasutada btn ” klass värviklassiga, näiteks „ btn-edu ” rohelise nupu loomiseks.
HTML-is on '
Selge kontseptsiooni saamiseks vaadake allolevat näidet.
Näide
HTML-failis järgige erinevate siltide abil nuppude loomiseks juhiseid.
- Lisama '
” ja „ 'elemendid ja määrake need' btn ” ja „ btn-primary ” klassid. - Seejärel lisage '
' silt tüübiga ' nuppu ”. Määrake sellele ' btn ” ja „ btn-edu ” kahe esimese nupu kujundamiseks siniseks ja kolmandaks roheliseks:
< a klass = 'btn btn-primary' href = '#' > Avatud < / a >
< sisend tüüp = 'nupp' klass = 'btn btn-success' väärtus = 'Otsing' >
Väljund
Kuidas luua Bootstrapis kontuurinuppe?
Nuppude piirjoonte lisamiseks Bootstrap ' btn-outline-* ” klassi kasutatakse. Selle süntaksis ' * ” tähistab siin kontuuri värvi. Näiteks, ' btn-outline-oht ' asetab punase piirjoone, ' btn-outline-primary ” määrab sinise piirjoone ja palju muud.
Analüüsige alltoodud koodi:
< nuppu tüüp = 'nupp' klass = 'btn btn-outline-primary' >Järgmine< / nuppu >< nuppu tüüp = 'nupp' klass = 'btn btn-outline-danger' >Tühista< / nuppu >
< nuppu tüüp = 'nupp' klass = 'btn btn-outline-success' >Edu< / nuppu >
Võib täheldada, et ' Edasi nupul on sinine piirjoon, nupul Tühista ” nupp punase kontuuriga ja „ Edu ” nupp on kujundatud rohelise kontuuriga:
Kuidas reguleerida Bootstrapi nuppude suurust?
Nuppude suuruse reguleerimiseks kasutatakse mõnda Bootstrapi klassi, näiteks:
- “ btn-lg ” klassi rakendatakse suure nupu loomiseks. See klass võib suurendada fondi suurust ja polsterdust.
- “ btn-md ” loob keskmise suurusega nupu.
- “ btn-sm ” loob väikese nupu.
Näide
Nüüd loome kolm erineva suuruse ja selgete nimedega nuppu:
< nuppu tüüp = 'nupp' klass = 'btn btn-sekundaarne btn-lg' >Suur< / nuppu >< nuppu tüüp = 'nupp' klass = 'btn btn-warning btn-md' >keskmine< / nuppu >
< nuppu tüüp = 'nupp' klass = 'btn btn-danger btn-sm' >Väike< / nuppu >
Väljund
Kuidas teha Bootstrapis plokitaseme nuppu?
Plokitaseme nupud on need, mis hoiavad täislaiuses suurust. Plokitaseme nuppude loomiseks kasutage btn-plokk ” klassi kasutatakse järgmiselt
< nuppu tüüp = 'nupp' klass = 'btn btn-warning btn-block' > nupp< / nuppu >< nuppu tüüp = 'nupp' klass = 'btn btn-sekundaarne btn-plokk' >nupp< / nuppu >
Väljund
Kuidas luua Bootstrapis aktiivseid olekunuppe?
Aktiivse oleku nupud viitavad hetkel aktiivsetele nuppudele. Need nupud on tavalisest veidi tumedamad. Selliste nuppude loomiseks käivitage Bootstrap ' aktiivne ” klassi kasutatakse.
Näide
Allpool olev kood loob kaks nuppu. Esimene on normaalses olekus, samas kui teist rakendatakse koos ' aktiivne ” klass:
< nuppu tüüp = 'nupp' klass = 'btn btn-success' >Edu< / nuppu >< nuppu tüüp = 'nupp' klass = 'btn btn-success active' >Edu< / nuppu >
Väljund
Kuidas luua Bootstrapis keelatud oleku nuppe?
Keelatud oleku nupud viitavad nuppudele, mida ei saa klõpsata ja mida ei saa kasutada. Bootstrapis on ' puudega ” klassi kasutatakse keelatud oleku nupu loomiseks. ' puudega ” atribuuti saab kasutada ka selleks.
Näide
Vaadake allpool toodud näidet:
- Esimene nupp ei ole keelatud olekus.
- Teine kasutab ' puudega ” klassis, et luua keelatud olekunupp.
- Kolmas kasutab ' puudega ” atribuut:
< nuppu tüüp = 'nupp' klass = 'btn btn-success keelatud' >Edu< / nuppu >
< nuppu tüüp = 'nupp' klass = 'btn btn-success' keelatud>Edu< / nuppu >
Väljund
Oleme käsitlenud erinevaid Bootstrapi nuppude ja nende stiiliga seotud aspekte CSS-is.
Järeldus
' btn ” klassi kasutatakse lihtsa kujundusega Bootstrapi nuppude loomiseks. Värviliste ja kontuurinuppude loomiseks kasutage btn-* ” ja „ btn-outline-* ' klasse kasutatakse seal, kus ' * ” sümboliseerib mis tahes värviklassi. Näiteks, ' btn-hoiatus ' loob kollase nupu ' btn-outline-hoiatus ” loob kollase kontuuriga nupu ja palju muud. Nuppude aktiveerimiseks või keelamiseks rakendatakse vastavalt 'aktiivse' ja 'keelatud' klasse. See postitus andis põhjaliku juhendi Bootstrapi nuppude kohta.