Tämä artikkeli kattaa seuraavat näkökulmat Bootstrap-merkkien käytön osoittamiseen:
- Kuinka käyttää Bootstrap-merkkiä lisätietojen saamiseksi?
- Kuinka käyttää Bootstrap-merkkiä asiayhteyteen liittyvissä tiedoissa?
- Kuinka lisätä mukautettuja tyylejä Bootstrap Badgeen?
- Kuinka lisätä kuvakkeita Bootstrap Badgeen?
- Kuinka linkittää Bootstrap Badge toiseen lähteeseen?
- Kuinka tehdä merkit pyöristetyiksi?
- Kuinka käyttää Bootstrap Badgea laskurina?
Mitä Bootstrap-merkit ovat?
Tunnusmerkit ovat peruskomponentteja, joita käytetään indikaattorin näyttämiseen. Niitä voidaan esimerkiksi käyttää numeerisena laskurina ilmoitusten tai viestien määrän näyttämiseen:
Niitä voidaan käyttää myös lisätietojen näyttämiseen, kuten annetussa kuvassa:
Kuinka käyttää Bootstrap-merkkiä lisätietojen saamiseksi?
Bootstrap-merkkejä voidaan lisätä HTML-elementteihin lisätietoa varten. Katso alla mainittu esimerkki esittelyä varten.
Esimerkki
Jos haluat käyttää Bootstrap-merkkiä lisätietojen saamiseksi, toimi seuraavasti:
- Lisätä ' ' ja ' ”elementtejä.
- Sijoita ' ' elementti ' kunniamerkki ' ja ' kunniamerkki-* ' luokat. 'Badge-*'-luokka viittaa tunnukseen, jolla on määritetty väri:
< h6 > Apurahat < jänneväli luokkaa = 'tunnusmerkki-toissijainen' > Uusi < / jänneväli >< / h6 >
Voidaan havaita, että asiaankuuluviin otsikoihin on lisätty kaksi merkkiä:
Kuinka käyttää Bootstrap-merkkiä asiayhteyteen liittyvissä tiedoissa?
Bootstrap-merkkejä voidaan käyttää myös kontekstitietojen tarjoamiseen, kuten ' merkki-vaara ' näyttää merkin punaisena, ja sitä voidaan käyttää näyttämään epäonnistuneita viestejä, kuten peruutus, virheellinen tai useampi. ' merkki-menestys ” käytetään silloin, kun haluamme näyttää menestysviestin.
Esimerkki
Katso annettua koodia ymmärtääksesi käsitellyn skenaarion:
< jänneväli luokkaa = 'tunnusmerkki-vaara' >Tiliä ei vahvistettu< / jänneväli >< jänneväli luokkaa = 'tunnusmerkki-info' >tämä on merkki< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkkivaroitus' >Tili vireillä varten hyväksyntä< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkki - menestys' >Tili vahvistettu< / jänneväli >
Lähtö
Kuinka lisätä mukautettuja tyylejä Bootstrap Badgeen?
Voit myös lisätä Bootstrap-merkeihin ainutlaatuista tyyliä CSS:n avulla. Paremman ymmärtämisen vuoksi luokka, jonka nimi on ' mukautettu ' lisätään kohtaan ' ”elementtiä. Sitten käytetään seuraavia ominaisuuksia:
< jänneväli luokkaa = 'tunnusmerkki-vaara-muokattu' >Tiliä ei vahvistettu < / jänneväli >< jänneväli luokkaa = 'tunnusmerkki-tieto mukautettu' >Tämä on merkki< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkkivaroitustapa' >Tili vireillä varten hyväksyntä< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkki-menestysmuokattu' >Tili vahvistettu< / jänneväli >
Tyyli 'mukautettu' luokka
.mukautettu {Fonttikoko : 18px ;
fontin paino : 100 ;
kirjainväli : 1px ;
pehmuste : 8px 15px ;
}
' .mukautettu ' käytetään pääsyyn ' mukautettu ”luokka. Siihen sovelletaan seuraavia ominaisuuksia:
- ' Fonttikoko ” säätää kirjasinkokoa.
- ' fontin paino ” ilmoittaa fontin paksuuden.
- ' kirjainväli ” lisää tilaa kirjainten väliin.
- ' pehmuste ” tarjoaa tilaa elementin sisällön ympärille.
Lähtö
Kuinka lisätä kuvakkeita Bootstrap Badgeen?
Voimme lisätä myös erilaisia kuvakkeita merkkeihin. Tätä varten on olemassa useita luokkia, joita voidaan käyttää tähän tarkoitukseen. Lisätietoja on osoitteessa Fontti Mahtava verkkosivusto.
Esimerkki
Lisää HTML-koodiin ' ”elementtiä. Aseta tähän elementtiin rivielementti ' ' tai '' lisätäksesi kuvakeluokan:
< jänneväli luokkaa = 'tunnusmerkki-vaara-muokattu' > Tiliä ei ole vahvistettu< i luokkaa = 'kaukana fa-time-ympyrä' >< / i >
< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkki-menestysmuokattu' > Tili vahvistettu
< i luokkaa = 'fas fa-user-check' >< / i >
< / jänneväli >
Lähtö
Kuinka linkittää Bootstrap Badge toiseen lähteeseen?
Jos haluat tehdä Bootstrap-merkeistä klikattavia, aseta ' kunniamerkki 'luokat HTML-koodissa' ' -tunniste ja anna linkitetyn sivun viite ' href 'määrite:
< a href = '#' luokkaa = 'tunnusmerkki-vaara-muokattu' >Peruuta< / a >< a href = '#' luokkaa = 'tunnusmerkki-tieto mukautettu' >Lähetä< / a >
Lähtö
Kuinka tehdä merkit pyöristetyiksi?
Jos haluat tehdä tunnuksen reunoista pyöristetympiä, lisää luokka ' merkki-pilleri ”. Tämä luokka tukee suurempaa raja-säde ' ja vaaka' pehmuste ”ominaisuudet:
< jänneväli luokkaa = 'tunnusmerkki-pilleri merkki-vaara custom' >Tiliä ei vahvistettu < / jänneväli >< jänneväli luokkaa = 'badge badge-pill badge-warning custom' >Tili vireillä varten hyväksyntä< / jänneväli >
< jänneväli luokkaa = 'tunnusmerkki-pilleri merkki-menestys custom' >Tili vahvistettu < / jänneväli >
Lähtö
Kuinka käyttää Bootstrap Badgea laskurina?
Jos haluat luoda painikkeen, jossa on laskuri, lisää HTML '
Ilmoitukset < jänneväli luokkaa = 'tunnusmerkkivalo' > 4 < / jänneväli >
< / -painiketta >
Lähtö
Siinä oli kyse Bootstrap-merkeistä ja niiden vastaavista nimikkeistä Bootstrapissa.
Johtopäätös
Bootstrap' kunniamerkki ” -luokkaa hyödynnetään merkkien lisäämiseen verkkosivustolle. Esimerkiksi luokat, kuten ' merkki-vaara ”, “ merkin tiedot ”, ja muita voidaan käyttää kontekstitietojen lisäämiseen merkkeihin niiden otsikoiksi. Joitakin luokkia sovelletaan kuvakkeiden lisäämiseen merkkeihin, kuten ' pitkä fa-time-ympyrä ” asettaaksesi ympyränristikuvakkeen. Tämä viesti on tarjonnut kattavan oppaan Bootstrap-merkeistä ja -tarroista.