TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Esimerkkejä käynnistysnauhan painikkeista

1

Bootstrap on täydellinen kehys, joka sisältää kaikenlaisia ​​elementtejä, kuten painikkeita, lomakkeita, paneeleja jne. Elementtien väriä ja kokoa on helppo mukauttaa Bootstrap -teemamalleilla. Tässä artikkelissa esittelemme erilaisia ​​Bootstrap 3 -painikkeiden esimerkkejä. Tutustu Bootstrap 5 -painikkeiden uusimpaan artikkeliin .

Tarvitset seuraavat asiat lisätäksesi Bootstrap -painikkeet sivustoosi.

  • Bootstrap CSS ja JS
  • jQuery -käsikirjoitus
  • Fontti mahtavia kuvakkeita
  • Mukautetut CSS -tyylit
  • HTML -koodi

Koodin saaminen

Kolme ensimmäistä komponenttia voidaan lisätä ilmaisten CDN -linkkien avulla. Voit ladata mukautetun CSS- ja HTML -koodin alla olevan painikkeen avulla. Zip -arkisto sisältää kaksi tiedostoa – yhden CSS: lle ja toisen HTML: lle. Voit ladata tässä artikkelissa käytetyt CSS- ja HTML -tiedostot täältä.

Koodin lisääminen sivullesi

Lopuksi koko koodin pitäisi näyttää alla kuvatulta. Voit lisätä mukautetun CSS -koodin verkkosivusi otsikko -osion tyylitunnisteisiin tai ladata .css -tiedoston ja linkin ulkoisena tyylitaulukkona. Jos sivustosi käyttää jo Bootstrapia, Font Awesomeia ja jQueryä, sinun ei tarvitse lisätä CDN -linkkejä.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */ </style> ADD HTML CODE HERE <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Esimerkkejä Esittely

Esittelypainikkeet on jaettu eri ryhmiin:

  • Ympyräkuvakkeen painikkeet

  • Avattavat painikkeet

  • Oletuspainikkeet

  • Linjapainikkeet

  • Suorakulmaiset painikkeet

  • Ympyräpainikkeet

  • Pyöristetyt kulmapainikkeet

  • Litteät painikkeet

  • Kaltevuuspainikkeet

  • Kaltevuus- ja suorakulmio -painikkeet

  • Litteät ja suorakulmaiset painikkeet

  • Viiva- ja suorakulmionäppäimet

  • Ympyrä- ja viivapainikkeet

  • Ympyrä- ja kaltevuuspainikkeet

  • Pyöristys- ja rivipainikkeet

  • Suuret sosiaaliset painikkeet kuvakkeilla ja verkon nimellä

  • Pienet sosiaaliset painikkeet vain kuvakkeilla

Alla on esimerkkejä Bootstrap -painikkeista.

Esimerkkejä käynnistysnauhan painikkeista

Ympyräpainikkeet kuvakkeilla

Esimerkkejä käynnistysnauhan painikkeista

Bootstrap Social Sharing -painikkeet

Esimerkkejä käynnistysnauhan painikkeista

Bootstrap Simple Line -painikkeet

Esimerkkejä käynnistysnauhan painikkeista

Bootstrap -pyöristetyt viivapainikkeet

Esimerkkejä käynnistysnauhan painikkeista

Bootstrap -pyöristetyt väripainikkeet

Esimerkkejä käynnistysnauhan painikkeista

Bootstrapin oletustyylin painikkeet

Jos käytät Bootstrap -kehyksen CSS- ja JS -tiedostoja sivustolla, joka ei käytä Bootstrap -mallia, varmista, että kaikki muut elementit ovat kunnossa ja eivät vaikuta niihin. Muussa tapauksessa sinun on ehkä purettava vain vaadittu CSS ja käytettävä sitä sivustossasi itsenäisesti Bootstrap -muokkaajalla.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja